new.html

<!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">
    <link rel="stylesheet" href="./styles/new.css">
    <link rel="stylesheet" href="./styles/navbar.css">
    <link rel="stylesheet" href="./styles/footer.css">
    <title>New Arrivals</title>
    <link rel="shortcut icon" href="./images/Geekbuying_title_logo.png" type="image/x-icon">
</head>
<body>
    <div id="navbar"></div>
    <div id="main_content">
        <div id="heading"><h1>New Arrival</h1></div>
        <div id="master_content">
            <div id="categories">
                <div id="categories_item">
                    <h3 id="catg">All Categories</h3>
                    <details class="drop">
                        <summary>Smart Home & Garden</summary>
                        <uL>
                            <li>Robot Vacuum Cleaner</li>
                            <li>Cordless Vacuum Cleaners</li>
                            <li>Ceiling Lights</li>
                            <li>Hair Care & Salon</li>
                            <li>Clocks</li>
                            <li>Bakeware</li>
                            <li>Furniture</li>
                            <li>Tableware</li>
                            <li>Kitchen Appliances</li>
                            <li>Personal Care</li>
                            <li>LED Outdoor Lights</li>
                            <li>Robot Vacuum Cleaner Accessories</li>
                            <li>Cordless Vacuum Cleaner Accessories</li>
                            <li>Others</li>
                            <li>Night Light</li>
                            <li>Cosmetics</li>
                            <li>Light Gadgets</li>
                            <li>Dog Supplies</li>
                            <li>Cat Supplies</li>
                            <li>Other Pet Supplies</li>
                        </uL>
                    </details >
                        <details class="drop">
                            <summary>Consumer Electronics</summary>
                            <uL>
                                <li>Earbud Headphones</li>
                                <li>FDM 3D Printers</li>
                                <li>Laser Engraved & Cutters</li>
                                <li>3D Printer Accessories</li>
                                <li>Projectors</li>
                                <li>Accessories</li>
                                <li>Measurement and Analysis Instrument</li>
                                <li>Power Banks</li>
                                <li>Camera & Camrecorder</li>
                                <li>Other Accessories</li>
                              
                            </uL>
                        </details>
                        <details class="drop">
                            <summary>Sports & Outdoors</summary>
                            <uL>
                                <li>Outdoor Generator & Portable Power</li>
                                <li>Water Sports</li>
                                <li>Survival & Emergency Gear</li>
                                <li>Tent & Hammock</li>
                                <li>Sports & Action Cameras</li>
                                <li>Other Outdoor Gears</li>
                                <li>Bikes</li>
                                <li>travel Supplies</li>
                                <li>Bike Bags</li>
                                <li>Other Accessories</li>
                                <li>Basketball</li>
                                <li>Soccer</li>
                            </uL>
                        </details>
                        <details class="drop">
                            <summary>Toy & Hobbies</summary>
                            <uL>
                                <li>RC Quadcopters</li>
                                <li>RC Boats</li>
                                <li>RC cars</li>
                                <li>FPV System</li>
                                <li>RC Helicopter</li>
                                <li>RC Boat Parts</li>
                                <li>Building Sets & Blocks</li>
                                <li>Trampoline</li>
                            </uL>
                        </details>
        
                        <details class="drop">
                            <summary>Automobiles & Motorcycles</summary>
                            <uL>
                                <li>Other Gadgets</li>
                                <li>Car Repairs & Maintenance</li>
                                <li>Garage Equipment & Tools</li>
                              
                            </uL>
                        </details>
                        <details class="drop">
                            <summary>Wearable Devices</summary>
                            <uL>
                                <li>Smart Watches</li>
                                <li>Smart Bracelets</li>
                            
                              
                            </uL>
                        </details>
                   
                    <details class="drop">
                        <summary>TV Boxes & Mini PCs</summary>
                        <uL>
                            <li>Android TV Boxes</li>
                            <li>Window Mini PCs</li>
                        
                          
                        </uL>
                    </details>
                    <details class="drop">
                        <summary>Security System</summary>
                        <uL>
                            <li>IP Cameras</li>
                            <li>Video Door Phones</li>
                        
                          
                        </uL>
                    </details>
                    <details class="drop">
                        <summary>Phones & Accessories</summary>
                        <uL>
                            <li>5G Smartphones</li>
                            <li>iPhones Accessories</li>
                        
                          
                        </uL>
                    </details>
                    <details class="drop">
                        <summary>Computers, Tablet & Accessories</summary>
                        <uL>
                            <li>Android Tablet</li>
                            <li>Gaming Laptop</li>
                            <li>Monitors</li>
                        
                          
                        </uL>
                    </details>
                </div>
            </div>
            <div id="filter_item">
                <div id="filter">
                   <div id="days"><p class="filtr">New Arrived:</p><button id="seven" onclick="arrived()">7 days</button><button id="fifteen" onclick="arrived2()">15 Days</button><button id="thirty" onclick="arrived3()">30 Days</button></div>
                   <div id="filter1"><p class="filtr">Filter:</p><select name="" id="country" onchange="filcountry()">
                    <option value="Default">Ship From</option>
                    <option value="Europe"> Europe</option>
                    <option value="Poland">Poland</option>
                    <option value="Germany">Germany</option>
                    <option value="Spain">Spain</option>
                    <option value="United_States">United States</option>
                    <option value="United_Kingdom">United Kingdom</option>
                    <option value="Netherland">Netherland</option>
                    <option value="China">China</option>
                   </select>
                   <input type="checkbox" id="sale" onchange="funsale()"><label for="" >On sale</label>
                   <input type="checkbox" id="ship" onchange="funship()"><label for="">Free Shipping</label>
                   <p class="filtr">Price</p>
                   <input type="number" id="min" placeholder="Min" oninput="showfun()">
                   <h5>-</h5>
                   <input type="number" id="max" placeholder="Max" oninput="showfun()">
                   <div id="btn"></div>
                   </div>
                    <div id="sort"><p class="filtr">Sort:</p><button onclick="bstmtch()">Best Match</button><button onclick="nwarvl()">New Arrival</button><button onclick="prc()">Price</button></div>
                    </div>
                 <div id="item">

                </div>
            </div>
        </div>
        <div id="footer_part1"></div>
        <div id="footer_part2"></div>
    
    </div>
