For Live Page : Click Here
For Live Link : Click Here
Original Project Repositories : Link
This project focuses on building a responsive pet adoption platform. It includes a fully responsive navbar that collapses into a mobile menu and a banner section with a "View More" button that scrolls to the adoption section. In the "Adopt Your Best Friend" section, dynamic categories and pets are fetched from an API, allowing users to filter and sort by price. Each pet card displays essential information, with placeholders for missing data. Liked pets are displayed in a grid, and clicking "Details" opens a modal with more information. The platform will feature an adoption countdown and a responsive footer, all while ensuring a smooth user experience across devices.
-
Interactive Adoption Process: The "Adopt" button triggers a countdown before confirming the adoption, adding a fun interactive element.
-
Pet Details Modal: A modal window opens with full pet details when the "Details" button is clicked, enhancing user engagement.
-
"View More" Scroll Button: The banner section includes a "View More" button that scrolls users down to the "Adopt Your Best Friend" section for smoother navigation.
-
Like Functionality: Users can "Like" pets, which adds them to a right-side grid, displaying their thumbnails in a 2-column layout.
-
Sort by Price Feature: A "Sort by Price" button enables users to sort pets in descending order, enhancing browsing and searchability.
-
let and const: Block-scoped variable declarations that prevent issues like variable hoisting and unintended reassignments.
-
Promises and fetch API: Asynchronous programming with promises for handling API requests and responses.
-
Template Literals: Enables embedding variables and expressions within strings using backticks, useful for dynamic content generation.
-
Arrow Functions: More concise syntax for writing functions, making the code cleaner and easier to read.