B10a6 Reset9

Humayun1318

A responsive pet adoption platform using the Peddy API. Features include dynamic pet listings, category filtering, price sorting, an interactive adoption process, and detailed pet modals. Built with Tailwind CSS and ES6, ensuring a seamless user experience across devices.

Download

Pet Adoption Website

Project Description

The Pet Adoption Website is a functional web application designed to help users explore and adopt pets from various categories. The website fetches data from external APIs to display information about pets, such as breed, gender, price, and vaccination status. Users can browse pets, like their favorites, and adopt them directly. The website is designed to be responsive, ensuring an optimal experience on both desktop and mobile devices.

Key Features

Browse Pets: View a variety of pets with essential details like breed, gender, birth date, price, and vaccination status.
Pet Categories: Filter pets by categories (e.g., dogs, cats, etc.) to easily find the pet that suits your preferences.
Pet Details: Each pet has a dedicated page displaying detailed information such as breed, name, age, price, and adoption status.
Like and Adopt Pets: Users can click the like button to add pets picture to their favorite list, and adopt them directly through the interface.
Responsive Design: The website is fully responsive, providing an optimal user experience across all device sizes, from desktop to mobile.

ES6 Features Used

Arrow Functions: Used for concise function expressions and better readability.
Async/Await: Employed for handling asynchronous operations like fetching data from APIs.
Template Literals: Used for easy string interpolation and embedding dynamic content in HTML.
Destructuring Assignment: Used for extracting values from objects and arrays in a cleaner, more efficient manner.
Promises: Used for handling asynchronous tasks, especially in fetching data from external APIs.

Styling

Tailwind CSS: The website utilizes Tailwind CSS for utility-first styling, allowing for rapid and flexible design.
Custom CSS: Custom CSS is used alongside Tailwind to further refine the design and make it unique to the project.

Live Link

You can check out the live version of the Pet Adoption Website here:
Live Project Link

Repository Link

Clone the repository from GitHub to run the project locally:
GitHub Repository Link

Technologies Used

HTML5: For structuring the website content.
CSS3: For styling the website and making it responsive.
Tailwind CSS: For utility-first, flexible styling of elements.
JavaScript: For dynamic content and interactions like fetching data from APIs.
Font Awesome: For integrating free icons to enhance the user interface.
API Integration: Fetches pet-related data from external APIs.

How to Run the Project Locally

Clone the repository to your local machine:

git clone https://github.com/Humayun1318/B10A6-reset9.git

Navigate to the project directory:
```
cd B10A6-reset9
```
Open the index.html file in your browser to view the project.

Future Enhancements

User Authentication: Implement user authentication for a personalized pet adoption experience.
Adoption Form: Add a pet adoption application form for users to directly apply for adoption.
Backend Integration: Introduce a backend to handle pet data securely and allow user registrations.

Acknowledgments

Thanks to the: Programming Hero API for providing the pet data API.
Tailwind CSS: For the utility-first CSS framework that made styling fast and efficient.
Thanks to: Font Awesome for the free icons used in the project.

Thank you for visiting the Pet Adoption Website! I hope you find the perfect pet to adopt.

Top categories