pranali412 · Surajy001 · Sep 30, 2022 · Sep 29, 2022
diff --git a/brushes_page.html b/brushes_page.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> Brushes </title>
+    <script src="https://kit.fontawesome.com/132c3d850c.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="./styles/brushes_page.css">
+</head>
+<body>
+
+    <div id="container">
+        <div id="top">
+            <img src="https://d32baadbbpueqt.cloudfront.net/Collection/39da2bc6-d83c-4350-a2b1-0c0ec7a721a8.jpg" alt=""> <br>
+            <a href="index.html">Home  &ensp;  <i class="fa-solid fa-chevron-right"></i> &ensp;  Blend Trend Makeup Brush</a> 
+        </div>
+
+        <div id="main">
+            <div id="side_bar">
+                    <div class="item">
+                         <h3 class="sub-btn">Sort By: <span>Relevance <i class="fa-solid fa-chevron-down  dropdown"></i> </span> </h3>
+
+                             <!-- dropdrow -->
+                                <div class="sub_menu">
+                                    <p class="sub-item"><i class="fa-regular fa-circle"></i> &ensp; Relevance</p>
+                                    <p class="sub-item"><i class="fa-regular fa-circle"></i> &ensp; Price: High To Low</p>
+                                    <p class="sub-item"><i class="fa-regular fa-circle"></i> &ensp; Price: Low To High</p>
+                                </div>
+                    </div>
+
+                    <div id="side_bar_bottom">
+
+                    </div>
+            </div>
+
+
+
+            <div id="right_side"></div>
+
+        </div>
+
+        <div id="bottom">
+            <!-- <div class="line"> -->
+                <!-- <div> <hr style=" width: 120px;  height: 1px; border: none;"> </div> -->
+                <h2>LET’S STAY IN TOUCH</h2>
+                <!-- <div> <hr style=" width: 120px;  height: 1px; border: none;"> </div> -->
+              <!-- </div> -->
+
+
+           <p>Get the latest beauty tips straight to your inbox. Can’t wait to connect!</p> <br>
+              <input type="email"id="" placeholder="Enter Email">
+                <button>SUBSCRIBE</button>
+        </div>
+
+    </div>
+
+
+</body>
+</html>
+
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+<script src="./scripts/brushes_page.js" type="module"></script>
+
+
+
diff --git a/makeup_page.html b/makeup_page.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title> Make Up </title>
     <script src="https://kit.fontawesome.com/132c3d850c.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="./makeup_page.css">
+    <link rel="stylesheet" href="./styles/makeup_page.css">
 </head>
 <body>
 
@@ -40,6 +40,9 @@ <h3 class="sub-btn">Sort By: <span>Relevance <i class="fa-solid fa-chevron-down
 
         </div>
 
+        <p id="bottom-heding">READ MORE ABOUT MAKEUP &nbsp;<i class="fa-solid fa-chevron-right"></i></p>
+
+
         <div id="bottom">
             <!-- <div class="line"> -->
                 <!-- <div> <hr style=" width: 120px;  height: 1px; border: none;"> </div> -->
@@ -62,40 +65,9 @@ <h2>LET’S STAY IN TOUCH</h2>
 
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-<script>
-    //jquery for toggle sub_menu
-    $(document).ready(function(){
-        $('.sub-btn').click(function(){
-            console.log("hiii")
-            $(this).next('.sub_menu').slideToggle();
-            $(this).find('.dropdown').toggleClass('rotate');
-        });
-    })
-</script>
-
-
-
-
-
-
-
-
-
+<script src="./scripts/makeup_page.js" type="module"></script>
 
 
-<!-- <script>
-let q=document.querySelector(".sub-btn")
-q.onclick = function(){
-    console.log("hiiii");
-        //  this.classList.toggle("active");
-        var panel = this.nextElementSibling;
-        if (panel.style.display === "block") {
-            panel.style.display = "none";
-        } else {
-            panel.style.display = "block";
-        }
-}
 
