Scribd
Importer
67 vues30 pages

1 Codes

Le document contient le code HTML et CSS pour créer une page d'accueil et une page de shopping pour un site de cadeaux en ligne. Il inclut la navigation, les catégories de produits et un panier d'achat.

Transféré par

Arellano T. Esguerra
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
67 vues30 pages

1 Codes

Le document contient le code HTML et CSS pour créer une page d'accueil et une page de shopping pour un site de cadeaux en ligne. Il inclut la navigation, les catégories de produits et un panier d'achat.

Transféré par

Arellano T. Esguerra
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

HTML codes: for Home page[FileName:HelloUser.

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">
<title>SuppyBox</title>
<link rel="stylesheet" href="../HomePage/css/HELLO.css">
<script src="https://kit.fontawesome.com/92d70a2fd8.js"
crossorigin="anonymous"></script>
</head>
<body>
<section class="Hello">
<nav>
<a href="HelloUser.html" target="_self"><img
src="./image/OurLogo-removebg-preview.png"></a>
<div class="nav-links">
<ul>
<li><a href="../HomePage/HelloUser.html">HOME</a></li>
</ul>
<a href="HelloUser.html" target="_self"><img
src="./image/SchooLogo.png"></a>
</div>
</nav>
<div class="text-box">
<h1>Categories</h1>
<p>You can choose to any categories to find which you could give
someone a GiftBox</p>
<a
href="https://www.facebook.com/profile.php?id=100093555525249&mibextid
=ZbWKwL" class="hero-btn">Visit our Facebook page</a>
<div class="categories-row">
<div class="categories-col">
<img src="image/Blckpnkpht.jpg">
<div class="name"><h3><a
href="../ShoppingPage/Humm.html">BlackPink</a></h3></div>
</div>
<div class="categories-col">
<img src="image/Men.jpg">
<div class="name"><h3><a
href="../ShoppingPage/Hemm.html">Men</a></h3></div>
</div>
<div class="categories-col">
<img src="image/Women.jpg">
<div class="name"><h3><a
href="../ShoppingPage/Hamm.html">Women</a></h3></div>
</div>
<div class="categories-col">
<img src="image/SwtOv.jpg">
<div class="name"><h3><a
href="../ShoppingPage/Homm.html">Sweetness Overload</a></h3></div>
</div>
</div>
</div>
<script src="kamusta.js"></script>
</section>
</body>
</html>
CSS codes: For Home page
[FileName:HELLO.css]
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.Hello{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(29, 69, 230, 0.7), rgba(155, 24,
142, 0.7));
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 80px;
height: 80px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover:after{
width: 100%;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1{
font-size: 62px;
color: #f44336;
}
.text-box{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.text-box .categories-row{
width: 80%;
margin: auto;
text-align: center;
padding-top: 50px;
}
.categories-row{
display: flex;
justify-content: space-between;
}
.categories-col{
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 100%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.categories-col img{
width: 100%;
}
.name{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.name a{
color: #fff;
text-decoration: none;
font-size: 30px;
}
.name:hover{
background: rgba(113, 32, 128, 0.7);
}
.name h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translate(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.name:hover h3{
bottom: 49%;
opacity: 1;
}

HTML codes for: Blackpink Shopping page [FileName:Humm.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">
<title>SuppyBox</title>
<link rel="stylesheet" href="../ShoppingPage/css/Hey.css">
<script src="https://kit.fontawesome.com/92d70a2fd8.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awes
ome.min.css">
</head>
<body>
<section class="Hello">
<nav>
<a href="HelloUser.html" target="_self"><img
src="./image/OurLogo-removebg-preview.png"></a><a href="HelloUser.html"
target="_self"><img src="./image/SchooLogo.png"></a>
<div class="nav-links">
<ul>
<li><a href="../HomePage/HelloUser.html">HOME</a></li>
</ul>
</div>
</nav>
<div class="header">
<h2 class="category">BLACKPINK IN YOUR AREA</h2>
<div class="cart"><i class="fa-solid fa-cart-shopping"><p
id="count">0</p></i></div>
</div>
<div class="uhmm">
<div class="container">
<div id="root"></div>
<div class="sidebar">
<div class="head"><p>My Cart</p></div>
<div id="cartItem">Your cart is empty</div>
<div class="foot">
<h3>Total</h3>
<h2 id="total">Php 0.00</h2>
</div>
<div class="Adress">
<form action="../ShoppingPage/db.php" method="post">
<input type="text" name="name" placeholder="Enter Name"
required>
<input type="number" name="number" placeholder="Enter
Number" required>
<input type="email" name="name" placeholder="Enter Email"
required>
<textarea cols="24" rows="4" name="address"
placeholder="Enter Address"></textarea>
<button type="submit">Buy Now!</button>
</form>
</div>
</div>
</div>
</div>
<script src="cartadd.js"></script>
</section>
</body>
</html>

CSS codes for: Shopping page


[FileName:Hey.css]

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
font-size: 18px;
align-items: center;
color: goldenrod;
}
.Hello{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(29, 69, 230, 0.7), rgba(155, 24,
142, 0.7));
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 80px;
height: 80px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover:after{
width: 100%;
}

body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header{
height: 80px;
width: 100%;
background-color: goldenrod;
border-radius: 3px;
margin: 30px 0px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}
.cart{
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-radius: 4px;
width: 80px;
}
.fa-solid{
columns: goldenrod;
}
.cart p{
height: 44px;
width: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 44px;
background-color: goldenrod;
color: white;
}
.container{
display: flex;
width: 100%;
margin-bottom: 30px;
}
#root{
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.sidebar{
width: 40%;
border-radius: 5px;
background-color: #eee;
margin-left: 20px;
padding: 15px;
text-align: center;
align-self: flex-start;
}
.head{
background-color: goldenrod;
border-radius: 3px;
height: 40px;
padding: 10px;
margin-bottom: 20px;
color: white;
display: flex;
align-items: center;
}
.foot{
display: flex;
justify-content: space-between;
margin: 20px 0px;
padding: 10px 0px;
border-top: 1px solid #333;
}
.box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 1px solid goldenrod;
border-radius: 5px;
padding: 15px;
}
.img-box{
width: 100%;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.images{
max-width: 110%;
max-height: 110%;
object-fit: cover;
object-position: center;
}
.bottom{
margin-top: 20px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 110px;
}
h2{
font-size: 20px;
color: red;
}
button{
width: 100%;
border: none;
border-radius: 5px;
background-color: goldenrod;
padding: 7px 25px;
cursor: pointer;
color: white;
}
button:hover{
background-color: #333;
}
.cart-item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: white;
border-bottom: 1px solid #aaa;
border-radius: 3px;
margin: 10px 10px;
}
.row-img{
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid goldenrod;
display: flex;
align-items: center;
justify-content: center;
}
.rowimg{
max-width: 43px;
max-height: 43px;
border-radius: 50%;
}
.fa-trash:hover{
cursor: pointer;
color: #333;
}
nav .fa{
display: none;
}
@media(max-width: 700px){
.nav-links ul li a{
font-size: 20px;
}
.nav-links ul li{
display: block;
}
nav .fa{
display: block;
color: #0c0707;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
.header{
height: 40px;
width: 100%;
background-color: #f44336;
border-radius: 3px;
margin: 15px 0px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
}
.cart{
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
border-radius: 2px;
width: 40px;
}
.cart p{
height: 22px;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background-color: goldenrod;
color: #f44336;
}
.container{
display: flex;
width: 100%;
margin-bottom: 30px;
}
#root{
width: 100%;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
}
.sidebar{
width: 60%;
border-radius: 20px;
background-color: #eee;
margin-left: 40px;
padding: 30px;
text-align: center;
align-self: flex-start;
}
.head{
background-color: goldenrod;
border-radius: 3px;
height: 20px;
padding: 5px;
margin-bottom: 10px;
color: whitesmoke;
display: flex;
align-items: center;
}
.foot{
display: flex;
justify-content: space-between;
margin: 10px 0px;
padding: 5px 0px;
border-top: 1px solid #333;
}
.box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 1px solid goldenrod;
border-radius: 3px;
padding: 8px;
}
.img-box{
width: 100%;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.images{
max-width: 120%;
max-height: 120%;
object-fit: cover;
object-position: center;
}
.bottom{
margin-top: 20px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 110px;
}
h2{
font-size: 20px;
color: #333;
}
button{
width: 100%;
border: none;
border-radius: 5px;
background-color: goldenrod;
padding: 7px 25px;
cursor: pointer;
color: white;
}
button:hover{
background-color: #333;
}
}

JavaScript codes for: Blackpink Shopping page [FileName:cartadd.js]

const product = [
{
id: 0,
image: 'BlackPink/pckg1.jpg',
title: 'Package 1',
price: 220,
},
{
id: 1,
image: 'BlackPink/pckg2.jpg',
title: 'Package 2',
price: 220,
},
{
id: 2,
image: 'BlackPink/pckg3.jpg',
title: 'Package 3',
price: 220,
},
{
id: 3,
image: 'BlackPink/pckg4.jpg',
title: 'Package 4',
price: 220,
}
];

const categories = [...new Set(product.map((item)=>


{return item}))]
let i = 0;
document.getElementById('root').innerHTML = categories.map((item)=>
{
var {image, title, price} = item;
return(
`<div class='box'>
<div class='img-box'>
<img class='images' src=${image}></img>
</div>
<div class='bottom'>
<p>${title}</p>
<h2>Php ${price}.00</h2>`+
"<button onclick='addtocart("+(i++)+")'>Add to cart</button>"+
`</div>
</div>`
)
}).join('')
var cart =[];
function addtocart(a){
cart.push({...categories[a]});
displaycart();
}
function delElement(a){
cart.splice(a, 1);
displaycart();
}
function displaycart(a){
let j = 0, total=0;
document.getElementById("count").innerHTML=cart.length;
if(cart.length==0){
document.getElementById('cartItem').innerHTML = "Your cart is empty";
document.getElementById("total").innerHTML = "Php "+0+".00";
}
else{
document.getElementById('cartItem').innerHTML = cart.map((items)=>
{
var {image, title, price} = items;
total=total+price;
document.getElementById("total").innerHTML = "Php "+total+".00";
return(
`<div class='cart-item'>
<div class='row-img'>
<img class='rowimg' src=${image}>
</div>
<p style='font-size:12px;'>${title}</p>
<h2 style='font-size:15px;'>Php ${price}.00</h2>`+
"<i class='fa-solid fa-trash'
onclick='delElement("+(j++)+")'></i></div>"
)
}).join('');
}
}
HTML codes for: Sweetness Overload Shopping page [FileName:Homm.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">
<title>SuppyBox</title>
<link rel="stylesheet" href="../ShoppingPage/css/Hey.css">
<script src="https://kit.fontawesome.com/92d70a2fd8.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awes
ome.min.css">
</head>
<body>
<section class="Hello">
<nav>
<a href="HelloUser.html" target="_self"><img
src="./image/OurLogo-removebg-preview.png"></a><a href="HelloUser.html"
target="_self"><img src="./image/SchooLogo.png"></a>
<div class="nav-links">
<ul>
<li><a href="../HomePage/HelloUser.html">HOME</a></li>
</ul>
</div>
</nav>
<div class="header">
<h2 class="category">Sweetness Overload</h2>
<div class="cart"><i class="fa-solid fa-cart-shopping"><p
id="count">0</p></i></div>
</div>
<div class="uhmm">
<div class="container">
<div id="root"></div>
<div class="sidebar">
<div class="head"><p>My Cart</p></div>
<div id="cartItem">Your cart is empty</div>
<div class="foot">
<h3>Total</h3>
<h2 id="total">Php 0.00</h2>
</div>
<div class="Adress">
<form action="../ShoppingPage/db.php" method="post">
<input type="text" name="name" placeholder="Enter Name"
required>
<input type="number" name="number" placeholder="Enter
Number" required>
<input type="email" name="name" placeholder="Enter Email"
required>
<textarea cols="24" rows="4" name="address"
placeholder="Enter Address"></textarea>
<button type="submit">Buy Now!</button>
</form>
</div>
</div>
</div>
</div>
<script src="../ShoppingPage/Homm.js"></script>
</section>
</body>
</html>
JavaScript codes for: Sweetness Overload Shopping page [FileName:Homm.js]

const product = [
{
id: 0,
image: 'Sweetness/pckg1.jpg',
title: 'Package 1',
price: 150,
},
{
id: 1,
image: 'Sweetness/pckg2.jpg',
title: 'Package 2',
price: 150,
},
{
id: 2,
image: 'Sweetness/pckg3.jpg',
title: 'Package 3',
price: 155,
},
{
id: 3,
image: 'Sweetness/pckg4.jpg',
title: 'Package 4',
price: 155,
},
{
id: 4,
image: 'Sweetness/pckg5.jpg',
title: 'Package 5',
price: 160,
},
{
id: 5,
image: 'Sweetness/pckg6.jpg',
title: 'Package 6',
price: 160,
},
{
id: 6,
image: 'Sweetness/pckg7.jpg',
title: 'Package 7',
price: 160,
}
];
const categories = [...new Set(product.map((item)=>
{return item}))]
let i = 0;
document.getElementById('root').innerHTML = categories.map((item)=>
{
var {image, title, price} = item;
return(
`<div class='box'>
<div class='img-box'>
<img class='images' src=${image}></img>
</div>
<div class='bottom'>
<p>${title}</p>
<h2>Php ${price}.00</h2>`+
"<button onclick='addtocart("+(i++)+")'>Add to cart</button>"+
`</div>
</div>`
)
}).join('')
var cart =[];
function addtocart(a){
cart.push({...categories[a]});
displaycart();
}
function delElement(a){
cart.splice(a, 1);
displaycart();
}
function displaycart(a){
let j = 0, total=0;
document.getElementById("count").innerHTML=cart.length;
if(cart.length==0){
document.getElementById('cartItem').innerHTML = "Your cart is empty";
document.getElementById("total").innerHTML = "Php "+0+".00";
}
else{
document.getElementById('cartItem').innerHTML = cart.map((items)=>
{
var {image, title, price} = items;
total=total+price;
document.getElementById("total").innerHTML = "Php "+total+".00";
return(
`<div class='cart-item'>
<div class='row-img'>
<img class='rowimg' src=${image}>
</div>
<p style='font-size:12px;'>${title}</p>
<h2 style='font-size:15px;'>Php ${price}.00</h2>`+
"<i class='fa-solid fa-trash'
onclick='delElement("+(j++)+")'></i></div>"
)
}).join('');
}
}
HTML codes for: Women Shopping page [FileName:Hamm.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">
<title>SuppyBox</title>
<link rel="stylesheet" href="../ShoppingPage/css/Hey.css">
<script src="https://kit.fontawesome.com/92d70a2fd8.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awes
ome.min.css">
</head>
<body>
<section class="Hello">
<nav>
<a href="HelloUser.html" target="_self"><img
src="./image/OurLogo-removebg-preview.png"></a><a href="HelloUser.html"
target="_self"><img src="./image/SchooLogo.png"></a>
<div class="nav-links">
<ul>
<li><a href="../HomePage/HelloUser.html">HOME</a></li>
</ul>
</div>
</nav>
<div class="header">
<h2 class="category">FOR WOMEN</h2>
<div class="cart"><i class="fa-solid fa-cart-shopping"><p
id="count">0</p></i></div>
</div>
<div class="uhmm">
<div class="container">
<div id="root"></div>
<div class="sidebar">
<div class="head"><p>My Cart</p></div>
<div id="cartItem">Your cart is empty</div>
<div class="foot">
<h3>Total</h3>
<h2 id="total">Php 0.00</h2>
</div>
<div class="Adress">
<form action="../ShoppingPage/db.php" method="post">
<input type="text" name="name" placeholder="Enter Name"
required>
<input type="number" name="number" placeholder="Enter
Number" required>
<input type="email" name="name" placeholder="Enter Email"
required>
<textarea cols="24" rows="4" name="address"
placeholder="Enter Address"></textarea>
<button type="submit">Buy Now!</button>
</form>
</div>
</div>
</div>
</div>
<script src="../ShoppingPage/Hamm.js"></script>
</section>
</body>
</html>
JavaScript codes for: Women Shopping page [FileName:Hamm.js]

const product = [
{
id: 0,
image: 'Women/pckgA.jpg',
title: 'Package A',
price: 230,
},
{
id: 1,
image: 'Women/pckgB.jpg',
title: 'Package B',
price: 230,
},
{
id: 2,
image: 'Women/pckgD.jpg',
title: 'Package D',
price: 230,
},
{
id: 3,
image: 'Women/pckgE.jpg',
title: 'Package E',
price: 230,
},
{
id: 4,
image: 'Women/pckgF.jpg',
title: 'Package F',
price: 230,
},
{
id: 5,
image: 'Women/pckg.jpg',
title: 'Package',
price: 230,
},
{
id: 6,
image: 'Women/pckg1.jpg',
title: 'Package 1',
price: 230,
},
{
id: 7,
image: 'Women/pckg2.jpg',
title: 'Package 2',
price: 230,
},
{
id: 8,
image: 'Women/pckg3.jpg',
title: 'Package 3',
price: 230,
},
{
id: 9,
image: 'Women/pckg4.jpg',
title: 'Package 4',
price: 230,
},
{
id: 10,
image: 'Women/pckg5.jpg',
title: 'Package 5',
price: 230,
},
{
id: 11,
image: 'Women/pckg6.jpg',
title: 'Package 6',
price: 230,
},
{
id: 12,
image: 'Women/pckg7.jpg',
title: 'Package 7',
price: 230,
},
{
id: 13,
image: 'Women/pckg8.jpg',
title: 'Package 8',
price: 230,
},
{
id: 14,
image: 'Women/pckg9.jpg',
title: 'Package 9',
price: 230,
},
{
id: 15,
image: 'Women/pckg10.jpg',
title: 'Package 10',
price: 230,
},
{
id: 16,
image: 'Women/pckg11.jpg',
title: 'Package 11',
price: 230,
},
{
id: 17,
image: 'Women/pckg12.jpg',
title: 'Package 12',
price: 230,
},
{
id: 18,
image: 'Women/pckg14.jpg',
title: 'Package 14',
price: 230,
},
{
id: 19,
image: 'Women/pckg15.jpg',
title: 'Package 15',
price: 230,
},
{
id: 20,
image: 'Women/pckg16.jpg',
title: 'Package 16',
price: 230,
}
];

const categories = [...new Set(product.map((item)=>


{return item}))]
let i = 0;
document.getElementById('root').innerHTML = categories.map((item)=>
{
var {image, title, price} = item;
return(
`<div class='box'>
<div class='img-box'>
<img class='images' src=${image}></img>
</div>
<div class='bottom'>
<p>${title}</p>
<h2>Php ${price}.00</h2>`+
"<button onclick='addtocart("+(i++)+")'>Add to cart</button>"+
`</div>
</div>`
)
}).join('')
var cart =[];
function addtocart(a){
cart.push({...categories[a]});
displaycart();
}
function delElement(a){
cart.splice(a, 1);
displaycart();
}
function displaycart(a){
let j = 0, total=0;
document.getElementById("count").innerHTML=cart.length;
if(cart.length==0){
document.getElementById('cartItem').innerHTML = "Your cart is empty";
document.getElementById("total").innerHTML = "Php "+0+".00";
}
else{
document.getElementById('cartItem').innerHTML = cart.map((items)=>
{
var {image, title, price} = items;
total=total+price;
document.getElementById("total").innerHTML = "Php "+total+".00";
return(
`<div class='cart-item'>
<div class='row-img'>
<img class='rowimg' src=${image}>
</div>
<p style='font-size:12px;'>${title}</p>
<h2 style='font-size:15px;'>Php ${price}.00</h2>`+
"<i class='fa-solid fa-trash'
onclick='delElement("+(j++)+")'></i></div>"
)
}).join('');
}
}
HTML codes for: Men Shopping page [FileName:Hemm.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">
<title>SuppyBox</title>
<link rel="stylesheet" href="../ShoppingPage/css/Hey.css">
<script src="https://kit.fontawesome.com/92d70a2fd8.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awes
ome.min.css">
</head>
<body>
<section class="Hello">
<nav>
<a href="HelloUser.html" target="_self"><img
src="./image/OurLogo-removebg-preview.png"></a><a href="HelloUser.html"
target="_self"><img src="./image/SchooLogo.png"></a>
<div class="nav-links">
<ul>
<li><a href="../HomePage/HelloUser.html">HOME</a></li>
</ul>
</div>
</nav>
<div class="header">
<h2 class="category">FOR MEN</h2>
<div class="cart"><i class="fa-solid fa-cart-shopping"><p
id="count">0</p></i></div>
</div>
<div class="uhmm">
<div class="container">
<div id="root"></div>
<div class="sidebar">
<div class="head"><p>My Cart</p></div>
<div id="cartItem">Your cart is empty</div>
<div class="foot">
<h3>Total</h3>
<h2 id="total">Php 0.00</h2>
</div>
<div class="Adress">
<form action="../ShoppingPage/db.php" method="post">
<input type="text" name="name" placeholder="Enter Name"
required>
<input type="number" name="number" placeholder="Enter
Number" required>
<input type="email" name="name" placeholder="Enter Email"
required>
<textarea cols="24" rows="4" name="address"
placeholder="Enter Address"></textarea>
<button type="submit">Buy Now!</button>
</form>
</div>
</div>
</div>
</div>
<script src="../ShoppingPage/Hemm.js"></script>
</section>
</body>
</html>
JavaScript codes for: Men Shopping page [FileName:Hemm.js]

const product = [
{
id: 0,
image: 'Men/EauDeParfum.jpg',
title: 'EAU DE PARFUM',
price: 230,
},
{
id: 1,
image: 'Men/Pckg1.jpg',
title: 'Package 1',
price: 230,
},
{
id: 2,
image: 'Men/Pckg2.jpg',
title: 'Package 2',
price: 230,
},
{
id: 3,
image: 'Men/Pckg3.jpg',
title: 'Package 3',
price: 230,
},
{
id: 4,
image: 'Men/Pckg4.jpg',
title: 'Package 4',
price: 230,
},
{
id: 5,
image: 'Men/Pckg5.jpg',
title: 'Package 5',
price: 230,
},
{
id: 6,
image: 'Men/Pckg6.jpg',
title: 'Package 6',
price: 230,
},
{
id: 7,
image: 'Men/Pckg7.jpg',
title: 'Package 7',
price: 230,
},
{
id: 8,
image: 'Men/Pckg8.jpg',
title: 'Package 8',
price: 230,
},
{
id: 9,
image: 'Men/Pckg9.jpg',
title: 'Package 9',
price: 230,
},
{
id: 10,
image: 'Men/Pckg10.jpg',
title: 'Package 10',
price: 230,
},
{
id: 11,
image: 'Men/Pckg11.jpg',
title: 'Package 11',
price: 230,
}
];
const categories = [...new Set(product.map((item)=>
{return item}))]
let i = 0;
document.getElementById('root').innerHTML = categories.map((item)=>
{
var {image, title, price} = item;
return(
`<div class='box'>
<div class='img-box'>
<img class='images' src=${image}></img>
</div>
<div class='bottom'>
<p>${title}</p>
<h2>Php ${price}.00</h2>`+
"<button onclick='addtocart("+(i++)+")'>Add to cart</button>"+
`</div>
</div>`
)
}).join('')
var cart =[];
function addtocart(a){
cart.push({...categories[a]});
displaycart();
}
function delElement(a){
cart.splice(a, 1);
displaycart();
}
function displaycart(a){
let j = 0, total=0;
document.getElementById("count").innerHTML=cart.length;
if(cart.length==0){
document.getElementById('cartItem').innerHTML = "Your cart is empty";
document.getElementById("total").innerHTML = "Php "+0+".00";
}
else{
document.getElementById('cartItem').innerHTML = cart.map((items)=>
{
var {image, title, price} = items;
total=total+price;
document.getElementById("total").innerHTML = "Php "+total+".00";
return(
`<div class='cart-item'>
<div class='row-img'>
<img class='rowimg' src=${image}>
</div>
<p style='font-size:12px;'>${title}</p>
<h2 style='font-size:15px;'>Php ${price}.00</h2>`+
"<i class='fa-solid fa-trash'
onclick='delElement("+(j++)+")'></i></div>"
)
}).join('');
}
}
PhP codes for: Shopping page [FileName:db.php]
<?php
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$number = $_POST['number'];
$address = $_POST['address'];
$email_from = '[email protected]';
$email_subject = 'New Order Submission';
$email_body = "User Name: $name.\n".
"User Email: $visitor_email.\n".
"User Subject: $subject.\n".
"User Message: $message.\n";
$to = '[email protected]';
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
mail($to,$email_subject,$email_body,$headers);
?>

Vous aimerez peut-être aussi