</body>
</html>

<!-- 
<script type="module" src="./scripts/navbar.js"></script> -->


<script type="module" src="./scripts/new.js"></script>

<script src="./scripts/backend.js"></script>

<script>
    let data = JSON.parse(localStorage.getItem("NewProducts"))

append(data)


function append(data){
    let parent = document.querySelector("#item");
    console.log(data)
    parent.innerHTML="";

    data.forEach((el)=>{

        let div = document.createElement('div');
        div.addEventListener("click",function(){
            detail(el);
        })

        let img = document.createElement('img');
        img.src = el.imgURL;
   
        let name = document.createElement('p');
        name.innerText = el.name;
   
        let price = document.createElement('h3');
        price.innerText = el.price;
   
        let discount = document.createElement('h6');
        if(el.off==undefined){
           discount.innerText="";
        }
        else{
           let text = el.cutprice+" "+el.off;
           discount.innerText = text;
        }
   
        let div2 = document.createElement("div");
        div2.setAttribute("class","logo")
   
        let img2 = document.createElement('img');
        img2.setAttribute("id","logoimg")
        img2.src = "https://as2.ftcdn.net/v2/jpg/01/25/83/03/1000_F_125830316_m9Grtzjlt2I5Gp4qpDQq5G5BSXR5d9ZF.jpg"
   
        let wish = document.createElement('p');
        wish.innerText = el.whislist;

        div2.append(img2, wish)
   
      div.append(img,name,price,discount,div2);
   
      parent.append(div)
     
     
    })


}

