McDocta's v4

mcdocta-s-v4.html

  <div class="container">
    <div class="logo-container">
      <div class="logo">
        <img src="https://pngimage.net/wp-content/uploads/2018/06/png-mcdonalds-8.png">        
      </div>       
      <h1>McDocta's</h1>      
    </div>
    <div class="pedido-container">
      <div class="hamburguesas">
        <div class="dev-mac">
          <h2 class="title">¡Probá nuestra Dev Mac!</h2>
        </div>
        
        <div class="hamburguesa-container">
          <img src="https://image.flaticon.com/icons/svg/1826/1826237.svg" alt="">
        <div>Dev Mac</div>
        <div class="precio">$200</div>
        </div>
        
        <div>¿Cuántas vas a querer?</div>
        <div class="boton-unidades">
          <button class="dec"><img src="data:image/svg+xml;base64,
            PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj48Zz48Zz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNERjI3MDYiIGQ9Ik01MDAuMzY0LDI2Ny42MzZIMTEuNjM2QzUuMjEsMjY3LjYzNiwwLDI2Mi40MjcsMCwyNTZjMC02LjQyNyw1LjIxLTExLjYzNiwxMS42MzYtMTEuNjM2aDQ4OC43MjcgICBjNi40MjcsMCwxMS42MzYsNS4yMSwxMS42MzYsMTEuNjM2QzUxMiwyNjIuNDI3LDUwNi43OSwyNjcuNjM2LDUwMC4zNjQsMjY3LjYzNnoiIGRhdGEtb3JpZ2luYWw9IiM0MjhERkYiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiM0MjhERkYiPjwvcGF0aD4KPC9nPjwvZz4gPC9zdmc+" /></button>
          <input type="number" readonly data-hamburguesas min="1" data-afectatotal="true">
          <button class="inc"><img src="data:image/svg+xml;base64,
            PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBjbGFzcz0iIj48Zz48Zz48Zz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNERjI3MDYiIGQ9Ik0yNTYsNTEyYy0zLjA4NiwwLjAwMS02LjA0Ny0xLjIyNS04LjIyOS0zLjQwN2MtMi4xODItMi4xODItMy40MDgtNS4xNDMtMy40MDctOC4yMjlWMTEuNjM2ICAgQzI0NC4zNjQsNS4yMSwyNDkuNTczLDAsMjU2LDBzMTEuNjM2LDUuMjEsMTEuNjM2LDExLjYzNnY0ODguNzI3YzAuMDAxLDMuMDg2LTEuMjI1LDYuMDQ3LTMuNDA3LDguMjI5ICAgQzI2Mi4wNDcsNTEwLjc3NSwyNTkuMDg2LDUxMi4wMDEsMjU2LDUxMnoiIGRhdGEtb3JpZ2luYWw9IiNERjI3MDYiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiM0MjhERkYiPjwvcGF0aD4KCTxwYXRoIHN0eWxlPSJmaWxsOiNERjI3MDYiIGQ9Ik01MDAuMzY0LDI2Ny42MzZIMTEuNjM2QzUuMjEsMjY3LjYzNiwwLDI2Mi40MjcsMCwyNTZzNS4yMS0xMS42MzYsMTEuNjM2LTExLjYzNmg0ODguNzI3ICAgYzYuNDI3LDAsMTEuNjM2LDUuMjEsMTEuNjM2LDExLjYzNlM1MDYuNzksMjY3LjYzNiw1MDAuMzY0LDI2Ny42MzZ6IiBkYXRhLW9yaWdpbmFsPSIjREYyNzA2IiBjbGFzcz0iYWN0aXZlLXBhdGgiIGRhdGEtb2xkX2NvbG9yPSIjNDI4REZGIj48L3BhdGg+CjwvZz48L2c+PC9nPiA8L3N2Zz4=" /></i></button>
        </div>
        <!--<input class="hamburguesas" value="1" min="1" type="number" data-afectatotal="true">     -->   
      </div>
      <div class="toppings-container">
        <h2>Agregá tus toppings:</h2>
        <div class="columns-container">
          <div class="column-left">            
            <div class="topping-select">
              <div>Tomate:</div>              
              <select class="tomate" data-afectatotal="true">
                <option>0</option>
                <option>1</option>
              </select>                
            </div>

            <div class="precio">$15</div>

            <div class="topping-select">
              <div>Huevo:</div>              
              <select class="huevo" data-afectatotal="true">
                <option>0</option>
                <option>1</option>
                <option>2</option>
              </select>                
            </div>

            <div class="precio">$40</div>

            <div class="topping-select">
              <div>Queso:</div>              
              <select class="queso" data-afectatotal="true">
                <option>0</option>
                <option>1</option>
                <option>2</option>
              </select>                
            </div>

            <div class="precio">$20</div>

          </div>
          <div class="column-right">
            <div class="aderezo">
              <div class="aderezo-checkbox">
                <div> Mayonesa:</div>              
                <input data-afectatotal="true" class="mayonesa" type="checkbox">
              </div>
              <div class="precio">$10</div>        
              
              
              
            </div>
            <div class="aderezo">
              <div class="aderezo-checkbox">
                <div> Mostaza:</div>              
                <input data-afectatotal="true" class="mostaza" type="checkbox">
              </div>
              <div class="precio">$10</div>  
              
            </div>
            <div class="aderezo">
              <div class="aderezo-checkbox">
                <div> Ketchup:</div>              
                <input data-afectatotal="true" class="ketchup" type="checkbox">
              </div>
              <div class="precio">$10</div>  
              
            </div>
          </div>          
        </div>
      </div>
        
      <div class="total-siguiente-container">
        <div class="total-container">
          <div>Total:</div>
          <input class="totalPedido" type="number" value="200" readonly>
        </div>
        <button class="boton-siguiente">Siguiente</button>
      </div>
      
    </div>
      
    
    

    <div class="comprar-container">
      <div class="datos-cliente">
        <h2 class="title">Completá tus datos:</h2>
        <label> Nombre y apellido: </label>
        <input type="text" name="nombre" required>
        <label> Dirección: </label>
        <input type="text" name="direccion">
        <label> E-mail: </label>
        <input type="email" name="email" size="45">
        <label> Teléfono celular</label>
        <input type="tel" name="telefono">
        <button class="boton-siguiente">Siguiente</button>
      </div> 
      <div class="pago-select">
        <h2 class="title">¿Cómo querés pagar?</h2>
        <label>Elegí tu forma de pago:</label>
        <div><input id="pagaConTC" name="formaDePago" type="radio"><label for="pagaConTC">Tarjeta de crédito</label></div>
        <div><input id="pagaConTD" name="formaDePago" type="radio"><label for="pagaConTD">Tarjeta de débito</label></div>
        <div><input id="pagaConTB" name="formaDePago" type="radio"><label for="pagaConTB">Transferencia bancaria</label></div>
        <button class="boton-siguiente">Siguiente</button>
      </div>    
             
      <div class="datos-tarjeta">         
        <h2 class="title">Completá los datos de tu tarjeta:</h2>          
        <label>Número de tarjeta</label>
        <input type="text">
        <label>Nombre del titular</label>
        <input type="text">
        <label>Fecha de Vencimiento</label>
        <input type="date">
        <label>Código de Seguridad</label>
        <input type="text">
        <button class="boton-siguiente boton-comprar">Siguiente</button>
        
      </div>          
      
      <div class="datos-transferencia">
        <h2 class="title">Transferí tu monto a esta cuenta:</h2>
        <div class="info-cbu">
          <p >CBU:
            <br>
            000015475254588669
            <br>
            Alias:
            <br>
            McDoctas
            <br>
            Titular:
            <br>
            McDocta's SA
          </p>
        </div>
        
        <p>Cuando hayas hecho la transferencia, mandá el comprobante por WhatsApp a este número +954323284373 y confirmaremos tu pedido :).</p>
        <button class="boton-siguiente">¡Entendido!</button>        
      </div>

      <div class="confirmar-compra">
        <h2 class="title">Confirmá tu compra:</h2>
        <div class="pedido-final">
          <div>Hamburguesas elegidas: </div>
          <div>Toppings seleccionados:</div>
          <div>Forma de pago elegida:</div>
          <div>Total:</div>
          <button class="boton-siguiente">¡Comprar!</button>


          
        </div>
      </div>
    </div>
      
      
  </div>
   
   
  
   
  <!--
  Agregar los siguientes campos:
  
  Nombre
  Apellido
  Dirección
  Forma de pago (Tarjeta de crédito/débito o Transferencia bancaria)
  E-mail
  Teléfono
  
  Si elige tarjeta:
  - Número de tarjeta
  - Nombre en la tarjeta
  - Fecha de vencimiento
  - Código de seguridad
  
  Si elige transferencia bancaria:
  - Mostrar mensaje con el CBU y el nombre del banco
  -->

