How to fix: Input not working / Problem with Shopping-Cart

Question

I am creating a website for an online shop for the first time, but I'm having some problems with the output of my cart. There's two main problems, the first one being that when I add the same item two times it creates another object in the shopping list, instead of just doubling the price and keeping the cart neat and clean. The second one is that I added an input in the cart so that the user can modify how many of that clothing they want, but the price is not updating as the quantity goes up!

I'm sorry for inserting the whole code, but as I'm not a native english speaker it's hard to explain myself so you can take a look at whatever you need!

 window.onload = function () { var baseDeDatos = [ { id: 1, nombre: 'Trim', precio: 1399, categoria: 'Buzo', img: 'img/1.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 2, nombre: 'Rainbow', precio: 990, categoria: 'Buzo', img: 'img/2.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 3, nombre: 'White', precio: 948, categoria: 'Buzo', img: 'img/3.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 4, nombre: 'Cycle', precio: 550, categoria: 'Buzo', img: 'img/4.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 5, nombre: 'Cellie', precio: 590, categoria: 'Buzo', img: 'img/5.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 6, nombre: 'Leo', precio: 2890, categoria: 'Buzo', img: 'img/6.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 7, nombre: 'Today', precio: 499, categoria: 'Buzo', img: 'img/7.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 8, nombre: 'Sky', precio: 499, categoria: 'Buzo', img: 'img/8.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 9, nombre: 'Regan', precio: 590, categoria: 'Buzo', img: 'img/9.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 10, nombre: 'Polly', precio: 1399, categoria: 'Remera', img: 'img/10.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 11, nombre: 'June', precio: 799, categoria: 'Remera', img: 'img/11.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 12, nombre: 'Amy', precio: 1299, categoria: 'Remera', img: 'img/12.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 13, nombre: 'Tai', precio: 648, categoria: 'Top', img: 'img/13.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 14, nombre: 'Judy', precio: 3290, categoria: 'Remera', img: 'img/14.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 15, nombre: 'Grey', precio: 1090, categoria: 'Top', img: 'img/15.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 16, nombre: 'Pinky', precio: 1090, categoria: 'Top', img: 'img/16.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 17, nombre: 'Line', precio: 1090, categoria: 'Top', img: 'img/17.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 18, nombre: 'Line', precio: 1090, categoria: 'Buzo', img: 'img/18.jpg', descripcion: 'Buzo con diseño colorblock neon.' } ] var $items = document.querySelector('#items'); var carrito = []; var total = 0; var $carrito = document.querySelector('#carrito'); var $total = document.querySelector('#total'); var $unidades = document.querySelector('#unidades'); var unidades = 0; function renderItems () { for (var info of baseDeDatos) { var miNodo = document.createElement('div'); miNodo.classList.add('card', 'col-md-6', 'col-lg-4', 'mt-5'); var miNodoCardBody = document.createElement('div'); miNodoCardBody.classList.add('card-body'); var miNodoTitle = document.createElement('h5'); miNodoTitle.classList.add('card-title'); miNodoTitle.textContent = info['nombre'] + ' / ' + info['categoria']; var miNodoImg = document.createElement('img'); miNodoImg.classList.add('card-text', 'img-fluid'); miNodoImg.src = info['img']; var miNodoDesc = document.createElement('p'); miNodoDesc.classList.add('card-text'); miNodoDesc.textContent = info['descripcion']; var miNodoPrecio = document.createElement('h5'); miNodoPrecio.classList.add('card-text'); miNodoPrecio.textContent = '$' +info['precio']; var miNodoBoton = document.createElement('button'); miNodoBoton.classList.add('btn', 'btn-primary'); miNodoBoton.textContent = 'Agregar al carrito'; miNodoBoton.setAttribute('marcador', info['id']); miNodoBoton.addEventListener('click', anyadirCarrito); miNodoCardBody.appendChild(miNodoImg); miNodoCardBody.appendChild(miNodoTitle); miNodoCardBody.appendChild(miNodoDesc); miNodoCardBody.appendChild(miNodoPrecio); miNodoCardBody.appendChild(miNodoBoton); miNodo.appendChild(miNodoCardBody); $items.appendChild(miNodo); } } function anyadirCarrito () { carrito.push(this.getAttribute('marcador')) calcularTotal(); renderizarCarrito(); } function renderizarCarrito () { $carrito.textContent = ''; carrito.forEach(function (item, indice) { var miItem = baseDeDatos.filter(function(itemBaseDatos) { return itemBaseDatos['id'] == item; }); var miNodo = document.createElement('li'); miNodo.classList.add('list-group-item', 'text-right'); miNodo.textContent = `${miItem[0]['nombre']} - $${miItem[0]['precio']} `; var miNodoInput = document.createElement("INPUT"); miNodoInput.setAttribute("type", "number"); miNodoInput.setAttribute("value", "1"); miNodoInput.setAttribute("min", "1"); miNodo.appendChild(miNodoInput); var miBoton = document.createElement('button'); miBoton.classList.add('btn', 'btn-danger', 'mx-5'); miBoton.textContent = 'X'; miBoton.setAttribute('posicion', indice); miBoton.addEventListener('click', borrarItemCarrito); miNodo.appendChild(miBoton); $carrito.appendChild(miNodo); }) } function borrarItemCarrito () { var posicion = this.getAttribute('posicion'); carrito.splice(posicion, 1); renderizarCarrito(); calcularTotal(); } function calcularTotal () { total = 0; for (var item of carrito) { var miItem = baseDeDatos.filter(function(itemBaseDatos) { return itemBaseDatos['id'] == item; }); total = total + miItem[0]['precio']; } var totalDosDecimales = total.toFixed(2); $total.textContent = totalDosDecimales; } renderItems(); } 

 @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700'); @import url("https://fonts.googleapis.com/css?family=Metal+Mania"); @font-face { font-family: "Booter - Zero Zero"; src: url("Fonts/Booter - Zero Zero.woff") format("woff"), url("Fonts/Booter - Zero Zero.woff2") format("woff2"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: Raleway; color: #777; } body{ background-color: #fffbed; } nav{ margin-bottom: 20px; } main{ text-align: center; } ul, li { text-decoration: none; list-style: none; } #logo { background: url(img/LOGO.png); width: 145px; height: 20px; font-size: 0; position: fixed; top: 24px; left: 20px; z-index: 1100; } .botoncarrito{ text-align: center; align-content: center; } .borrar:hover { background-color: #f8051b; opacity: 0.8; transition: 0.5s; } .enviar:hover { background-color: #009AAC; opacity: 0.8; transition: 0.5s; } .boton1{ background-color: #eb7681; } .boton2{ background-color: #78e5c3; } footer{ background-color: #f0ffff; background-size: cover; } #tres{ margin-top: 2em; } .btn-primary { color: white; background-color: #f25656; border: none; border-radius: .3em; font-weight: bold; } .btn-primary:hover { background-color: #5f4141; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>HUSH</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="estilos.css"> <script src="java.js"></script> </head> <body> <header class="container fixed-top "> <h1 id="logo">HUSH - Indumentaria</h1> <div class="row"> <nav class="col navbar fixed-top navbar-expand-md navbar-light bg-light "> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#barra" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="barra"> <ul class="navbar-nav text-center mx-auto px-1"> <li class="nav-item"> <a class="nav-link" href="#uno" data-ancla="true" data-tiempo="800" data-freno="60">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#dos" data-ancla="true" data-tiempo="800" data-freno="60">Productos</a> </li> <li class="nav-item"> <a class="nav-link" href="#tres" data-ancla="true" data-tiempo="800" data-freno="60">Contacto</a> </li> </ul> </div> </nav> </div> </header> <section id="dos"> <div class="container"> <div class="row"> <main id="items" class="col-sm-12 row pt-5 "></main> <aside class=" pl-5 pt-5"> <h2>Carrito</h2> <ul id="carrito" class="list-group"></ul> <hr> <p class="text-right">Total: <span id="total"></span>&dollar;</p> </aside> </div> </div> <div class="botoncarrito"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll-1">Confirmar compra</button></div> <!-- Modal: modalPoll --> <div class="modal fade right" id="modalPoll-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false"> <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document"> <div class="modal-content"> <!--Header--> <div class="modal-header"> <p class="heading lead">Confirmá tu compra </p> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="white-text">×</span> </button> </div> <!--Body--> <div class="modal-body"> <div class="text-center"> <i class="far fa-file-alt fa-4x mb-3 animated rotateIn"></i> <p> <strong>¡Gracias por confiar en nuestra tienda!</strong> </p> <p>Completá estos datos y te contactaremos para concretar tu compra de <strong></strong> productos. </p> </div> <hr> <!-- Radio --> <p class="text-center"> <strong>Metodo de Pago</strong> </p> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked> <label class="form-check-label" for="radio-179">Tarjeta de Crédito</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2"> <label class="form-check-label" for="radio-279">MercadoPago</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3"> <label class="form-check-label" for="radio-379">Pagofácil / Rapipago</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4"> <label class="form-check-label" for="radio-479">Depósito bancario</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5"> <label class="form-check-label" for="radio-579">Efectivo al retirar</label> </div> <!-- Radio --> <p class="text-center"> <strong>Ingresa tu mail para que podamos contactarte:</strong> </p> <!--Basic textarea--> <div class="md-form"> <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea> </div> </div> <!--Footer--> <div class="modal-footer justify-content-center"> <a type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Enviar <i class="fa fa-paper-plane ml-1"></i> </a> <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancelar</a> </div> </div> </div> </div> <!-- Modal: modalPoll --> </section> <section id="tres" class="container"> <div class="row"> <div class="col-md-6 pb-3 my-auto mx-auto"> <h2 class="text-center">Seguinos en nuestras redes</h2> <div class="row pl-2 d-flex justify-content-center align-items-center mr-5"> <div class="col-2 pr-2"> <ul> <li> <a href="https://es-la.facebook.com/" target="_blank"> <img src="img/fb.png" alt="Facebook"> </a> </li> </ul> </div> <div class="col-2 pr-2"> <ul> <li> <a href="https://twitter.com/?lang=es/" target="_blank"> <img src="img/tw.png" alt="Twitter"> </a> </li> </ul> </div> <div class="col-2 pr-2"> <ul> <li> <a href="https://www.instagram.com/?hl=es-la" target="_blank"> <img src="img/ig.png" alt="Instagram"> </a> </li> </ul> </div> </div> </div> </section> <footer class="opacity p-3 text-center" > <p class="bold"> Diseño y Programación web - DMM3A - 2019</p> </footer> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.bundle.js"></script> <script src="js/animaScroll.js"></script> <script src="js/marcaBoton.js"></script> <script src="js/header02.js"></script> <script> $('.nav-item').on('click', function() { $(".navbar-collapse").collapse("hide"); }) </script> </body> </html> 

Answer 1

 window.onload = function () { var addedItems = {} var baseDeDatos = [ { id: 1, nombre: 'Trim', precio: 1399, categoria: 'Buzo', img: 'img/1.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 2, nombre: 'Rainbow', precio: 990, categoria: 'Buzo', img: 'img/2.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 3, nombre: 'White', precio: 948, categoria: 'Buzo', img: 'img/3.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 4, nombre: 'Cycle', precio: 550, categoria: 'Buzo', img: 'img/4.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 5, nombre: 'Cellie', precio: 590, categoria: 'Buzo', img: 'img/5.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 6, nombre: 'Leo', precio: 2890, categoria: 'Buzo', img: 'img/6.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 7, nombre: 'Today', precio: 499, categoria: 'Buzo', img: 'img/7.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 8, nombre: 'Sky', precio: 499, categoria: 'Buzo', img: 'img/8.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 9, nombre: 'Regan', precio: 590, categoria: 'Buzo', img: 'img/9.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 10, nombre: 'Polly', precio: 1399, categoria: 'Remera', img: 'img/10.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 11, nombre: 'June', precio: 799, categoria: 'Remera', img: 'img/11.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 12, nombre: 'Amy', precio: 1299, categoria: 'Remera', img: 'img/12.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 13, nombre: 'Tai', precio: 648, categoria: 'Top', img: 'img/13.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 14, nombre: 'Judy', precio: 3290, categoria: 'Remera', img: 'img/14.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 15, nombre: 'Grey', precio: 1090, categoria: 'Top', img: 'img/15.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 16, nombre: 'Pinky', precio: 1090, categoria: 'Top', img: 'img/16.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 17, nombre: 'Line', precio: 1090, categoria: 'Top', img: 'img/17.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 18, nombre: 'Line', precio: 1090, categoria: 'Buzo', img: 'img/18.jpg', descripcion: 'Buzo con diseño colorblock neon.' } ] var $items = document.querySelector('#items'); var carrito = []; var total = 0; var $carrito = document.querySelector('#carrito'); var $total = document.querySelector('#total'); var $unidades = document.querySelector('#unidades'); var unidades = 0; function renderItems () { for (var info of baseDeDatos) { var miNodo = document.createElement('div'); miNodo.classList.add('card', 'col-md-6', 'col-lg-4', 'mt-5'); var miNodoCardBody = document.createElement('div'); miNodoCardBody.classList.add('card-body'); var miNodoTitle = document.createElement('h5'); miNodoTitle.classList.add('card-title'); miNodoTitle.textContent = info['nombre'] + ' / ' + info['categoria']; var miNodoImg = document.createElement('img'); miNodoImg.classList.add('card-text', 'img-fluid'); miNodoImg.src = info['img']; var miNodoDesc = document.createElement('p'); miNodoDesc.classList.add('card-text'); miNodoDesc.textContent = info['descripcion']; var miNodoPrecio = document.createElement('h5'); miNodoPrecio.classList.add('card-text'); miNodoPrecio.textContent = '$' +info['precio']; var miNodoBoton = document.createElement('button'); miNodoBoton.classList.add('btn', 'btn-primary'); miNodoBoton.textContent = 'Agregar al carrito'; miNodoBoton.setAttribute('marcador', info['id']); miNodoBoton.addEventListener('click', anyadirCarrito); miNodoCardBody.appendChild(miNodoImg); miNodoCardBody.appendChild(miNodoTitle); miNodoCardBody.appendChild(miNodoDesc); miNodoCardBody.appendChild(miNodoPrecio); miNodoCardBody.appendChild(miNodoBoton); miNodo.appendChild(miNodoCardBody); $items.appendChild(miNodo); } } function anyadirCarrito () { var marcador = parseInt(this.getAttribute('marcador')); let index = carrito.findIndex(item => item.marcador == marcador ); if(index > -1) { carrito[index].count += 1; } else { carrito.push({marcador: marcador, count: 1}); } calcularTotal(); renderizarCarrito(); } function renderizarCarrito () { $carrito.textContent = ''; carrito.forEach(function (item, indice) { var miItem = baseDeDatos.filter(function(itemBaseDatos) { return itemBaseDatos['id'] == item.marcador; }); var element = addedItems[miItem[0].nombre.toLowerCase()]; if(element) { var inputElement = element.children[0]; inputElement.value = item.count; $carrito.appendChild(element); } else { var miNodo = document.createElement('li'); miNodo.setAttribute('id', miItem[0].nombre.toLowerCase()) miNodo.classList.add('list-group-item', 'text-right'); miNodo.textContent = `${miItem[0]['nombre']} - $${miItem[0]['precio']} `; var miNodoInput = document.createElement("INPUT"); miNodoInput.setAttribute("type", "number"); miNodoInput.setAttribute("value", "1"); miNodoInput.setAttribute("marcador", item.marcador+''); miNodoInput.setAttribute("min", "1"); miNodoInput.onchange = function(data) { var targetElement = data.target; var marcador = targetElement.getAttribute('marcador'); var index = carrito.findIndex(item => item.marcador == marcador); carrito[index].count = parseInt(targetElement.value); calcularTotal(); } miNodo.appendChild(miNodoInput); var miBoton = document.createElement('button'); miBoton.classList.add('btn', 'btn-danger', 'mx-5'); miBoton.textContent = 'X'; miBoton.setAttribute('posicion', indice); miBoton.addEventListener('click', borrarItemCarrito); miNodo.appendChild(miBoton); addedItems[miItem[0]['nombre'].toLowerCase()] = miNodo; $carrito.appendChild(miNodo); } }) } function borrarItemCarrito () { var posicion = this.getAttribute('posicion'); carrito.splice(posicion, 1); renderizarCarrito(); calcularTotal(); } function calcularTotal () { total = 0; for (var item of carrito) { var miItem = baseDeDatos.filter(function(itemBaseDatos) { return itemBaseDatos['id'] == item.marcador; }); total = total + miItem[0]['precio'] * item.count ; } var totalDosDecimales = total.toFixed(2); $total.textContent = totalDosDecimales; } renderItems(); } 

 @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700'); @import url("https://fonts.googleapis.com/css?family=Metal+Mania"); @font-face { font-family: "Booter - Zero Zero"; src: url("Fonts/Booter - Zero Zero.woff") format("woff"), url("Fonts/Booter - Zero Zero.woff2") format("woff2"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: Raleway; color: #777; } body{ background-color: #fffbed; } nav{ margin-bottom: 20px; } main{ text-align: center; } ul, li { text-decoration: none; list-style: none; } #logo { background: url(img/LOGO.png); width: 145px; height: 20px; font-size: 0; position: fixed; top: 24px; left: 20px; z-index: 1100; } .botoncarrito{ text-align: center; align-content: center; } .borrar:hover { background-color: #f8051b; opacity: 0.8; transition: 0.5s; } .enviar:hover { background-color: #009AAC; opacity: 0.8; transition: 0.5s; } .boton1{ background-color: #eb7681; } .boton2{ background-color: #78e5c3; } footer{ background-color: #f0ffff; background-size: cover; } #tres{ margin-top: 2em; } .btn-primary { color: white; background-color: #f25656; border: none; border-radius: .3em; font-weight: bold; } .btn-primary:hover { background-color: #5f4141; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>HUSH</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="estilos.css"> <script src="java.js"></script> </head> <body> <header class="container fixed-top "> <h1 id="logo">HUSH - Indumentaria</h1> <div class="row"> <nav class="col navbar fixed-top navbar-expand-md navbar-light bg-light "> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#barra" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="barra"> <ul class="navbar-nav text-center mx-auto px-1"> <li class="nav-item"> <a class="nav-link" href="#uno" data-ancla="true" data-tiempo="800" data-freno="60">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#dos" data-ancla="true" data-tiempo="800" data-freno="60">Productos</a> </li> <li class="nav-item"> <a class="nav-link" href="#tres" data-ancla="true" data-tiempo="800" data-freno="60">Contacto</a> </li> </ul> </div> </nav> </div> </header> <section id="dos"> <div class="container"> <div class="row"> <main id="items" class="col-sm-12 row pt-5 "></main> <aside class=" pl-5 pt-5"> <h2>Carrito</h2> <ul id="carrito" class="list-group"></ul> <hr> <p class="text-right">Total: <span id="total"></span>&dollar;</p> </aside> </div> </div> <div class="botoncarrito"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll-1">Confirmar compra</button></div> <!-- Modal: modalPoll --> <div class="modal fade right" id="modalPoll-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false"> <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document"> <div class="modal-content"> <!--Header--> <div class="modal-header"> <p class="heading lead">Confirmá tu compra </p> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="white-text">×</span> </button> </div> <!--Body--> <div class="modal-body"> <div class="text-center"> <i class="far fa-file-alt fa-4x mb-3 animated rotateIn"></i> <p> <strong>¡Gracias por confiar en nuestra tienda!</strong> </p> <p>Completá estos datos y te contactaremos para concretar tu compra de <strong></strong> productos. </p> </div> <hr> <!-- Radio --> <p class="text-center"> <strong>Metodo de Pago</strong> </p> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked> <label class="form-check-label" for="radio-179">Tarjeta de Crédito</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2"> <label class="form-check-label" for="radio-279">MercadoPago</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3"> <label class="form-check-label" for="radio-379">Pagofácil / Rapipago</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4"> <label class="form-check-label" for="radio-479">Depósito bancario</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5"> <label class="form-check-label" for="radio-579">Efectivo al retirar</label> </div> <!-- Radio --> <p class="text-center"> <strong>Ingresa tu mail para que podamos contactarte:</strong> </p> <!--Basic textarea--> <div class="md-form"> <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea> </div> </div> <!--Footer--> <div class="modal-footer justify-content-center"> <a type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Enviar <i class="fa fa-paper-plane ml-1"></i> </a> <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancelar</a> </div> </div> </div> </div> <!-- Modal: modalPoll --> </section> <section id="tres" class="container"> <div class="row"> <div class="col-md-6 pb-3 my-auto mx-auto"> <h2 class="text-center">Seguinos en nuestras redes</h2> <div class="row pl-2 d-flex justify-content-center align-items-center mr-5"> <div class="col-2 pr-2"> <ul> <li> <a href="https://es-la.facebook.com/" target="_blank"> <img src="img/fb.png" alt="Facebook"> </a> </li> </ul> </div> <div class="col-2 pr-2"> <ul> <li> <a href="https://twitter.com/?lang=es/" target="_blank"> <img src="img/tw.png" alt="Twitter"> </a> </li> </ul> </div> <div class="col-2 pr-2"> <ul> <li> <a href="https://www.instagram.com/?hl=es-la" target="_blank"> <img src="img/ig.png" alt="Instagram"> </a> </li> </ul> </div> </div> </div> </section> <footer class="opacity p-3 text-center" > <p class="bold"> Diseño y Programación web - DMM3A - 2019</p> </footer> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.bundle.js"></script> <script src="js/animaScroll.js"></script> <script src="js/marcaBoton.js"></script> <script src="js/header02.js"></script> <script> $('.nav-item').on('click', function() { $(".navbar-collapse").collapse("hide"); }) </script> </body> </html>