Skip to content

Commit

Permalink
Merge pull request #38 from pranali412/fw20_0569_day-3
Browse files Browse the repository at this point in the history 
Make Up Page and Brushes page
  • Loading branch information
@Surajy001
Surajy001 authored Sep 30, 2022
2 parents 0c6efd7 + 18a233d commit d888260
Show file tree
Hide file tree
Showing 6 changed files with 582 additions and 61 deletions.
68 changes: 68 additions & 0 deletions brushes_page.html
View file
Original file line number Diff line number Diff line change
@@ -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>



38 changes: 5 additions & 33 deletions makeup_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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> -->
Expand All @@ -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> -->


153 changes: 153 additions & 0 deletions scripts/brushes_page.js
View file
Original file line number Diff line number Diff line change
@@ -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)

86 changes: 86 additions & 0 deletions scripts/makeup_page.js
View file
Original file line number Diff line number Diff line change
@@ -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)
})
}






Loading

0 comments on commit d888260

Please sign in to comment.