This project is a custom-built product carousel created using only vanilla JavaScript (ES6). It replicates the product recommendation section found on the homepage of the ebebek.com website.
- Dynamically fetch product data from a remote JSON source
- Display products in a horizontal, scrollable carousel layout
- Calculate and display discounts only when the product is on sale
- Allow users to favorite products, with state saved in localStorage
- Ensure responsiveness and compatibility across devices
- All functionality built using native DOM manipulation methods
- JavaScript (ES6+)
- Dynamic DOM manipulation
fetchAPIlocalStoragefor caching and user preferences- No third-party libraries, frameworks, or external CSS
- Products are fetched and cached in
localStorageto avoid repeated network requests - Discount percentage is displayed only if
price < original_price - Favorite system toggles a heart icon and persists using
localStorage - Carousel renders only on the homepage (
location.pathname === '/') - Fully responsive layout with basic inline CSS styling
- All structure and logic are implemented within a single
.jsfile
- Navigate to https://www.e-bebek.com (homepage only)
- Open Developer Tools → Console
- Paste the contents of the JavaScript file and press Enter
- The carousel will be rendered above the "Sizin için Seçtiklerimiz" section
This project includes a responsive and scrollable product carousel titled "Beğenebileceğinizi düşündüklerimiz". It displays product cards fetched from a remote JSON source, with the following features:
- Horizontal scroll with left/right arrow buttons
- Responsive layout (5 items desktop, 3 tablet, 2 mobile)
- Heart toggle to add/remove favorites (stored in
localStorage) - Discount price and badge calculation
- SVG arrow navigation buttons with enhanced visibility
.
├── elif_isik.js # Main script file
└── README.md # Project documentation