Peddy is a dynamic and responsive web platform that allows users to browse and adopt pets. The platform integrates with several APIs to fetch pet data, details,category and manage the adoption process. Users can view pets by category, like them and show liked pets are right side, and start the adoption process by clicking adopt button. The application ensures a smooth and responsive user interactive experience.
-
By clicking view more:
User can go to adopt pet part by clicking the view more button. -
Dynamic Pet Listings by Categories:
Users can browse wide variety of pets by clicking different category (dogs, cats, birds, etc.). All category is dynamically fetched from an API and displayed in a grid layout. -
Adopt Your Best Friend Section:
The main section of the platform displays pets with details like their name, breed, gender, birth date, and price. Users can sort them by descinding price. -
Interactive Modal for Pet Details info:
Clicking the "Details" button opens a modal with complete details information about the pet,which are fetched from an API. The modal closes when the user clicks the close button. -
Adopt and Like Functionality:
Users can like pets, and liked pets are displayed in a right-side grid layout with 2 column. When the "Adopt" button is clicked, a countdown appears, and the button text changes to "Adopted" after completion. Also, countdown is going decrese 3 2 1 then close automatically. And then button is disabled. -
Responsive Design:
The platform is fully responsive, adapting to desktops, tablets, and mobile screens. The navigation bar, header, banner, footer, and all sections maintain a smooth layout on all devices.
- Arrow Functions: Used to simplify callback functions and improve code readability.
- let/const: Used for better control over variable mutability.
- Template Literals: Utilized for dynamic string generate.
- Promises (Async/Await): Employed for handling API requests asynchronously, for easy to manage.
- Spread operator: Used for creating new array from an existing array.
- for of: Used for iterating over iterable object.