mcdocta-s-v4.markdown

McDocta's v4

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

script.js

// Calcula el total del pedido. Esta función se llama cuando la persona
// modifica la cantidad de hamburguesas, los toppings o los aderezos.
// Como resultado, muestra en pantalla el total del pedido.
function calcularTotal() {
  const preciosProductos = {
    tomate: 15,
    huevo: 40,
    queso: 20,
    mayonesa: 10,
    mostaza: 10,
    ketchup: 10,
    hamburguesa: 200,
  };
  
  const tomate = document.querySelector(".tomate").value;
  const huevo = document.querySelector(".huevo").value;
  const queso = document.querySelector(".queso").value;
  const hamburguesas = document.querySelector("[data-hamburguesas]").value;
  const mayonesa = document.querySelector(".mayonesa").checked;
  const ketchup = document.querySelector(".ketchup").checked;
  const mostaza = document.querySelector(".mostaza").checked;

  const totalTomate = preciosProductos.tomate * tomate;
  const totalHuevo = preciosProductos.huevo * huevo;
  const totalQueso = preciosProductos.queso * queso;
  const totalHamburguesa = preciosProductos.hamburguesa;
   
  let total = totalHamburguesa + totalTomate + totalHuevo + totalQueso;
  
  if (mayonesa) { 
    total += preciosProductos.mayonesa;
  }
  
  if (mostaza) {
    total += preciosProductos.mostaza;
  }
  
  if (ketchup) { 
    total += preciosProductos.ketchup;
  }

  const totalPedido = document.querySelector(".totalPedido");
  totalPedido.value = total * hamburguesas;
}

