Lo que sucede es que cada vez que le doy click en el boton se genera una nueva tarjeta pero esta sale multiplicada por el numero de veces que le presione supongo que ha de ser el error dentro del array Push pero la verdad no se como solucionarlo, anteriormente el push se partia individualmente lo que ocacionaba una tarjeta por cada dato pero converti en un objeto y ahora es una tarjeta por el doble de clicks que le de al boton de generación, caso tal que como muestro en el codigo { Ejecutar } es lo que sucede al momento de clickearle,
si hay alguien que pueda ayudarme le agradeceria demasiado.
let main = document.querySelector("body")
let accommodation = document.getElementById("alojamientoInpt");
let date = document.getElementById("fecha");
let product= document.getElementById("productoInpt");
let amount = document.getElementById("cantidadInpt");
let desc = document.getElementById("desc");
let btn = document.getElementById("submitBtn");
let cards = document.getElementById("CardsContainer");
const inputsInfo = [];
const dateToday = new Date();
const dateInfo = dateToday.getMonth() + 1 + "/" + dateToday.getDate() + "/" + dateToday.getFullYear()
date.value = dateInfo;
function changeToNumber() {
Number(amount.value);
console.log(amount.value);
}
btn.addEventListener("click", ()=>{
inputsInfo.push({
title: accommodation.value,
product: product.value,
date: dateInfo,
amount: amount.value,
desc: desc.value
})
inputsInfo.forEach(()=>{
cards.innerHTML += `<div class="card">
<em>Alojamiento:</em>
<h2 class="title-card">${accommodation.value}</h2>
<em>fecha: <span class="date-card_span">${dateInfo}</span></em>
<h3 class="product-nameh3">${product.value}</h3>
<em>cantidad: <span class="product-card_span">${amount.value}</span></em>
<br>
<em>Nota:</em>
<p class="especific-card">${desc.value}</p>
</div>`
})
});
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
*{
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
/* Colors */
--body-color: #E4E9F7;
--sidebar-color: #FFF;
--primary-color: #0fd371;
--primary-color-light: #F6F5FF;
--toggle-color: #DDD;
--text-color: #707070;
/* Transitions */
--tran-02: all 0.2s ease;
--tran-03: all 0.3s ease;
--tran-04: all 0.4s ease;
--tran-05: all 0.5s ease;
}
body{
height: 100vh;
background: var(--body-color);
transition: var(--tran-04);
color: var(--text-color);
}
body.dark{
--body-color: #18191A;
--sidebar-color: #242526;
--primary-color: #3A3B3C;
--primary-color-light: #3A3B3C;
--toggle-color: #DDD;
--text-color: white;
}
body.dark li .icon,
.sidebar li .text:hover{
color: white;
transition: var(--tran-02);
}
/* -- Resuable css -- */
.sidebar .text {
font-size: 20px;
font-weight: 500;
color: var(--text-color);
}
/* -- Siderbar -- */
.sidebar header{
position: relative;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 250px;
padding: 10px 14px;
background: var(--sidebar-color);
}
.sidebar li{
height: 50px;
margin-top: 10px;
list-style: none;
display: flex;
align-items: center ;
}
.sidebar li .icon{
display: flex;
align-items: center ;
justify-content: center;
font-size: 20px;
min-width: 60px;
}
.sidebar li .icon,
.sidebar li .text{
color: var(--text-color);
transition: var(--tran-02);
}
.sidebar .image-text img{
width: 70px;
border-radius: 6px;
}
.sidebar header .image-text{
display: flex;
align-items: center;
}
eader .image-text .header-text {
display: flex;
flex-direction: column;
}
.header-text .name {
font-weight: 600;
}
.header-text .profession{
margin-top: -2px;
}
.sidebar header .toggle{
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
height: 25px;
width: 25px;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.sidebar .search-box{
background-color: var(--primary-color-light);
border-radius: 15px;
}
.search-box input{
height: 100%;
width: 100%;
outline: none;
border: none;
background: var(--primary-color-light);
}
.sidebar li a{
height: 100%;
width: 100%;
display: flex;
align-items: center;
text-decoration: none;
border-radius: 15px;
transition: var(--tran-04);
}
.sidebar li a:hover{
background: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
color: var(--sidebar-color);
}
.sidebar .menu-bar{
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-bar .mode{
background: var(--primary-color-light);
border-radius: 15px;
}
.menu-bar .mode .moon-sun{
height: 50px;
width: 60px;
display: flex;
align-items: center;
}
.menu-bar .mode i{
position: absolute;
}
.menu-bar .mode i.sun{
opacity: 0;
}
.menu-bar .mode .toggle-switch{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-width: 60px;
cursor: pointer;
}
.toggle-switch .switch{
position: relative;
height: 22px;
width: 44px;
border-radius: 25px;
background: var(--toggle-color);
}
.switch::before{
content: '';
position: absolute;
height: 15px;
width: 15px;
border-radius: 50%;
top: 50%;
left: 5px;
transform: translateY(-50%);
background: var(--sidebar-color);
transition: var(--tran-03);
}
body.dark .switch::before{
left: 25px;
}
nav{
margin: 0 1250px 0 0;
}
.Dashboard-container{
margin: 40px 0 0 300px;
}
.Dashboard-container::before{
color: white;
}
.pedido_form{
text-align: center;
margin: 0 0 150px 0;
}
.inpt {
width: 260px;
height: 30px;
margin: 10px;
padding: 0 15px 0 15px;
border-style: solid;
border-color: #3ad8ff;
border-radius: 5px;
color: black;
outline: none;
}
.inpt.dark{
color: #00181a;
}
.inpt::placeholder {
color: white;
opacity: 1;
}
.btn {
width: 250px;
height: 30px;
border-radius: 5px;
border: none;
outline: none;
background-color: #00181a;
color: white;
cursor: pointer;
}
button {
outline: none;
margin: 5px;
}
.cards-Container{
width: 98%;
height: 60vh;
background-color: #ffffff;
border-style: solid;
border-color: #3ad8ff;
border-radius: 5px;
padding: 20px;
}
.card{
max-width: 300px;
height: auto;
padding: 15px;
margin: 15px;
background-color: #010211;
text-align: center;
color: white;
border-radius: 5px;
}
<section class="Dashboard-container">
<h2>Creación de pedidos</h2>
<br>
<div class="pedido_form">
<label for="alojamientoInpt"><h3>Alojamiento</h3></label>
<input type="text" name="alojamientoInpt" id="alojamientoInpt" class="inpt">
<label for="date"><h3>Fecha ( Automatica )</h3></label>
<input type="date" name="date" id="fecha" required class="inpt" readonly value="">
<label for="producto"><h3>Producto</h3></label>
<input type="text" name="producto" id="productoInpt" required class="inpt">
<label for="cantidad"><h3>Cantidad</h3></label>
<input type="number" name="cantidad" id="cantidadInpt" required class="inpt">
<br>
<label for="especificaciones"><h3>Especificaciones ( Opcional )</h3></label>
<br>
<textarea name="especificaciones" id="desc" cols="30" rows="10" class="inpt"></textarea>
<br>
<button type="submit" class="btn" id="submitBtn"><h3>Enviar</h3></button>
</div>
<h2>Pedidos</h2>
<br>
<div class="cards-Container" id="CardsContainer">
+
en elcard =
dejándolo así:card +=
(y debes inicializar la variable fuera del bucle con unlet card = ''
por ejemplo).