amazon_clone
Accounts & Lists
Today's Deals
Customer Service
Registory
Gift Cards
Sells
Welcome to GENERAL MERCHANT. You can also shop GENERAL MERCHANT for millions
of great household products with fast local delivery. Click
here to go to amazon.com
About us
About Us
Devoloper & Designer
Amazon clone is a Professional clone of an e commerce website Platform. Here we will only provide you with interesting content that you will enjoy very much. We are committed to providing you the best of clone of an e commerce website, with a focus on reliability and e commerce. We strive to turn our passion for clone of an e commerce website into a thriving website. We hope you enjoy our clone of an e commerce website as much as we enjoy giving them to you.
Our team here consisting of Yuvraj Kasaudhan Baniya, Rudransh Shukla, Naitik Singh and Shivansh Singh will be at your disposal.
Thank you For Visiting Our Site
THANKS
let label = document.getElementById("label")
let shoppingCart = document.getElementById("shopping-cart")
let basket = JSON.parse(localStorage.getItem("data")) || [];
let calculation = () => {
let cartIcon = document.getElementById("cart-amount");
cartIcon.innerHTML = basket.map((x) => x.item).reduce((x, y) => x + y, 0);
}
calculation();
let generateCartItems = () => {
if (basket.length !== 0) {
return (shoppingCart.innerHTML = basket.map((x)=>{
console.log(x);
let { id, item } = x
let search= shopItemsData.find((y) => y.id === id) || []
return`
`
}).join(""))
} else{
shoppingCart.innerHTML =``;
label.innerHTML =`
Cart is Empty
Back to Home
`;
}
}
generateCartItems()
let shopItemsData = [
{
id: "bfibf",
name: "s24 ultra",
price: 119999,
desc: "lorem ipsum dlor sit ametconsectetur adipisicing",
img: "s24ultra.webp"
},
{
id: "yugfare",
name: "traxass xmaxx",
price: 79999,
desc: "lorem ipsum dlor sit ametconsectetur adipisicing",
img: "xmaxx.png"
},
{
id: "vekafg",
name: "hypergo 4WD",
price: 15999,
desc: "lorem ipsum dlor sit ametconsectetur adipisicing",
img: "hypergo.webp"
},
{
id: "ugsvseg",
name: "Mansory Cabinate",
price: 18999,
desc: "lorem ipsum dlor sit ametconsectetur adipisicing",
img: "cabinate.webp"
},
];
let shop = document.getElementById("shop");
let basket = JSON.parse(localStorage.getItem("data")) || [];
let generateShop = () => {
return (shop.innerHTML = shopItemsData.map((x) => {
let { id, name, price, desc, img } = x;
let search = basket.find((x) => x.id === id) || []
return `
`
})
.join(""));
};
generateShop();
let increment = (id) => {
let selectedItem = id
let search = basket.find((x) => x.id === selectedItem.id);
if (search === undefined) {
basket.push({
id: selectedItem.id,
item: 1,
})
}
else {
search.item += 1;
}
localStorage.setItem("data", JSON.stringify(basket))
update(selectedItem.id);
};
let decrement = (id) => {
let selectedItem = id;
let search = basket.find((x) => x.id === selectedItem.id);
if(search === undefined)return;
else if (search.item === 0) return;
else {
search.item -= 1;
}
update(selectedItem.id)
basket = basket.filter((x) => x.item !== 0);
localStorage.setItem("data", JSON.stringify(basket));
};
let update = (id) => {
let search = basket.find((x) => x.id === id);
console.log(search.item);
document.getElementById(id).innerHTML = search.item;
calculation()
};
let calculation = () => {
let cartIcon = document.getElementById("cart-amount");
cartIcon.innerHTML = basket.map((x) => x.item).reduce((x, y) => x + y, 0)
}
calculation();
signup page
* {
margin: 0;
font-family: Arial;
border: border-box;
}
.navbar {
height: 60px;
background-color: #0f1111;
color: white;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.whatsapp-link {
color: #ffffff;
font-size: 0.85rem;
}
.nav-logo {
height: 50px;
width: 100px;
}
.logo {
background-image: url("amazon_logo.png");
height: 50px;
width: 100%;
background-size: cover;
}
.border {
border: 1.5px solid transparent;
}
.border:hover {
border: 1.5px solid aliceblue;
}
/** box 2 **/
.add-first {
color: #cccccc;
font-size: 0.85rem;
margin-left: 15px;
}
.add-second {
font-size: 1rem;
margin-left: 3px;
}
.add-icon {
display: flex;
align-items: center;
}
/* box 3 */
.nav-search {
display: flex;
justify-content: space-evenly;
background-color: pink;
width: 620px;
height: 40px;
border-radius: 4.5px;
}
.search-select {
background-color: #f3f3f3;
width: 50px;
text-align: center;
border-top-left-radius: 4.5px;
border-bottom-left-radius: 4.5px;
border: none;
}
.signup-link {
color: white
}
.search-input {
width: 100%;
font-size: 1rem;
border: none;
}
.search-icon {
width: 45px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
background-color: #febd68;
border-top-right-radius: 4.5px;
border-bottom-right-radius: 4.5px;
color: #0f1111;
}
.nav-search:hover {
border: 2px solid #febd68;
}
/* box four */
span {
font-size: 0.7rem;
}
.nav-second {
font-size: 0.85rem;
font-weight: 700;
}
/* box 5 */
.nav-cart i {
font-size: 30px;
}
.nav-cart {
font-size: 0.85rem;
font-weight: 700;
}
/* panel */
.panel {
height: 40px;
background-color: #222f3d;
color: #cccccc;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.panel-ops p {
display: inline;
margin-left: 15px;
}
.panel-ops {
width: 70%;
font-size: 0.85rem;
}
.panel-deals {
font-size: 0.95rem;
font-weight: 700;
}
/* hero section */
.hero-section {
background-image: url("hero_image.jpg");
height: 350px;
background-size: cover;
display: flex;
justify-content: center;
align-items: flex-end;
}
.hero-msg {
background-color: #ffffff;
color: #000;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
width: 98%;
margin-bottom: 25px;
}
.hero-msg a {
color: #007185;
}
/** shopsection**/
.shop-section {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: #e2e7e6;
}
/**foter**/
.footer {
margin-top: 15px;
}
.foot-panel1 {
background-color: #37475a;
color: white;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.75rem;
}
.foot-panel2 {
background-color: #222f3d;
color: white;
height: 500px;
display: flex;
justify-content: space-evenly;
}
ul {
margin-top: 20px;
}
ul a {
display: block;
font-size: 0.85rem;
margin-top: 10px;
color: #DDDDDD;
}
a:hover {
text-decoration: underline;
}
a {
text-decoration: none;
}
.foot-panel3 {
background-color: #222f3d;
color: white;
border-top: 0.05px solid white;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
background-image: url("amazon_logo.png");
height: 50px;
width: 100px;
background-size: cover;
}
.aboutus-link {
color: #fff;
}
.cart-amount {
font-size: 16px;
/* background-color: #febd68; */
position: absolute;
top: -15px;
right: -10px;
color: #fff;
}
.nav-cart {
position: relative;
}
.shop{
display: grid;
grid-template-columns: repeat(4, 223px);
justify-content: center;
align-items: center;
gap: 80px;
margin-bottom: 30px;
}
@media(max-width:1000px){
.shop{
grid-template-columns: repeat(2, 223px);
}
}
@media(max-width:500px){
.shop{
grid-template-columns: repeat(1, 223px);
}
}
.item{
/* border:2px solid #133d35 ; */
background-color: #ffffff;
border-radius:5px ;
margin-top: 30px;
}
.details{
display: flex;
flex-direction: column;
padding: 10px;
gap: 10px;
}
.price-quantity{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.buttons{
display: flex;
flex-direction: row;
gap: 8px;
font-size: 18px;
}
.fa-minus{
color: #febd68;
}
.fa-plus{
color: #37475a;
}
.shop img{
width: 220px;
height: 230px;
}
i{
cursor: pointer;
}
.cart-anchor{
text-decoration: none;
color: #fff;
}
/**
* ! style rules for label and button
**/
.text-center{
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
}
.home-btn{
background-color: #222f3d;
color: white;
border: none;
padding: 6px;
border-radius: 3px;
cursor: pointer;
margin-top: 10px;
}
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
* {
margin: 0;
font-family: Arial;
box-sizing: border-box;
}
body {
font-family: 'Lato', 'sans-serif';
}
.outer-box {
width: 100vw;
height: 100vh;
background: linear-gradient(to top left, #3ed8ff, #a8f5ff);
}
.inner-box {
width: 400px;
margin: 0 auto;
position: relative;
top: 40%;
transform: translateY(-50%);
padding: 20px 40px;
/* background-color: #ffffff09; */
background: linear-gradient(to top left, #ffffffff, #ffffff33);
backdrop-filter: blur(16px);
border-radius: 8px;
box-shadow: 12px 12px 15px #094a76;
z-index: 2;
}
.signup-header h1 {
font-size: 3rem;
color: #212121;
}
.signup-header p {
font-size: 0.9rem;
color: #555;
}
.signup-body {
margin: 20px 0px0;
}
.signup-body p {
margin: 10px 0px;
}
.signup-body p label {
display: block;
font-weight: bold;
}
.signup-body p input {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 1rem;
margin-top: 4px;
}
.signup-body p input[type="submit"] {
background-color: #3498db;
border: none;
color: white;
cursor: pointer;
}
.signup-body p input[type="submit"]:hover {
background-color: #2773a5;
}
.signup-footer p {
color: #555;
text-align: center;
}
.signup-footer p a {
color: #2773a5;
text-decoration: none;
}
.signup-footer p a:hover{
text-decoration: underline;
}
.circle{
width: 200px;
height: 200px;
border-radius: 100px;
background: linear-gradient(to top right, #ffffff33, #ffffffff);
position: absolute;
}
.c1{
top: 100px;
left: 40px;
}
.c2{
bottom: 100px;
right: 50px;
}
Comments