// Incrementa en 1 la cantidad de hamburguesas del pedido actual
// y muestra la nueva cantidad en pantalla. Esta función se llama
// cuando la persona hace click sobre el botón "+".
function agregarHamburguesa() {
  cantidadHamburguesas += 1;
  actualizarConteoHamburguesas();
  calcularTotal();
}

// Incrementa en 1 la cantidad de hamburguesas del pedido actual
// y muestra la nueva cantidad en pantalla. Esta función se llama
// cuando la persona hace click sobre el botón "+".
function quitarHamburguesa() {
  if (cantidadHamburguesas <= 1) {
    return;
  }
  
  cantidadHamburguesas -= 1;
  actualizarConteoHamburguesas();  
  calcularTotal();
}

// Muestra en pantalla la cantidad de hamburguesas del pedido.
// Esta función se llama luego de cambiar la cantidad de hamburguesas
// del pedido.
function actualizarConteoHamburguesas() {
  // Accedo al campo numérico "Hamburguesas".
  const campoHamburguesas = document.querySelector("[data-hamburguesas]");
  
  // Asigno el valor de "cantidadHamburguesas" al campo
  // para que se vea en pantalla.
  campoHamburguesas.value = cantidadHamburguesas;  
}

// ////////////////////////////////////////////////////////////////////////////
// Todo este código se ejecuta apenas se carga la página, de aquí para abajo
// ////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////
// INICIALIZACIÓN DE LA PANTALLA