-</script> -->
 
 
diff --git a/scripts/brushes_page.js b/scripts/brushes_page.js
@@ -0,0 +1,153 @@
+
+
+let obj_data=[
+    {
+        image:
+            "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-001Blush.jpg?v=1627659984",
+        name: "Blend Trend Face Brush - 001 Blush",
+        price: 399.00,
+        rating: 4.9+ "(15)",
+        product:"Face Brush",
+    },
+    {
+        image:
+            "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFoundationBrush-052Kabuki.jpg?v=1627573664",
+        name: "Blend Trend Foundation Brush - 052 Kabuki",
+        price: 499.00,
+        rating: 4.8 + "(26)",
+        product:"Foundation Brush",
+    },
+    {
+        image:
+            "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-006Highlighter.jpg?v=1627660002",
+        name: "Blend Trend Face Brush - 006 Highlighter",
+        price: 399.00,
+        rating: 4.7+"(23)",
+        product:"Face Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-13.jpg?v=1627659977",
+        name: "Blend Trend Dual Eyeshadow Brush - 413 Flat + Round Xl",
+        price: 599.00,
+        rating: 5+"(2)",
+        product:"Eyeshadow Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-2-min.jpg?v=1627573652",
+        name: "Blend Trend Eyeshadow Brush - 041 Flat",
+        price: 399.00,
+        rating: 5+"(3)",
+        product:"Eyeshadow Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-5-min.jpg?v=1627573639",
+        name: "Blend Trend Dual Eyeshadow Brush - 412 Flat + Round",
+        price: 599.00,
+        rating: 5+"(2)",
+        product:"Eyeshadow Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-12-min.jpg?v=1627573647",
+        name: "Blend Trend Dual Face Brush - 075 Powder + Foundation",
+        price: 599.00,
+        rating: 4.8+"(42)",
+        product:"Face Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-3-min.jpg?v=1627573657",
+        name: "Blend Trend Eyeshadow Brush - 042 Round",
+        price: 399.00,
+        rating: 4.4+"(5)",
+        product:"Eyeshadow Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-14_1.jpg?v=1627659982",
+        name: "Blend Trend Eyeshadow Brush - 043 Round Xl",
+        price: 399.00,
+        rating: 4.8+"(6)",
+        product:"Eyeshadow Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-003Contour.jpg?v=1627659996",
+        name: "Blend Trend Face Brush - 003 Contour",
+        price: 399.00,
+        rating: 4.5+"(13)",
+        product:"Face Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-007Powder.jpg?v=1627660008",
+        name: "Blend Trend Face Brush - 007 Powder",
+        price: 399.00,
+        rating: 4.9+"(24)",
+        product:"Face Brush",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/BeginnersEssentialsCombo3-WBGimages.jpg?v=1630683820",
+        name: "Face Essentials Combo",
+        price: 1499.00,
+        rating: 5+"(1)",
+        product:"Face Essentials",
+    },
+    {
+        image:"https://cdn.shopify.com/s/files/1/0906/2558/products/1_1.jpg?v=1630683833",
+        name: "EYES & FACE Combo",
+        price: 649.00,
+        rating: 4.5+"(6)",
+        product:"EYES & FACE Combo",
+    },
+
+]
+
+
+ //jquery for toggle sub_menu
+ $(document).ready(function(){
+    $('.sub-btn').click(function(){
+        console.log("hiii")
+        $(this).next('.sub_menu').slideToggle();
+        $(this).find('.dropdown').toggleClass('rotate');
+    });
+})
+
+
+
+
+function append(data){
+    const right_side=document.getElementById('right_side');
+    right_side.innerHTML=null;
+
+    data.forEach((el)=>{
+    const div=document.createElement("div");
+    div.setAttribute("id","p-div");
+
+    const img=document.createElement('img')
+    img.src=el.image;
+    const Name=document.createElement("p");
+    Name.innerText=el.name;
+
+    const Price=document.createElement("h4");
+    Price.innerText=" ₹ "+el.price;
+
+    const Rating=document.createElement("h4");
+    Rating.style.color="#757575";
+    if(el.rating==null){
+        Rating.innerText=" ★ " + "0.0";
+    }
+    else{
+        Rating.innerText=" ★ "+el.rating;
+    }
+
+    const btn=document.createElement("button")
+    btn.innerHTML="Add To Cart";
+    btn.addEventListener("click",()=>{
+        addtocart();
+    })
+
+
+    div.append(img,Name,Price,Rating,btn)
+    //console.log(img,Name,Price,Rating);
+    right_side.append(div)
+    })
+}
+
+append(obj_data)
+
diff --git a/scripts/makeup_page.js b/scripts/makeup_page.js
@@ -0,0 +1,86 @@
+
+
+// let q=document.querySelector(".sub-btn")
+// q.onclick = function(){
+//     console.log("hiiii");
+//         //  this.classList.toggle("active");
+//         var panel = this.nextElementSibling;
+//         if (panel.style.display === "block") {
+//             panel.style.display = "none";
+//         } else {
+//             panel.style.display = "block";
+//         }
+// }
+
+
+
+
+ //jquery for toggle sub_menu
+ $(document).ready(function(){
+    $('.sub-btn').click(function(){
+        console.log("hiii")
+        $(this).next('.sub_menu').slideToggle();
+        $(this).find('.dropdown').toggleClass('rotate');
+    });
+})
+
+
+
+
+const products=async()=>{
+    try{
+console.log("hiiiiii");
+       const res=await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline&limit=20&page=1`)
+          //const res=await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?product_category=cream&product_type=foundation`) 
+        const data= await res.json();
+     // console.log("data:",data);
+      append(data)
+    }catch(err){
+        console.log("Error:",err);
+    }
+}
+
+products();
+
+function append(data){
+    const right_side=document.getElementById('right_side');
+    right_side.innerHTML=null;
+
+    data.forEach((el)=>{
+    const div=document.createElement("div");
+    div.setAttribute("id","p-div");
+
+    const img=document.createElement('img')
+    img.src=el.image_link
+    const Name=document.createElement("p");
+    Name.innerText=el.name;
+
+    const Price=document.createElement("h4");
+    Price.innerText=" ₹ "+ Math.floor(el.price*80);
+
+    const Rating=document.createElement("h4");
+    Rating.style.color="#757575";
+    if(el.rating==null){
+        Rating.innerText=" ★ " + "0.0";
+    }
+    else{
+        Rating.innerText=" ★ " + el.rating;
+    }
+
+    const btn=document.createElement("button")
+    btn.innerHTML="Add To Cart";
+    btn.addEventListener("click",()=>{
+        addtocart();
+    })
+
+
+    div.append(img,Name,Price,Rating,btn)
+    right_side.append(div)
+    })
+}
+
+
+
+
+
+