Skip to content

Commit

Permalink
Fixed and added functions
Browse files Browse the repository at this point in the history
  • Loading branch information
alimusa17 committed Jan 19, 2024
1 parent a72ef3d commit 5e5682a
Show file tree
Hide file tree
Showing 8 changed files with 216 additions and 212 deletions.
5 changes: 5 additions & 0 deletions css/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@ button {
border: none;
}

button:disabled {
opacity: 0.4 !important;
cursor: no-drop;
}

.btn {
display: inline-block;
padding: 0 25px;
Expand Down
4 changes: 2 additions & 2 deletions css/layout/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ header .menu-dropdown-content a:hover {
transition: .5s ease all;
}

.header-centre .bi-x-circle {
.header-center .bi-x-circle {
display: inline-block;
position: absolute;
top: 15px;
Expand All @@ -242,7 +242,7 @@ header .menu-dropdown-content a:hover {
cursor: pointer;
}

.header-center .menu-lis {
.header-center .menu-list {
flex-direction: column;
padding: 50px 75px;
}
Expand Down
196 changes: 4 additions & 192 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -364,196 +364,7 @@ <h2>Featured Products</h2>
</div>
<div class="product-wrapper product-carousel">
<div class="glide__track" data-glide-el="track">
<ul class="product-list glide__slides">
<li class="product-item glide__slide">
<div class="product-image">
<a href="#">
<img src="img/products/product1/1.png" alt="" class="img1">
<img src="img/products/product1/2.png" alt="" class="img2">
</a>
</div>
<div class="product-info">
<a href="$" class="product-title">Analogue Resin Strap</a>
<ul class="product-star">
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-half"></i>
</li>
</ul>
<div class="product-prices">
<strong class="new-price">$105.00</strong>
<span class="old-price">$150.00</span>
</div>
<span class="product-discount">-30%</span>
<div class="product-links">
<button>
<i class="bi bi-basket-fill"></i>
</button>
<button>
<i class="bi bi-heart-fill"></i>
</button>
<a href="#">
<i class="bi bi-eye-fill"></i>
</a>
<a href="#">
<i class="bi bi-share-fill"></i>
</a>
</div>
</div>
</li>
<li class="product-item glide__slide">
<div class="product-image">
<a href="#">
<img src="img/products/product2/1.png" alt="" class="img1">
<img src="img/products/product2/2.png" alt="" class="img2">
</a>
</div>
<div class="product-info">
<a href="$" class="product-title">Analogue Resin Strap</a>
<ul class="product-star">
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-half"></i>
</li>
</ul>
<div class="product-prices">
<strong class="new-price">$105.00</strong>
<span class="old-price">$150.00</span>
</div>
<span class="product-discount">-30%</span>
<div class="product-links">
<button>
<i class="bi bi-basket-fill"></i>
</button>
<button>
<i class="bi bi-heart-fill"></i>
</button>
<a href="#">
<i class="bi bi-eye-fill"></i>
</a>
<a href="#">
<i class="bi bi-share-fill"></i>
</a>
</div>
</div>
</li>
<li class="product-item glide__slide">
<div class="product-image">
<a href="#">
<img src="img/products/product3/1.png" alt="" class="img1">
<img src="img/products/product3/2.png" alt="" class="img2">
</a>
</div>
<div class="product-info">
<a href="$" class="product-title">Analogue Resin Strap</a>
<ul class="product-star">
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-half"></i>
</li>
</ul>
<div class="product-prices">
<strong class="new-price">$105.00</strong>
<span class="old-price">$150.00</span>
</div>
<span class="product-discount">-30%</span>
<div class="product-links">
<button>
<i class="bi bi-basket-fill"></i>
</button>
<button>
<i class="bi bi-heart-fill"></i>
</button>
<a href="#">
<i class="bi bi-eye-fill"></i>
</a>
<a href="#">
<i class="bi bi-share-fill"></i>
</a>
</div>
</div>
</li>
<li class="product-item">
<div class="product-image">
<a href="#">
<img src="img/products/product4/1.png" alt="" class="img1">
<img src="img/products/product4/2.png" alt="" class="img2">
</a>
</div>
<div class="product-info">
<a href="$" class="product-title">Analogue Resin Strap</a>
<ul class="product-star">
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-fill"></i>
</li>
<li>
<i class="bi bi-star-half"></i>
</li>
</ul>
<div class="product-prices">
<strong class="new-price">$105.00</strong>
<span class="old-price">$150.00</span>
</div>
<span class="product-discount">-30%</span>
<div class="product-links">
<button>
<i class="bi bi-basket-fill"></i>
</button>
<button>
<i class="bi bi-heart-fill"></i>
</button>
<a href="#">
<i class="bi bi-eye-fill"></i>
</a>
<a href="#">
<i class="bi bi-share-fill"></i>
</a>
</div>
</div>
</li>
</ul>
<ul class="product-list glide__slides" id="product-list"></ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
Expand Down Expand Up @@ -1176,9 +987,10 @@ <h4>Categories</h4>
</footer>
<!--! footer end -->

<script src="js/index.js"></script>
<script src="js/main.js" type="module"></script>
<script src="js/slider.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
<script src="js/glide.js"></script>
<script src="js/glide.js" type="module"></script>
</body>

</html>
38 changes: 20 additions & 18 deletions js/glide.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
const config = {
type: "carousel",
perView: 4,
gap: 20,
/* autoplay: 3000, */
breakpoints: {
992:{
perView: 3,
},
768:{
perView: 2,
},
576:{
perView: 1,
export function product1(){
const config = {
type: "carousel",
perView: 4,
gap: 20,
/* autoplay: 3000, */
breakpoints: {
992:{
perView: 3,
},
768:{
perView: 2,
},
576:{
perView: 1,
},
},
},
};

new Glide(".product-carousel", config).mount();
};
new Glide(".product-carousel", config).mount();
}

const config2 = {
type: "carousel",
Expand Down
66 changes: 66 additions & 0 deletions js/header.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
function sidebarFunc() {
//! home sidebar start
const btnOpenSidebar = document.querySelector("#btn-menu");
const sidebar = document.querySelector("#sidebar");
const btnCloseSidebar = document.querySelector("#close-sidebar");
btnOpenSidebar.addEventListener("click", function () {
sidebar.style.left = "0";
});

btnCloseSidebar.addEventListener("click", function () {
sidebar.style.left = "-100%";
});

/* click outside start */
document.addEventListener("click", function (event) {
if (
!event.composedPath().includes(sidebar) &&
!event.composedPath().includes(btnOpenSidebar)
) {
sidebar.style.left = "-100%";
}
});
/* click outside end */

//! home sidebar end
}

function searchModalFunc() {
//! search modal start
const btnOpenSearch = document.querySelector(".search-button");
const btnCloseSearch = document.getElementById("close-search");
const modalSearch = document.getElementsByClassName("modal-search");
const modalSearchWrapper = document.getElementsByClassName("modal-wrapper");

btnOpenSearch.addEventListener("click", function () {
modalSearch[0].style.visibility = "visible";
modalSearch[0].style.opacity = "1";
});

btnCloseSearch.addEventListener("click", function () {
modalSearch[0].style.visibility = "hidden";
modalSearch[0].style.opacity = "0";
});

/* click outside start */
document.addEventListener("click", function (e) {
if (
!e.composedPath().includes(modalSearchWrapper[0]) &&
!e.composedPath().includes(btnOpenSearch)
) {
modalSearch[0].style.visibility = "hidden";
modalSearch[0].style.opacity = "0";
}
});

/* click outside end */

//! search modal end
}

function headerFunc(){
sidebarFunc();
searchModalFunc();
}

export default headerFunc();
14 changes: 14 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import headerFunc from "./header.js";
import productsFunc from "./products.js";

//! add product to localStorage
async function getData() {
const photos = await fetch("../../js/data.json"); /* !!!!!!!!!! */
const data = await photos.json();

data ? localStorage.setItem("products", JSON.stringify(data)) : [];
}

getData();

const products = localStorage.getItem("products");
Loading

0 comments on commit 5e5682a

Please sign in to comment.