diff --git a/src/app/(category)/README.md b/src/app/(category)/README.md index 0d2fef09..1baa1cfe 100644 --- a/src/app/(category)/README.md +++ b/src/app/(category)/README.md @@ -46,9 +46,9 @@ #### :zap: Row 1 -| | | | +| | | | | :--: | :--: | :--: | -| [Amazon Clone](./src/app/(category)/frontend/(projects)/amazon-clone) | [Amazon Prime Clone](./src/app/(category)/frontend/(projects)/amazon-prime-clone) | [Animated Tea Cup](./src/app/(category)/frontend/(projects)/animated-tea-cup) | +| [Amazon Clone](./src/app/(category)/frontend/(projects)/amazon-clone) | [Amazon Prime Clone](./src/app/(category)/frontend/(projects)/amazon-prime-clone) | [Animated Tea Cup](./src/app/(category)/frontend/(projects)/animated-tea-cup) | --- @@ -122,6 +122,13 @@ | :--: | :--: | :--: | | [Spotify Clone](./src/app/(category)/frontend/(projects)/spotify-clone) | [Starbucks Landing Page](./src/app/(category)/frontend/(projects)/starbucks-landing-page) | [Survey Form](./src/app/(category)/frontend/(projects)/survey-form) | +--- + +#### :zap: Row 11 + +| | +| :--: | +| [amazon](./src/app/(category)/frontend/(projects)/amazon) | diff --git a/src/app/(category)/frontend/(projects)/amazon/Readme.md b/src/app/(category)/frontend/(projects)/amazon/Readme.md new file mode 100644 index 00000000..82606a5a --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/Readme.md @@ -0,0 +1,75 @@ +

