I'm facing an issue with my code and I'm unsure whether it's related to CSS or JavaScript. Whenever I click the button on my page, my card-container2 moves downward unexpectedly. Here is the snippet of my code:
HTML:
<div class="card-container">
<h1>splitter bill</h1>
<p>enter the name of the person and his amount (21% of iva included):</p>
<label id="name-text">Nombre</label>
<br>
<input type="text" id="name">
<br>
<label id="monto-texto">amount</label>
<br>
<input type="number" id="amount">
<br>
<button id="calculate">Ingresar</button>
<p>Total: <span id="total"></span> </p>
<div id="each-person">
</div>
<p> Cada uno le toca aportar: <span id="split"></span> </p>
</div>
<div class="card-container2">
<div id="clima">
</div>
</div>
JavaScript:
//more js code available upon request
function defineTotal() {
personsListHTMLelemento = "";
let list = "";
let total = 0;
for (let i = 0; i < persons.length; i++) {
total += persons[i].amount
list += `${persons[i].name}: ${persons[i].amount} <br>`;
}
let iva = 1.21
totalHTMLelemento.innerHTML = total * iva;
personsListHTMLelemento.innerHTML = list;
splitHTMLelemento.innerHTML = (total * iva) / persons.length;
CSS:
.card-container {
margin-left: 500px;
margin-right: 500px;
padding-left: 50px;
background-color: #302b63;
border-radius: 20px;
margin-top: 150px;
}
.card-container2 {
margin-left: 1270px;
padding-left: 35px;
background-color: #302b63;
border-radius: 5px;
margin-top: -490px;
}
If you require more CSS/JavaScript code, feel free to ask and I will provide it.