function detail(data){


    let bag = "";
    for(let i=1;i<data.price.length;i++){
        bag+=data.price[i]
    }
    let x = Number(bag)

    let bag2 = "";
    for(let i=0;i<data.name.length;i++){
        if(data.name[i]==" "){
            break;
        }
        bag2+=data.name[i];
    }

    let obj ={
        title: data.name,
        description:data.description,
        price:x,
        rating:data.ratings,
        image:data.imgURL,
        quantity:1,
        item_code:Math.floor((Math.random() * 999999) + 1),
        brand: bag2,
        country:data.country


    }

    console.log(obj)

    localStorage.setItem("Item_Details",JSON.stringify(obj))


    window.location.href="product_detail.html"
    
}


function filcountry(){

    console.log("hi")

    let query = document.querySelector("#country").value;
    console.log(query)

if(query=="Default"){
    let newdata = data;
    append(newdata)
}
else{
    let newdata = data.filter(function(el){
        if(el.country==query){
            return el;
        }
    })
 append(newdata)

}
}
function showfun(){
    let btn = document.querySelector("#btn")
    btn.innerHTML=`<button onclick="minmax()">OK</button>`   
}


let ar7=0;
function arrived(){
    ar7++;
    let btn = document.querySelector("#seven")
   if(ar7%2!=0){
    
     btn.style.color="green";
    let newdata = data.filter(function(el){
        if(el.arrived=="7"){
            return el;
        }
    })
    append(newdata)
   }
else{
    btn.style.color = "black";
    let newdata=data;
    append(newdata)
}
    
}

let ar15=0;
function arrived2(){
    ar15++;
    let btn = document.querySelector("#fifteen")
   if(ar15%2!=0){
    btn.style.color="green";
    let newdata = data.filter(function(el){
        if(el.arrived=="15"){
            return el;
        }
    })
    append(newdata)
   }
   else{
    btn.style.color = "black";
    let newdata=data;
    append(newdata)
}
}

let ar30=0;
function arrived3(){
    ar30++;
    let btn = document.querySelector("#thirty")
    if(ar30%2!=0){
        btn.style.color="green";
        let newdata = data.filter(function(el){
            if(el.arrived=="30"){
                return el;
            }
        })
        append(newdata)
    }
    else{
        btn.style.color = "black";
        let newdata=data;
        append(newdata)
    }
}

function funsale(){
let sale = document.querySelector("#sale");

if(sale.checked){
    newdata = data.filter(function(el){
        if(el.sale=="yes"){
            return el;
        }
    })

    append(newdata)
}
else{
    let newdata=data;
    append(newdata)
}

}


function funship(){
    let ship = document.querySelector("#ship");
    
    if(ship.checked){
        let newdata = data.filter(function(el){
            if(el.shipping=="yes"){
                return el;
            }
        })
    
        append(newdata)
    }
    else{
        newdata=data;
        append(newdata)
    }
    
    }


    function minmax(){

    let min = document.getElementById('min').value;
    let max = document.getElementById('max').value;
    console.log(min,max)

    if(min=="" || max==""){
        alert("Enter the correct Min and Max values")
    }
    else{
        let newdata = data.filter(function(el){
            
            let bag = "";
            for(let i=1;i<el.price.length;i++){
                bag+=el.price[i]
            }
            let x = Number(bag);
            if(x>=min && x<=max){
                return el;
            }

        })
        append(newdata)
    }

    }

    function bstmtch(){
        console.log("hi")
      let newdata = data.sort(function(a,b){
       let x = Number(a.whislist)
       let y = Number(b.whislist)
        return y-x;
      })

     append(newdata)
    }

    function nwarvl(){
        let newdata = data.sort(function(a,b){
            let x = Number(a.ratings)
            let y = Number(b.ratings)
             return x-y;
           })
     
          append(newdata)


    }

    let prccnt=0;

    function prc(){
        prccnt++;
        let newdata = data.sort(function(a,b){
            let bag = "";
    for(let i=1;i<a.price.length;i++){
        bag+=a.price[i]
    }
    let x = Number(bag)
    let bag2 = "";
    for(let i=1;i<b.price.length;i++){
        bag2+=b.price[i]
    }
    let y = Number(bag2)

            if(prccnt%2!==0){
                return x-y;
            }
            else{
                return y-x;
            }

           })
     
          append(newdata)


    }
