feat: Etsy web cloning

Kavya/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}

Kavya/calculatePrice.js

@@ -0,0 +1,4 @@
+export function calculatePrice(actualPrice, discount) {
+  const currentPrice = actualPrice * ((100 - discount) / 100);
+  return Math.floor(currentPrice).toLocaleString();
+}

Kavya/fetchFunction.js

@@ -0,0 +1,5 @@
+export function getData() {
+  return fetch(
+    "https://raw.githubusercontent.com/kavyaks11/Training-Oct/main/etsy/object.json"
+  ).then((response) => response.json());
+}

Kavya/likeBtn.js

@@ -0,0 +1,12 @@
+const heartSVG = `<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="24" height="24"><path d="M16.5,3A6.953,6.953,0,0,0,12,5.051,6.912,6.912,0,0,0,7.5,3C4.364,3,2,5.579,2,9c0,5.688,8.349,12,10,12S22,14.688,22,9C22,5.579,19.636,3,16.5,3Z" ></path></svg>`;
+
+export function createLikeButton(container) {
+  container.innerHTML += `
+                        <button class="like_btn">${heartSVG}</button>
+                        `;
+
+  const likeButton = container.querySelector(".like_btn");
+  likeButton.addEventListener("click", () => {
+    likeButton.classList.toggle("active");
+  });
+}

Kavya/object.json

