https://github.com/slendershield/dog-glossary
The Dog Glossary is a fun and interactive project get dog images depending on the breed, and other detials.
https://github.com/slendershield/dog-glossary
css html javascript
Last synced: about 2 months ago
JSON representation
The Dog Glossary is a fun and interactive project get dog images depending on the breed, and other detials.
- Host: GitHub
- URL: https://github.com/slendershield/dog-glossary
- Owner: SlenderShield
- License: mit
- Created: 2024-11-20T11:12:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-28T11:22:40.000Z (about 1 year ago)
- Last Synced: 2025-04-06T02:37:07.176Z (about 1 year ago)
- Topics: css, html, javascript
- Language: JavaScript
- Homepage:
- Size: 68.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Dog Glossary
## Introduction
The **Dog Glossary** is a fun and interactive project to improve your HTML, CSS, and JavaScript skills. Using a public API, this project allows users to:
- View random pictures of adorable dogs.
- Browse through a list of dog breeds.
This project is a great way to practice:
- Working with APIs.
- Handling promises in JavaScript.
- Managing and displaying data dynamically on a webpage.
## Features
- Display random pictures of dogs.
- List all available dog breeds in a clean, user-friendly interface.
- Fetch and process data from an API using JavaScript.
## Technologies Used
- **HTML5**: To structure the webpage.
- **CSS3**: To style the webpage and make it visually appealing.
- **JavaScript (ES6)**: To fetch data, handle promises, and dynamically render content.
- **Dog API**: A public API used to fetch random dog pictures and breed information.
## API Reference
The project uses the [Dog API](https://thedogapi.com) for fetching data.
### Key Endpoints
- **Random Dog Images**:
```
GET https://dog.ceo/api/breeds/image/random
```
- **List of Dog Breeds**:
```
GET https://dog.ceo/api/breeds/list/all
```
## Getting Started
### Prerequisites
- Basic understanding of HTML, CSS, and JavaScript.
- A text editor like VS Code.
- A browser to test your web page.
### Installation
1. Clone this repository:
```bash
git clone https://github.com/your-username/dog-glossary.git
cd dog-glossary
```
2. Open the project in your preferred text editor.
3. Open the `index.html` file in a browser to see the project in action.
## Usage
1. Open the webpage in your browser.
2. Click on the button to fetch and display a random dog picture.
3. Browse through the list of dog breeds displayed dynamically on the page.
## Folder Structure
```plaintext
dog-glossary/
├── index.html # Main HTML file.
├── styles.css # CSS file for styling the webpage.
├── script.js # JavaScript file for functionality.
├── README.md # Project documentation.
```
## Learning Outcomes
- How to fetch and process data using an API.
- Working with promises in JavaScript.
- Dynamically updating the DOM.
- Structuring and styling a project effectively.
## Example Screenshots
### Random Dog Picture
### List of Breeds
## Future Enhancements
- Add search functionality to filter breeds.
- Include more details about each breed, such as temperament and size.
- Implement a dark mode for better user experience.
## Contributing
Contributions are welcome! Feel free to fork this repository and submit a pull request.
## License
This project is licensed under the [MIT License](LICENSE).