let cantidadHamburguesas = 1;

// Muestro en pantalla la cantidad inicial de hamburguesas del pedido (1).
actualizarConteoHamburguesas();

// Hago un cálculo del total con el estado inicial de la aplicación
// (esto es, por defecto 1 hamburguesa sin toppings ni aderezos.)
calcularTotal();

//
///////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////
// CONFIGURO EVENTO PARA CALCULAR TOTAL
// Este evento ocurre cuando la persona cambia algún topping o aderezo o
// la cantidad de hamburguesas de su pedido.

// Selecciono todos los campos que afecten al cálculo del total
// (en HTML, están marcados con el atributo "data-afectatotal").
const camposAfectaTotal = document.querySelectorAll("[data-afectatotal='true']");

// Por cada campo que afecte al cálculo del total...
for (let campo = 0; campo < camposAfectaTotal.length; campo += 1) {
  // ...voy a llamar a la función calcularTotal, cada vez
  // que el usuario haga un cambio en su selección.
  camposAfectaTotal[campo].addEventListener("change", calcularTotal);
}
//
///////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////
// CONFIGURO EVENTO PARA AGREGAR Y QUITAR HAMBURGUESAS
// Este evento ocurre cuando la persona cambia la cantidad de hamburguesas de su pedido.

const botonAgregarHamburguesa = document.querySelector(".inc");
const botonQuitarHamburguesa = document.querySelector(".dec");

botonAgregarHamburguesa.addEventListener("click", agregarHamburguesa);
botonQuitarHamburguesa.addEventListener("click", quitarHamburguesa);

///////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////
// CONFIGURO EVENTO PARA IR AL SIGUIENTE PASO.
// Este evento ocurre cuando la persona hace click en el botón "Siguiente".

function ocultarSeccion(expresionCSS) {
  // Ocultamos una sección de la pantalla.
  const seccion = document.querySelector(expresionCSS);
  seccion.style.display = "none";
}

function mostrarSeccion(expresionCSS) {
  // Mostramos una sección de la pantalla.
  const seccion = document.querySelector(expresionCSS);
  seccion.style.display = "flex";
}

const botonPasoADatosCliente = document.querySelector(".pedido-container .boton-siguiente");

botonPasoADatosCliente.addEventListener("click", function () {
  ocultarSeccion(".pedido-container");
  mostrarSeccion(".datos-cliente");
});

const botonPasoADatosPago = document.querySelector(".datos-cliente .boton-siguiente");

botonPasoADatosPago.addEventListener("click", function () {
  ocultarSeccion(".datos-cliente");
  mostrarSeccion(".pago-select");
});

//
///////////////////////////////////////////////////////////////////////////////////

// Agregar botón "Atrás".

// Limpiar primera pantalla.

// Guardar selección de forma de pago.

// Al clickear en siguiente en "pago-select", mostrar la pantalla
// correspondiente según la forma de pago elegida.

style.css

.container * {
  box-sizing: border-box;
}

body, html {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #b62309, #ec7a10); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.container {
  width: 360px;
  height: 640px;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
  border-radius: 15px;
  padding: 20px;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
    
}

.logo img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  background-color: #df2706;
  border-radius: 50%;
   
}

.logo-container h1 {
  color: #df2706;
  margin: 0;
  font-size: 1.2rem;
}

.pedido-container {
  display: none;
  flex-direction: column;
  align-items: center;
  
  
}

.hamburguesas {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-top: 1px solid rgb(221, 215, 215);
  margin-top: 20px;
}

.title {
  margin: 20px;
  font-size: 1.2rem;
}


.hamburguesa-container {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: 25px;
  border: 1px solid grey;
  margin-bottom: 15px;

}
.hamburguesa-container img {
  width: 40px;
  height: 40px;
}

