I guys! I’m new to coding and I want to create a type of ” add to cart” project. The thing is I don’t know how to incorporate the javascript in it. I have the css, html but the javascript is the hard part and I would like some help. I will leave here the html code and css code associated with it. I just want to press the button add to cart and it adds and summs up the value to a page. Thanks to anyone who could help. Really appreciate it![Add to cart display!
.IMC .area h1{
margin-block-start: 0em;
color: #ffffff;
}
.IMC .input_area h2{
color: #000000;
}
.IMC .input_area{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
input{
height: 1.5em;
}
textarea{
width: 100%;
margin-top: 2em;
}
.IMC .container{
background-color: #1C1C1C;
display: inline-flex;
padding: 1.5em;
border-radius: 0.5em;
flex-direction: column;
align-items: center;
width: 20em;
}
.area{
display: flex;
justify-content: center;
}
button{
height: 2em;
width: 100%;
background-color: #FF9500;
border: none;
color: #f8ff00;
}
button:hover{
cursor: pointer;
}<section class="products" id="products">
<h1 class="heading"> latest <span>products</span> </h1>
<div class="box-container">
<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="ben-u-ron%20500.%203,49.jpg" alt="">
<div class="icons">
<a href="#0" class="fas fa-heart"></a>
<a href="#0" class="cart-btn">add to cart</a>
<a href="#0" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Ben-u-Ron 500mg</h3>
<div class="price"> 3.49€ <span>3.84€</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-15%</span>
<div class="image">
<img src="berocca-performance-30-comprimidos-10.04.jpg" alt="">
<div class="icons">
<a href="#0" class="fas fa-heart"></a>
<a href="#0" class="cart-btn">add to cart</a>
<a href="#0" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Berocca Performance 30 comp.</h3>
<div class="price"> 10.04€<span>11.55€</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-5%</span>
<div class="image">
<img src="parazitol%2039,00.png" alt="">
<div class="icons">
<a href="#0" class="fas fa-heart"></a>
<a href="#0" class="cart-btn">add to cart</a>
<a href="#0" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Parazitol</h3>
<div class="price"> 39.00€ <span>40.56€</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-20%</span>
<div class="image">
<img src="mebocaina-20%20capsulas,%209-75.png" alt="">
<div class="icons">
<a href="#0" class="fas fa-heart"></a>
<a href="#0" class="cart-btn">add to cart</a>
<a href="#0" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Mebocaina 20 cap.</h3>
<div class="price"> 9.75€ <span>11.70€</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-17%</span>
<div class="image">
<img src="WOMAN%20ISDIN%20ANTI-ESTRIAS%202X%20250ML%20PROMO-30,13.jpg" alt="">
<div class="icons">
<a href="#0" class="fas fa-heart"></a>
<a href="#0" class="cart-btn">add to cart</a>
<a href="#0" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Woman Anti Stretch Marks</h3>
<div class="price"> 30.13€ <span>35.25€</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-3%</span>
<div class="image">
<img src="Infla%20vet%2026,99.png" alt="">
<div class="icons">
<a href="#0" class="fas fa-heart"></a>
<a href="#0" class="cart-btn">add to cart</a>
<a href="#0" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Infla Vet</h3>
<div class="price"> 26.99€ <span>27.80€</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-18%</span>
<div class="image">
<img src="OnyCostopProSpray%2036.90.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Costop Pro Spray</h3>
<div class="price"> 26.90€ <span>31.74€</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="brufen%20400mg%206,41.jpg" alt="">
<div class="icons">
<a href="#0" class="fas fa-heart"></a>
<a href="#0" class="cart-btn">add to cart</a>
<a href="#0" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Brufen 400mg</h3>
<div class="price"> 5.76€ <span>6.41€</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-5%</span>
<div class="image">
<img src="NATALBEN%20SUPRA%2030%20CÁPSULAS-15,42.jpg" alt="">
<div class="icons">
<a href="#0" class="fas fa-heart"></a>
<a href="#0" class="cart-btn">add to cart</a>
<a href="#0" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Natalben 20 cap.</h3>
<div class="price"> 15.42€ <span>16.20€</span> </div>
</div>
</div>
</div>
</section>
//Page where I want the info to display! (Note that there are random pictures displaying there with no javascript code attached!
<div class="shopping-cart">
<div class="box">
<i class="fas fa-trash"></i>
<img src="image/cart-img-1.png.jpg" alt="">
<div class="content">
<h3>ben-u-ron 500</h3>
<span class="price">2.40€/-</span>
<span class="quantity">qty : 1</span>
</div>
</div>
<div class="box">
<i class="fas fa-trash"></i>
<img src="image/cart-img-2.png.jpg" alt="">
<div class="content">
<h3>brufen</h3>
<span class="price">6.50€/-</span>
<span class="quantity">qty : 1</span>
</div>
</div>
<div class="box">
<i class="fas fa-trash"></i>
<img src="image/cart-img-3.png.jpg" alt="">
<div class="content">
<h3>mebocaina forte</h3>
<span class="price">7.90€/-</span>
<span class="quantity">qty : 1</span>
</div>
</div>
<div class="total"> total : 16.80€/- </div>
</div>]1