@@ -0,0 +1,206 @@
+{
+  "navObjects": [
+    { "text": "Sellers' Sales Hub", "img": false },
+    { "text": "Jewellery & Accessories", "img": false },
+    { "text": "Clothing & Shoes", "img": false },
+    { "text": "Home & Living", "img": false },
+    { "text": "Wedding & Party", "img": false },
+    { "text": "Toys & Entertainment", "img": false },
+    { "text": "Art & Collectibles", "img": false },
+    { "text": "Craft Supplies", "img": false },
+    { "text": "Gifts", "img": true }
+  ],
+
+  "discoverObjects": [
+    {
+      "url": "https://i.etsystatic.com/17600118/c/1000/1000/0/119/il/d077de/2325460652/il_300x300.2325460652_lhfz.jpg",
+      "text": "Wedding"
+    },
+    {
+      "url": "https://i.etsystatic.com/18077312/r/il/b10e09/2350226444/il_300x300.2350226444_odar.jpg",
+      "text": "Jewellery"
+    },
+    {
+      "url": "https://i.etsystatic.com/32501528/c/1518/1518/253/562/il/4bdfa0/3702738409/il_300x300.3702738409_qfmi.jpg",
+      "text": "Clothing"
+    },
+    {
+      "url": "https://i.etsystatic.com/16676438/c/2002/2002/449/0/il/89ea5d/1467855817/il_300x300.1467855817_ksv4.jpg",
+      "text": "Home & Living"
+    },
+    {
+      "url": "https://i.etsystatic.com/30725321/r/il/a22d35/4016941798/il_300x300.4016941798_bruv.jpg",
+      "text": "Wall Art"
+    },
+    {
+      "url": "https://i.etsystatic.com/19220794/r/il/28ced3/2951466885/il_300x300.2951466885_1ly4.jpg",
+      "text": "Kitchen & Dining"
+    }
+  ],
+
+  "dealsObjects": [
+    {
+      "url": "https://i.etsystatic.com/22368382/r/il/006d21/4245808662/il_300x300.4245808662_a3x4.jpg",
+      "off": "40",
+      "text": "Women's Ethnic Clothing"
+    },
+    {
+      "url": "https://i.etsystatic.com/32501528/c/1488/1488/0/0/il/23a5b4/3700725057/il_300x300.3700725057_szgj.jpg",
+      "off": "40",
+      "text": "Women's Western Clothing"
+    },
+    {
+      "url": "https://i.etsystatic.com/25566015/c/2003/2003/0/274/il/5b71e2/3196479462/il_300x300.3196479462_20xh.jpg",
+      "off": "40",
+      "text": "Men's Clothing"
+    },
+    {
+      "url": "https://i.etsystatic.com/38026977/r/il/f2c1ad/4277525816/il_300x300.4277525816_f4wp.jpg",
+      "off": "40",
+      "text": "Fashion Jewellery"
+    },
+    {
+      "url": "https://i.etsystatic.com/32501528/c/1757/1757/247/180/il/67dc01/4248212322/il_300x300.4248212322_psvv.jpg",
+      "off": "40",
+      "text": "Winter Clothing"
+    },
+    {
+      "url": "https://i.etsystatic.com/23528878/r/il/625e23/2589827894/il_300x300.2589827894_bi5a.jpg",
+      "off": "40",
+      "text": "Wedding Clothing"
+    }
+  ],
+
+  "popularObjects": [
+    {
+      "url": "https://i.etsystatic.com/35966576/c/1614/1283/669/351/il/e1510f/4033777789/il_340x270.4033777789_dqlw.jpg",
+      "title": "Birth Flower Jewelry Travel Case, Birth Month Flower Gift, Personalized Birthday Gift, Leather Jewelry Travel Case, Custom Jewelry Case",
+      "starno": 9393,
+      "rating": 4.5,
+      "actualPrice": 1701,
+      "discount": 50,
+      "freeDelivery": false
+    },
+    {
+      "url": "https://i.etsystatic.com/32477306/c/2000/1589/0/256/il/0bcd64/3491080620/il_340x270.3491080620_oh18.jpg",
+      "title": "Dainty Name Necklace with Birth Flower, Personalized Name Necklace, Custom Gold Name Jewelry, Birthday Gift for Her, Bridesmaid Gift",
+      "starno": 13451,
+      "rating": 4.5,
+      "actualPrice": 3632,
+      "discount": 50,
+      "freeDelivery": true
+    },
+    {
+      "url": "https://i.etsystatic.com/28045281/r/il/3f41fa/3897994052/il_340x270.3897994052_l8xd.jpg",
+      "title": "Sun catcher/ Crystal suncatcher/ Crystal Rainbow maker/ Aurora gemstone suncatcher/ crystal prism/ wall hanging/ Home decor/ Gift 4 women",
+      "starno": 6761,
+      "rating": 3.2,
+      "actualPrice": 2638,
+      "discount": 10,
+      "freeDelivery": true,
+      "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/Purple1_aal8ie.mp4"
+    },
+    {
+      "url": "https://i.etsystatic.com/25168585/c/2500/1987/0/181/il/214e7e/4589233930/il_340x270.4589233930_dg79.jpg",
+      "title": "Custom Pet Portraits Using Pet Photo Personalized Digital Dog Portraits Cat Portraits Custom Dog Portraits Custom Pet Art Pet Drawing",
+      "starno": 10961,
+      "rating": 5,
+      "actualPrice": 1276,
+      "discount": 40,
+      "freeDelivery": false,
+      "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/PAINT_PORTRAIT_ETSY_VIDEO_vo9waf.mp4"
+    },
+    {
+      "url": "https://i.etsystatic.com/27890741/c/2343/1862/320/560/il/31a0dd/4028709894/il_340x270.4028709894_i6tr.jpg",
+      "title": "Heart Keychain Set - Made with Authentic LEGO® Bricks, Matching keychains, Gift Set for Couples, Best Friends - Very High Quality & DURABLE",
+      "starno": 12225,
+      "rating": 5,
+      "actualPrice": 1445,
+      "discount": 50,
+      "freeDelivery": false,
+      "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/HFF_Hearts_Video_m6nj4t.mp4"
+    },
+    {
+      "url": "https://i.etsystatic.com/26694795/c/2445/1943/282/0/il/035b01/3254592822/il_340x270.3254592822_5dss.jpg",
+      "title": "Handmade Damascus Pocket Knife Rose Wood Handle Birthday Gift Folding Knife Groomsmen Gift Anniversary Wedding Personalized Gift for Men",
+      "starno": 6211,
+      "rating": 5,
+      "actualPrice": 8535,
+      "discount": 70,
+      "freeDelivery": false,
+      "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/PB-42_convert-video-online.com_cfle3f.mp4"
+    }
+  ],
+  "valentineObjects": [
+    {
+      "imgURL": "https://i.etsystatic.com/21988330/r/il/4134b0/4525254351/il_680x540.4525254351_6cvq.jpg",
+      "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,c_crop,du_15,h_720,q_auto:good,w_720,x_0,y_124/RED_NP_kwstwf",
+      "price": 7682
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/32501528/c/1190/946/76/376/il/5841d1/4551382339/il_680x540.4551382339_jh29.jpg",
+      "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,c_crop,du_15,h_1080,q_auto:good,w_720,x_0,y_99/IMG_2223_krvkzs",
+      "price": 8962
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/30767997/c/1080/858/0/364/il/ea7151/4109914487/il_680x540.4109914487_j9v5.jpg",
+      "price": 1280
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/17501005/r/il/aa8aff/3518501728/il_680x540.3518501728_5krv.jpg",
+      "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/InShot_20211206_095812059_nvtird.mp4",
+      "price": 12035
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/20814531/c/736/585/0/150/il/ad5deb/4185811790/il_680x540.4185811790_9lh9.jpg",
+      "price": 1569
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/32501528/c/1488/1488/0/0/il/23a5b4/3700725057/il_680x540.3700725057_szgj.jpg",
+      "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/InShot_20211125_132024897_in6joq.mp4",
+      "price": 7255
+    }
+  ],
+
+  "overviewObjects": [
+    {
+      "title": "A community doing good",
+      "text": "Etsy is a global online marketplace, where people come together to make, sell, buy and collect unique items. We're also a community pushing for positive change for small business, people , and planet."
+    },
+    {
+      "title": "Support independent creators",
+      "text": "There's no Etsy werehouse - just millions of people selling the things they love. We make the whole process easy, helping you connect directly with makers to find something extraordinary."
+    },
+    {
+      "title": "Peace of mind",
+      "text": "Your privacy is the highest priority of our dedicated team. And if you ever need assistance, we are always ready to step in for support."
+    }
+  ],
+
+  "selectionObjects": [
+    {
+      "imgURL": "https://i.etsystatic.com/22038449/r/il/23ab17/3432204051/il_340x270.3432204051_bu5x.jpg",
+      "text": "The Festive Shop"
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/30973456/c/1736/1379/267/1120/il/598a23/3655008446/il_340x270.3655008446_cp75.jpg",
+      "text": "The Wedding Shop"
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/17600118/c/1132/903/0/0/il/8b4129/2591412730/il_340x270.2591412730_abof.jpg",
+      "text": "Fashion finds"
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/32541884/r/il/a56807/3849973862/il_340x270.3849973862_p1w4.jpg",
+      "text": "For your home"
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/22605194/c/2000/1589/0/264/il/14ccfa/3657188176/il_340x270.3657188176_pmre.jpg",
+      "text": "Kitchen and dining"
+    },
+    {
+      "imgURL": "https://i.etsystatic.com/21859925/r/il/1ee530/2623242698/il_340x270.2623242698_f0jd.jpg",
+      "text": "The Etsy Gift "
+    }
+  ]
+}

Kavya/playBtn.js

@@ -0,0 +1,15 @@
+const playSVG = `<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="24" height="24"><polygon points="4 4 4 20 20 12 4 4" fill="#222222"></polygon></svg>`;
+
+export function createPlayButton(container) {
+  container.innerHTML += `
+                        <button class="play_btn">${playSVG}</button>
+                         `;
+  const playButton = container.querySelector(".play_btn");
+  container.addEventListener("mouseenter", () => {
+    playButton.style.display = "none";
+  });
+
+  container.addEventListener("mouseleave", () => {
+    playButton.style.display = "flex";
+  });
+}