.toppings-container {
  width: 100%;
  border-top: 1px solid #ddd7d7;
  border-bottom: 1px solid #ddd7d7;
  margin-top: 20px;
}
.toppings-container h2{
 text-align: center;
 font-size: 1.2rem;

 
  
}

.toppings-container .columns-container {
  display: flex;
  justify-content: space-between;
  
}

.topping-select {
  display: flex;
  justify-content: space-between;
}


.aderezo-checkbox{
  display: flex;
  justify-content: space-between;
}


.comprar-container {
  display: flex;
  flex-direction: column;
}


/*CSS del boton unidades
*/
.boton-unidades {
  display: flex;
  margin: 10px;
 
}

.boton-unidades button {
  cursor: pointer;
  background-color: white;
  border: 1px solid grey;
  border-radius: 25px;
  padding: 5px 7px;
  font-size: 1rem;
  
}

.boton-unidades img {
  width: 12px;
  height: 12px;
}

.boton-unidades input{
  text-align: end;
  width: 40px;
  padding: 0;
  border: 1px solid grey;
  border-right: transparent;
  border-left: transparent;
}

.boton-unidades .dec {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: transparent;
  
}

.boton-unidades .inc {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: transparent;
}



.toppings-container .column-left, .toppings-container .column-right {
  margin: 20px;
  flex: 1;
}
.precio {
  color: #a3a0a0;
  font-size: 0.8rem;
}

.total-container {
  display: flex;
  flex-direction: column;
  align-items: center;  
}

.totalPedido {
 border: 0;
  height: 40px;
  width: 100px;
  
}

.totalPedido[type="number"] {
  font-size: 2rem;
  text-align: center;
  
  
}
.boton-siguiente {
  width: 100px;
  height: 35px;
  margin: 0;
  border: 0;
  background-color: #df2706;
  border-radius: 25px;
  font-family: Montserrat;
  color: #ffffff;
  cursor: pointer;
  
}

.total-siguiente-container {
  display: flex;
  margin: 20px;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  
  

}

.pago-select {
  display: flex;
  height: 300px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.datos-cliente {
  display: flex;
  flex-direction: column;
}

.datos-cliente .title {
  text-align: center;
  
}

.datos-cliente button, .datos-tarjeta button, .datos-transferencia button, .confirmar-compra button {
  align-self: center;
}

.datos-cliente input, .datos-tarjeta input {
  border-top: 0px;
  border-right: 0px;
  border-bottom: 1px solid #ddd7d7;
  border-left: 0px;
  padding: 5px 0px;
  margin: 10px 0px;
}

.comprar-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  
  justify-content: space-around;
  align-items: center;
}




.datos-tarjeta {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 400px;
}

.datos-tarjeta .title {
  text-align: center;
}

.datos-transferencia {
  display: flex;
  flex-direction: column;
}

.info-cbu {
  border-top: 1px solid #ddd7d7;
  border-bottom: 1px solid #ddd7d7;
  padding: 20px;
}

.confirmar-compra {
  display: flex;
  flex-direction: column;
  align-items: center;
  }

.pedido-final {
  display: flex;
  flex-direction: column;
  height: 300px;
  text-align: center;
  justify-content: space-around;
}




/*ESPACIO PARA PROBAR MACANAS*/
       /* .toppings-container {
          border: 2px solid green;
          
        }

        .columns-container {
          border: 2px solid blue;
        }
        .column-left, .column-right {
          border: 2px solid red;
          background: orange;
          
        }

        .pedido-container {
          border: 2px solid brown;
          
        }*/
       
        .pedido-container {
          display: flex;
        }

       .datos-cliente {
         display: none;
         
       }

       
       .pago-select {
         display: none;
       }

       .datos-tarjeta {
         display: none;
       }
       
       .datos-transferencia {
         display: none;
       }

       .confirmar-compra {
         display: none;
       }
       
       
/*ESPACIO PARA PROBAR MACANAS*/

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;500;600;700&amp;display=swap" rel="stylesheet" />