</script>

<script>
    //Searchbox Categories Container.
let searchbox=document.querySelector("#category_dropdown_Sbox");
searchbox.addEventListener("mouseover",()=>{
    displayCategories();
});
let searchbox_container=document.querySelector(".category_container");
let displayCategories=()=>{
    searchbox_container.style.display="flex";
}
searchbox_container.addEventListener("mouseout",()=>{
    hideCategories();
})
let hideCategories=()=>{
    searchbox_container.style.display="none";
}
//Sign In Icon Dropdown starts here.
let dropdown=document.querySelector(".dropdown");
dropdown.addEventListener("mouseover",()=>{
    showContent();
})
let showContent=()=>{
    let content=document.querySelector(".dropdown_content");
    content.style.display="flex";
}
let dropdown_content=document.querySelector(".dropdown_content");
dropdown_content.addEventListener("mouseout",()=>{
    hideContent();
})
let hideContent=()=>{
    let content=document.querySelector(".dropdown_content");
    content.style.display="none";
}
let sign_in=document.querySelector(".sign_in");
sign_in.addEventListener("mouseover",()=>{
    showSignIn();
})
let showSignIn=()=>{
    let signIn_div=document.querySelector(".signin_dropdown_content");
    signIn_div.style.display="block";
}
let signIndiv=document.querySelector(".signin_dropdown_content");
signIndiv.addEventListener("mouseout",()=>{
    hideSignIn();
})
let hideSignIn=()=>{
    let signIn_div=document.querySelector(".signin_dropdown_content");
    signIn_div.style.display="none";
}
//Sign In ends here.

//Sign out starts here.


//Hamburger Dropdown Starts here.