đŸ’Ĩ Amazon Clone Project đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ +![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) +![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) +![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+

This is a feature-rich Amazon Clone web application developed as part of my open-source contribution for **Script Winter of Code (SWOC)**. It replicates key functionalities of Amazon, showcasing a dynamic and interactive shopping experience built using modern front-end technologies.

+ +
+ + + + +## :zap: How to run it? 🕹ī¸ + + +### Prerequisites +Ensure you have the following installed: +- A modern browser (Chrome, Edge, Firefox). +- [Git](https://git-scm.com/) for cloning the repository. + +### Steps +1. Clone this repository: + ```bash + git clone https://github.com/Avdhesh-Varshney/WebMasterLog.git + ``` +2. Navigate to the project folder: + ```bash + cd amazon-clone + ``` +3. Open `index.html` in your browser to view the project locally. + + + + + + +## :zap: Screenshots 📸 +![screenshot](https://raw.githubusercontent.com/monark1/WebMasterLog/refs/heads/amazon-clone-feature/src/app/(category)/frontend/(projects)/amazon/screenshot.webp) +
+ +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Monark Bhardwaj đŸ‘Ļ

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/src/app/(category)/frontend/(projects)/amazon/amazon.css b/src/app/(category)/frontend/(projects)/amazon/amazon.css new file mode 100644 index 00000000..0d8a118f --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/amazon.css @@ -0,0 +1,335 @@ +*{ + margin:0px; + padding:0px; + font-family: Arial, Helvetica, sans-serif; + border:border-box; +} +.navbar{ + display: flex; + align-items: center; + justify-content: space-around; + height:60px; + background-color: #0f1111; + color: white; +} +.nav-logo{ + height: 50px; + width: 113px; +} +.logo{ + background-image: url('.images/amazon_logo.png'); + height: 50px; + width: 100%; + background-size: cover; +} +.nav-logo:hover{ + border:2px solid white; + border-radius: 4px; +} +/* box2 */ +.add-icon{ + display: flex; + align-items: center; +} +.add-first{ + color:#cccccc; + font-size: 0.9rem; + padding-left: 15px; +} +.add-second{ + font-size: 1rem; + padding-left: 3px; +} +.nav-address:hover{ + border:2px solid white; + border-radius: 4px; + cursor: pointer; +} +/* box3 */ +.nav-search{ + display: flex; + background-color: pink; + height: 40px; + width: 620px; + border-radius: 4px; +} +.search-select{ + background-color: #f3f3f3; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + width:50px; + border: none; + text-align: center; +} +.nav-search:hover{ + border: 2px solid orange; +} +.search-input{ + width: 100%; + font-size: 1rem; + border: none; +} +.search-icon{ + width: 45px; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.2rem; + background-color: rgb(255, 187, 0); + color: #0f1111; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + +} +/* box4 */ +.nav-first{ + font-size: 0.75rem; +} +.nav-second{ + font-size: 0.8rem; + font-weight: 700; +} +.nav-signin:hover,.nav-return:hover{ + border:2px solid white; + border-radius: 4px; + cursor: pointer; +} +/* box5 */ +.nav-cart i { + font-size: 30px; +} +.nav-cart{ + font-size: 0.85rem; + font-weight: 700; +} +.nav-cart:hover{ + border:2px solid white; + border-radius: 4px; + cursor: pointer; +} +/* panel */ +.panel{ + height:40px; + background-color: #222f3d; + display: flex; + color: white; + align-items: center; + justify-content: space-around; +} +.panel-options{ + display: flex; + width: 70%; + font-size: 0.9rem; +} +.panel-options p{ + margin-left:15px; + cursor: context-menu; +} +.panel-options p:hover{ + text-decoration: underline; +} +.panel-deals{ + font-size: 0.9rem; + font-weight: 700; +} + +/* header-slider */ +.header-slider ul { + display: flex; + overflow-y: hidden; +} + +.header-img { + max-width: 100%; + mask-image: linear-gradient(to bottom, #000000, transparent 100%); +} +.header-slider a { + position: absolute; + top: 20%; + z-index: 1; + padding: 5vh 1vw; + background: #ffffff4f; + color: #0000007b; + text-decoration: none; + font-size: 18px; + font-weight: bold; + cursor: pointer; + transition: 0.5s; +} + +/* hero-section */ +.hero-section{ + background-image: url(.images/header4.jpg); + + background-size: cover; + display: flex; + justify-content: center; + align-items: flex-end; +} +.hero-message{ + height: 40px; + width: 90%; + background-color: transparent; + color: black; + display: flex; + justify-content: center; + align-items: center; + font-size: 0.85rem; + position: relative; + bottom: 35px; +} +.hero-message a{ + color:#007185; + cursor: pointer; + text-decoration: underline; +} +/* shop-section */ +.shop-section{ + height:980px; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + background-color: #d4dbd9; +} +.box{ + height:400px; + width: 23%; + /* border: 2px solid black; */ + background-color: white; + padding:20px 0px 15px; + margin-top: 15px; +} +.box-image{ + margin-top:1rem; + margin-bottom: 1rem; + height:300px; + background-size: cover; +} +.box-content{ + margin-left: 1rem; + margin-right: 1rem; +} +.box-content h2{ + margin-bottom: 6px; +} +.box-content p{ + color: #007185; + cursor: context-menu; +} +.box-content p:hover{ + text-decoration: underline; +} +/* sign-in */ +.sign-in{ + height:150px; + /* background-color: pink; */ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + + +.sign-in p{ + font-size: 0.78rem; + font-weight: 600; +} +button{ + margin-top: 3px; + height:28px; + width: 220px; + font-weight: 700; + background-color: rgb(252, 180, 46); + border-radius: 5px; + margin-bottom: 3px; +} +button:hover{ + background-color: orange; + cursor: pointer; +} + +.sign-in a{ + color: #007185; + cursor: context-menu; +} +.sign-in a:hover{ + text-decoration: underline; +} +/* footer */ +footer{ + margin-top: 15px; +} +.foot-panel1{ + background-color: #37475a; + color: white; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + font-size: 0.9rem; +} +.foot-panel2{ + background-color: #222f3d; + color: white; + height:300px; + display: flex; + justify-content: space-evenly; + align-items: center; +} +ul p{ + font-weight: 700; +} +ul a{ + display: block; + font-size: 0.87rem; + margin-top: 10px; + color:#dddddd; +} +.foot-panel3{ + height: 70px; + background-color: #222f3d; + color: white; + border-top: 0.1px solid rgb(165, 162, 162,0.3); + display: flex; + justify-content: center; + align-items: center; +} +.logo{ + background-image: url(".images/amazon_logo.png"); + background-size: cover; + height: 50px; + width: 100px; +} + +.details{ + margin-left: 60px; +} +.details button{ + height:35px; + width:130px; + background-color: #222f3d; + color: rgb(241,232,232,0.6); + border: 1px solid rgb(241, 232, 232,0.2); +} +.details button:hover{ + background-color: white; + color:#222f3d; + cursor: pointer; +} +/* panel4 */ +.foot-panel4{ + border-top: 0.1px solid rgb(165, 162, 162,0.3); + background-color: #222f3d; + color: white; + height: 76px; +} +.pages{ + font-size: 1rem; + text-align: center; + padding-top: 16px; +} +.copyright{ + font-size: 0.9rem; + text-align: center; + margin-top: 5px; +} diff --git a/src/app/(category)/frontend/(projects)/amazon/cart.css b/src/app/(category)/frontend/(projects)/amazon/cart.css new file mode 100644 index 00000000..abf3b6e6 --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/cart.css @@ -0,0 +1,93 @@ +/* cart.css */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f5f5f5; +} + +.cart-container { + max-width: 1000px; + margin: 50px auto; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.cart-items { + border-bottom: 1px solid #ddd; + margin-bottom: 20px; + padding-bottom: 20px; +} + +.cart-item { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.cart-item-image { + width: 120px; + height: auto; + margin-right: 20px; + border: 1px solid #ddd; + border-radius: 5px; +} + +.cart-item-details { + flex: 1; +} + +.cart-item-details h2 { + font-size: 1.2em; + margin: 0 0 10px; +} + +.cart-item-details p { + margin: 5px 0; +} + +.cart-item-details input { + width: 50px; + padding: 5px; + margin-left: 10px; +} + +.remove-item { + padding: 5px 10px; + background-color: #e47911; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.remove-item:hover { + background-color: #d2691e; +} + +.cart-total { + text-align: right; +} + +.cart-total h2 { + font-size: 1.5em; + margin-bottom: 20px; +} + +.checkout { + padding: 10px 20px; + background-color: #e47911; + color: white; + border: none; + border-radius: 5px; + font-size: 1em; + cursor: pointer; + transition: background-color 0.3s; +} + +.checkout:hover { + background-color: #d2691e; +} diff --git a/src/app/(category)/frontend/(projects)/amazon/cart.html b/src/app/(category)/frontend/(projects)/amazon/cart.html new file mode 100644 index 00000000..73fbe468 --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/cart.html @@ -0,0 +1,148 @@ + + + + + + Shopping Cart + + + + + +
+ + +
+
+ + All +
+
+

Toady's Deal

+

Customer Service

+

Registry

+

Gift Cards

+

Sell

+
+
+ Shop deals in Electronics +
+
+
+ +
+

Your Shopping Cart

+
+
+ Noise Cancelling Headphones +
+

Noise Cancelling Headphones

+

Price: $199.99

+ + + +
+
+
+
+

Cart Summary

+

Subtotal: $199.99

+

Shipping: FREE

+

Total: $199.99

+ +
+
+ + + diff --git a/src/app/(category)/frontend/(projects)/amazon/images/amazon_logo.png b/src/app/(category)/frontend/(projects)/amazon/images/amazon_logo.png new file mode 100644 index 00000000..320210ef Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/amazon_logo.png differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/box1_image.jpg b/src/app/(category)/frontend/(projects)/amazon/images/box1_image.jpg new file mode 100644 index 00000000..f4aa14e4 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/box1_image.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/box2_image.jpg b/src/app/(category)/frontend/(projects)/amazon/images/box2_image.jpg new file mode 100644 index 00000000..d807dc45 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/box2_image.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/box3_image.jpg b/src/app/(category)/frontend/(projects)/amazon/images/box3_image.jpg new file mode 100644 index 00000000..300f1f32 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/box3_image.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/box4_image.jpg b/src/app/(category)/frontend/(projects)/amazon/images/box4_image.jpg new file mode 100644 index 00000000..90ee126d Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/box4_image.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/box5_image.jpg b/src/app/(category)/frontend/(projects)/amazon/images/box5_image.jpg new file mode 100644 index 00000000..4fe84c40 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/box5_image.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/box6_image.jpg b/src/app/(category)/frontend/(projects)/amazon/images/box6_image.jpg new file mode 100644 index 00000000..ca7f184b Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/box6_image.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/box7_image.jpg b/src/app/(category)/frontend/(projects)/amazon/images/box7_image.jpg new file mode 100644 index 00000000..21c23736 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/box7_image.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/box8_image.jpg b/src/app/(category)/frontend/(projects)/amazon/images/box8_image.jpg new file mode 100644 index 00000000..23127409 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/box8_image.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/d b/src/app/(category)/frontend/(projects)/amazon/images/d new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/images/d @@ -0,0 +1 @@ + diff --git a/src/app/(category)/frontend/(projects)/amazon/images/header1.jpg b/src/app/(category)/frontend/(projects)/amazon/images/header1.jpg new file mode 100644 index 00000000..94b6800e Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/header1.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/header2.jpg b/src/app/(category)/frontend/(projects)/amazon/images/header2.jpg new file mode 100644 index 00000000..1dc3f84e Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/header2.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/header3.jpg b/src/app/(category)/frontend/(projects)/amazon/images/header3.jpg new file mode 100644 index 00000000..3804e08c Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/header3.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/header4.jpg b/src/app/(category)/frontend/(projects)/amazon/images/header4.jpg new file mode 100644 index 00000000..c3b54b20 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/header4.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/header5.jpg b/src/app/(category)/frontend/(projects)/amazon/images/header5.jpg new file mode 100644 index 00000000..f27f8e00 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/header5.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/header6.jpg b/src/app/(category)/frontend/(projects)/amazon/images/header6.jpg new file mode 100644 index 00000000..d8b19757 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/header6.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/headphone2.webp b/src/app/(category)/frontend/(projects)/amazon/images/headphone2.webp new file mode 100644 index 00000000..29965971 Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/headphone2.webp differ diff --git a/src/app/(category)/frontend/(projects)/amazon/images/headphone4.jpg b/src/app/(category)/frontend/(projects)/amazon/images/headphone4.jpg new file mode 100644 index 00000000..d8a0c11f Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/images/headphone4.jpg differ diff --git a/src/app/(category)/frontend/(projects)/amazon/index.html b/src/app/(category)/frontend/(projects)/amazon/index.html new file mode 100644 index 00000000..4fcb9e9c --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/index.html @@ -0,0 +1,199 @@ + + + + + + AmazonClone + + + + +
+ + +
+
+ + All +
+
+

Toady's Deal

+

Customer Service

+

Registry

+

Gift Cards

+

Sell

+
+
+ Shop deals in Electronics +
+
+
+ +
+ 🡸 + 🡺 + +
+
+

Welcome to the best shopping experience! Discover amazing deals and exclusive offers just for you. + Start shopping now! +

+
+
+
+
+

Cloths

+
+

See more

+
+
+
+

Health & Personal Care

+
+

See more

+
+
+

Furniture

+
+

See more

+
+
+

Electronics

+
+

See more

+
+
+

Beauty Picks

+
+

See more

+
+
+

Pet Care

+
+

See more

+
+
+

New arrivals in Toys

+
+

See more

+
+
+

Discover fashion trends

+
+

See more

+
+
+

+
+

See personalized recommendations

+ + +

New customer?Start here.

+
+
+ + + + + + + diff --git a/src/app/(category)/frontend/(projects)/amazon/login.css b/src/app/(category)/frontend/(projects)/amazon/login.css new file mode 100644 index 00000000..ca2ed086 --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/login.css @@ -0,0 +1,70 @@ +/* login.css */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f5f5f5; +} + +.login-container { + max-width: 400px; + margin: 100px auto; + background: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +h1 { + font-size: 1.8em; + text-align: center; + margin-bottom: 20px; +} + +form { + display: flex; + flex-direction: column; +} + +label { + margin-bottom: 5px; + font-weight: bold; +} + +input { + padding: 10px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1em; +} + +.login-button { + padding: 10px; + background-color: #e47911; + color: white; + border: none; + border-radius: 5px; + font-size: 1em; + cursor: pointer; + transition: background-color 0.3s; +} + +.login-button:hover { + background-color: #d2691e; +} + +.login-footer { + text-align: center; + margin-top: 10px; +} + +.login-footer a { + color: #e47911; + text-decoration: none; + transition: color 0.3s; +} + +.login-footer a:hover { + color: #d2691e; +} diff --git a/src/app/(category)/frontend/(projects)/amazon/login.html b/src/app/(category)/frontend/(projects)/amazon/login.html new file mode 100644 index 00000000..489d57ca --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/login.html @@ -0,0 +1,142 @@ + + + + + + Login + + + + + +
+ + +
+
+ + All +
+
+

Toady's Deal

+

Customer Service

+

Registry

+

Gift Cards

+

Sell

+
+
+ Shop deals in Electronics +
+
+
+ +
+

Login to Your Account

+
+ + + + + + + +
+ +
+ + + diff --git a/src/app/(category)/frontend/(projects)/amazon/product.css b/src/app/(category)/frontend/(projects)/amazon/product.css new file mode 100644 index 00000000..0ea05bd2 --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/product.css @@ -0,0 +1,50 @@ +/* product.css */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f5f5f5; +} + +.product-container { + max-width: 800px; + margin: 50px auto; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.product-image { + width: 100%; + height: auto; + margin-bottom: 20px; +} + +.product-description { + font-size: 1.2em; + line-height: 1.6; + margin: 20px 0; +} + +.product-price { + font-size: 1.5em; + font-weight: bold; + color: #e47911; + margin-bottom: 20px; +} + +.add-to-cart { + padding: 10px 20px; + background-color: #e47911; + color: white; + border: none; + border-radius: 5px; + font-size: 1em; + cursor: pointer; + transition: background-color 0.3s; +} + +.add-to-cart:hover { + background-color: #d2691e; +} diff --git a/src/app/(category)/frontend/(projects)/amazon/product.html b/src/app/(category)/frontend/(projects)/amazon/product.html new file mode 100644 index 00000000..7f10e901 --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/product.html @@ -0,0 +1,140 @@ + + + + + + + Product Details + + + + + +
+ + +
+
+ + All +
+
+

Toady's Deal

+

Customer Service

+

Registry

+

Gift Cards

+

Sell

+
+
+ Shop deals in Electronics +
+
+
+
+ +
+

Noise Cancelling Headphones

+

Price: $199.99

+

Experience the ultimate sound quality with these top-of-the-line noise-cancelling headphones. Featuring advanced noise reduction technology, comfortable ear cushions, and up to 30 hours of battery life, these headphones are perfect for music lovers and professionals alike.

+ +
+
+ + + diff --git a/src/app/(category)/frontend/(projects)/amazon/screenshot.webp b/src/app/(category)/frontend/(projects)/amazon/screenshot.webp new file mode 100644 index 00000000..b6ba788c Binary files /dev/null and b/src/app/(category)/frontend/(projects)/amazon/screenshot.webp differ diff --git a/src/app/(category)/frontend/(projects)/amazon/script-header.js b/src/app/(category)/frontend/(projects)/amazon/script-header.js new file mode 100644 index 00000000..fe4d59f1 --- /dev/null +++ b/src/app/(category)/frontend/(projects)/amazon/script-header.js @@ -0,0 +1,42 @@ +// Script for header-slider functionality + +const imgs = document.querySelectorAll('.header-slider ul img'); +const prev_btn = document.querySelector('.control-prev'); +const next_btn = document.querySelector('.control-next'); + +let n = 0; + +function changeSlide() { + for (let i = 0; i < imgs.length; i++) { + imgs[i].style.display = 'none'; + } + imgs[n].style.display = 'block'; +} + +function autoSlide() { + n = (n + 1) % imgs.length; // Increment and loop back to 0 + changeSlide(); +} + +changeSlide(); + +// Set interval for automatic sliding every 3 seconds +setInterval(autoSlide, 3000); + +prev_btn.addEventListener('click', () => { + if (n > 0) { + n--; + } else { + n = imgs.length - 1; + } + changeSlide(); +}); + +next_btn.addEventListener('click', () => { + if (n < imgs.length - 1) { + n++; + } else { + n = 0; + } + changeSlide(); +}); diff --git a/src/database/data.json b/src/database/data.json index 79147854..67023233 100644 --- a/src/database/data.json +++ b/src/database/data.json @@ -82,6 +82,19 @@ }, "frontend": { "beginner": [ + { + "project_name": "amazon", + "creator": "Monark Bhardwaj", + "date": "Wed Jan 29 2025", + "github_url": "https://github.com/monark1", + "avatar_url": "https://avatars.githubusercontent.com/u/143939581?v=4", + "description": "This is a feature-rich Amazon Clone web application developed as part of my open-source contribution for **Script Winter of Code (SWOC)**. It replicates key functionalities of Amazon, showcasing a dynamic and interactive shopping experience built using modern front-end technologies.", + "tags": [ + "CSS3", + "HTML5", + "JavaScript" + ] + }, { "project_name": "amazon-clone", "creator": "Suvadip Sana",