let hamburger_dropdown1=document.querySelector(".first>#warehouse");
hamburger_dropdown1.addEventListener("mouseover",()=>{
    hamburger_dropdown1.style.backgroundColor="#f1f5fe";
    hamburger_dropdown1.style.borderLeft="3px solid #0066ff";
    showSecondDiv();
    appendSubcat1();
});
let hamburger_dropdown2=document.querySelector(".first>#outdoors");
hamburger_dropdown2.addEventListener("mouseover",()=>{
    hamburger_dropdown2.style.backgroundColor="#f1f5fe";
    hamburger_dropdown2.style.borderLeft="3px solid #0066ff";
    hideSecondDiv();
});
let hamburger_dropdown3=document.querySelector(".first>#gardens");
hamburger_dropdown3.addEventListener("mouseover",()=>{
    hamburger_dropdown3.style.backgroundColor="#f1f5fe";
    hamburger_dropdown3.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown4=document.querySelector(".first>#consumer");
hamburger_dropdown4.addEventListener("mouseover",()=>{
    hamburger_dropdown4.style.backgroundColor="#f1f5fe";
    hamburger_dropdown4.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown5=document.querySelector(".first>#TV_Box");
hamburger_dropdown5.addEventListener("mouseover",()=>{
    hamburger_dropdown5.style.backgroundColor="#f1f5fe";
    hamburger_dropdown5.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown6=document.querySelector(".first>#computers");
hamburger_dropdown6.addEventListener("mouseover",()=>{
    hamburger_dropdown6.style.backgroundColor="#f1f5fe";
    hamburger_dropdown6.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown7=document.querySelector(".first>#toys");
hamburger_dropdown7.addEventListener("mouseover",()=>{
    hamburger_dropdown7.style.backgroundColor="#f1f5fe";
    hamburger_dropdown7.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown8=document.querySelector(".first>#phones");
hamburger_dropdown8.addEventListener("mouseover",()=>{
    hamburger_dropdown8.style.backgroundColor="#f1f5fe";
    hamburger_dropdown8.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown9=document.querySelector(".first>#automobiles");
hamburger_dropdown9.addEventListener("mouseover",()=>{
    hamburger_dropdown9.style.backgroundColor="#f1f5fe";
    hamburger_dropdown9.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown10=document.querySelector(".first>#wearables");
hamburger_dropdown10.addEventListener("mouseover",()=>{
    hamburger_dropdown10.style.backgroundColor="#f1f5fe";
    hamburger_dropdown10.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown11=document.querySelector(".first>#security");
hamburger_dropdown11.addEventListener("mouseover",()=>{
    hamburger_dropdown11.style.backgroundColor="#f1f5fe";
    hamburger_dropdown11.style.borderLeft="3px solid #0066ff";
    //showSecondDiv();
});
let hamburger_dropdown12=document.querySelector(".first>#fashion");
hamburger_dropdown12.addEventListener("mouseover",()=>{
    hamburger_dropdown12.style.backgroundColor="#f1f5fe";
    hamburger_dropdown12.style.borderLeft="3px solid #0066ff";
   // showSecondDiv();
});
let showSecondDiv=()=>{
    let second_div=document.querySelector(".second");
    second_div.style.display="flex";
    second_div.style.marginRight="1px";
    second_div.style.marginBottom="0";
}
hamburger_dropdown1.addEventListener("mouseout",()=>{
    hamburger_dropdown1.style.backgroundColor="#ffffff";
    hamburger_dropdown1.style.borderLeft="none";
});
hamburger_dropdown2.addEventListener("mouseout",()=>{
    hamburger_dropdown2.style.backgroundColor="#ffffff";
    hamburger_dropdown2.style.borderLeft="none";
});
hamburger_dropdown3.addEventListener("mouseout",()=>{
    hamburger_dropdown3.style.backgroundColor="#ffffff";
    hamburger_dropdown3.style.borderLeft="none";
});
hamburger_dropdown4.addEventListener("mouseout",()=>{
    hamburger_dropdown4.style.backgroundColor="#ffffff";
    hamburger_dropdown4.style.borderLeft="none";
});
hamburger_dropdown5.addEventListener("mouseout",()=>{
    hamburger_dropdown5.style.backgroundColor="#ffffff";
    hamburger_dropdown5.style.borderLeft="none";
});
hamburger_dropdown6.addEventListener("mouseout",()=>{
    hamburger_dropdown6.style.backgroundColor="#ffffff";
    hamburger_dropdown6.style.borderLeft="none";
});
hamburger_dropdown7.addEventListener("mouseout",()=>{
    hamburger_dropdown7.style.backgroundColor="#ffffff";
    hamburger_dropdown7.style.borderLeft="none";
});
hamburger_dropdown8.addEventListener("mouseout",()=>{
    hamburger_dropdown8.style.backgroundColor="#ffffff";
    hamburger_dropdown8.style.borderLeft="none";
});
hamburger_dropdown9.addEventListener("mouseout",()=>{
    hamburger_dropdown9.style.backgroundColor="#ffffff";
    hamburger_dropdown9.style.borderLeft="none";
});
hamburger_dropdown10.addEventListener("mouseout",()=>{
    hamburger_dropdown10.style.backgroundColor="#ffffff";
    hamburger_dropdown10.style.borderLeft="none";
});
hamburger_dropdown11.addEventListener("mouseout",()=>{
    hamburger_dropdown11.style.backgroundColor="#ffffff";
    hamburger_dropdown11.style.borderLeft="none";
});
hamburger_dropdown12.addEventListener("mouseout",()=>{
    hamburger_dropdown12.style.backgroundColor="#ffffff";
    hamburger_dropdown12.style.borderLeft="none";
});
let hamburger=document.querySelector(".hamburger_dropdown");
hamburger.addEventListener("mouseover",()=>{
    hideSecondDiv();
});
let hideSecondDiv=()=>{
    let second_div=document.querySelector(".second");
    second_div.style.display="none";
}
let appendSubcat1=()=>{
    let container=document.querySelector(".second");
    container.innerHTML=null;
    let subcategory=document.createElement("div");
    subcategory.setAttribute("id","sub_cat_dropdown");
    subcategory.style.width="200px";
    let first_div=document.createElement("div");
    let h1=document.createElement("h3");
    h1.innerText="EU Warehouse";
    let p1=document.createElement("p");
    p1.innerText="EU Deals";
    first_div.append(h1,p1);
    first_div.style.marginBottom="20px";
    let second_div=document.createElement("div");
    let h2=document.createElement("h3");
    h2.innerText="DE Warehouse";
    let p2=document.createElement("p");
    p2.innerText="DE Deals";
    second_div.append(h2,p2);
    second_div.style.marginBottom="20px";
    let third_div=document.createElement("div");
    let h3=document.createElement("h3");
    h3.innerText="PL Warehouse";
    let p3=document.createElement("p");
    p3.innerText="PL Deals";
    third_div.append(h3,p3);
    third_div.style.marginBottom="20px";
    let fourth_div=document.createElement("div");
    let h4=document.createElement("h3");
    h4.innerText="ES Warehouse";
    let p4=document.createElement("p");
    p4.innerText="ES Deals";
    fourth_div.append(h4,p4);
    fourth_div.style.marginBottom="20px";
    let fifth_div=document.createElement("div");
    let h5=document.createElement("h3");
    h5.innerText="IT Warehouse";
    let p5=document.createElement("p");
    p5.innerText="IT Deals";
    fifth_div.append(h5,p5);
    fifth_div.style.marginBottom="20px";
    let sixth_div=document.createElement("div");
    let h6=document.createElement("h3");
    h6.innerText="CZ Warehouse";
    sixth_div.append(h6);
    sixth_div.style.marginBottom="20px";
    let seventh_div=document.createElement("div");
    let h7=document.createElement("h3");
    h7.innerText="EU-3 Warehouse";
    seventh_div.append(h7);
    seventh_div.style.marginBottom="20px";
    let eighth_div=document.createElement("div");
    let h8=document.createElement("h3");
    h8.innerText="UK Warehouse";
    let p8=document.createElement("p");
    p8.innerText="UK Deals";
    eighth_div.append(h8,p8);
    eighth_div.style.marginBottom="20px";
    subcategory.append(first_div,second_div,third_div,fourth_div,fifth_div,sixth_div,seventh_div,eighth_div);
    subcategory.style.fontFamily="Arial,Helvetica,sans-serif";
    let subcategory2=document.createElement("div");
    subcategory2.setAttribute("id","sub_cat_dropdown");
    subcategory2.style.width="200px";
    let ninth_div=document.createElement("div");
    let h9=document.createElement("h3");
    h9.innerText="US Warehouse";
    let p9=document.createElement("p");
    p9.innerText="US Deals";
    ninth_div.append(h9,p9);
    ninth_div.style.marginBottom="20px";
    subcategory2.append(ninth_div);
    let dropdown_div=document.createElement("div");
    dropdown_div.setAttribute("id","image_dropdown");
    let dropdown_img=document.createElement("img");
    dropdown_img.src="./images/warehouse_img.png";
    dropdown_div.style.margin="60px 0px 0px 10px";
    dropdown_div.append(dropdown_img);
    container.append(subcategory,subcategory2,dropdown_div);
};
//Hamburger Dropdown ends here.
</script>