0

Estoy comenzando en el mundo de la programación y estoy practicando con un pequeño proyecto que estoy desarrollando.

Mi inconveniente es el siguiente. Tengo una aplicación de calculador de propinas y se puede elegir varios porcentajes predefinidos haciendo click sobre el botón con el porcentaje y lo que quiero es que al seleccionar uno este se marque (ya he logrado esta parte) pero, si selecciono otro, quiero que se desmarque el anterior y me marque el que acabo de presionar (esta es la parte que no logro hacer).

Les dejo todo mi proyecto hasta donde lo tengo hecho (tengo separado en dos archivos la vista mobile y la de desktop pero para copiarla aquí, la puse en un solo archivo).

const button5 = document.querySelector("#button-5");
const button10 = document.querySelector("#button-10");
const button15 = document.querySelector("#button-15");
const button25 = document.querySelector("#button-25");
const button50 = document.querySelector("#button-50");
const custom = document.querySelector("#custom");
const reset = document.querySelector("#reset");

const calculatorButtons = [
  button5,
  button10,
  button15,
  button25,
  button50,
  reset,
];

calculatorButtons.forEach((button) => {
  if (button != reset) {
    button.onclick = () => {
      buttonState(button);
    };
  }
});

const onClickStatePorcentageButton = (button) =>
  (button.style.backgroundColor = "var(--color-primary)");

function buttonState(button) {
  if (button.onclick) {
    onClickStatePorcentageButton(button);
  }
}
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

:root {
  --color-primary: hsl(172, 67%, 45%);
  --color-dark: hsl(183, 100%, 15%);

  --color-background: hsl(185, 41%, 84%);

  --color-dark-grayish-cyan: hsl(186, 14%, 43%);
  --color-dark-grayish-cyan-two: hsl(184, 14%, 56%);
  --color-light-grayish-cyan: hsl(185, 41%, 84%);
  --color-light-grayish-cyan-two: hsl(189, 41%, 97%);
  --color-white: hsl(0, 0%, 100%);

  --font-size: 2.4rem;
  --font-family: "Space Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
}

* {
  font-size: 62.5%;
  font-family: var(--font-family);
}

body {
  width: 100%;
  height: 100vh;
}

section {
  margin: 20px 0;
}

.background {
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.background .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
}

.background .title span {
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-grayish-cyan);
  letter-spacing: 1rem;
}

.calculator {
  background-color: var(--color-white);
  width: 100%;
  height: 100%;
  padding: 20px 35px;
  box-sizing: border-box;
  border-radius: 15px 15px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.data-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.result-container {
  width: 100%;
}

/* INPUT SECTION */
.calculator__bill {
  width: 100%;
}

.calculator__bill-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.calculator__bill label {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-dark-grayish-cyan);
}

.input-container__bill {
  width: 100%;
  height: 45px;
  margin-top: 15px;
  height: max-content;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--color-light-grayish-cyan-two);
  border-radius: 5px;
}

.dollar-icon {
  width: 5%;
  height: 45px;
  background-image: url("../assets/images/icon-dollar.svg");
  background-repeat: no-repeat;
  background-position: center center;
  padding-left: 40px;
}

.input-container__numbers {
  width: 100%;
  height: 45px;
  background-color: var(--color-light-grayish-cyan-two);
  border: none;
  border-radius: 5px;
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  text-align: end;
  padding-right: 20px;
}

.input-container__numbers:focus {
  outline: none;
}
/* INPUT SECTION */

/* TIP SECTION */
.calculator__tip {
  width: 100%;
}

.calculator__tip label {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  margin-bottom: 15px;
  color: var(--color-dark-grayish-cyan);
}

.calculator__tip-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 15px auto 0 auto;
  gap: 15px;
}

.calculator__tip-buttons input,
.calculator__tip-buttons button {
  width: 100%;
  height: 45px;
  padding: 0;
  margin: 0 auto;
  font-size: var(--font-size);
  color: var(--color-white);
  background-color: var(--color-dark);
  border: none;
  border-radius: 10px;
}

.calculator__tip-buttons input {
  background-color: var(--color-light-grayish-cyan-two);
  color: var(--color-dark-grayish-cyan);
  font-weight: var(--font-weight-bold);
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
}

.calculator__tip-buttons input:focus {
  outline: none;
}
/*TIP SECTION */

/* PEOPLE SECTION */
.calculator__people {
  width: 100%;
}

.calculator__people label {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  margin-bottom: 15px;
  color: var(--color-dark-grayish-cyan);
}

.input-container__people {
  width: 100%;
  height: 45px;
  margin-top: 15px;
  height: max-content;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--color-light-grayish-cyan-two);
  border-radius: 5px;
}

.people-icon {
  width: 5%;
  height: 45px;
  background-image: url("../assets/images/icon-person.svg");
  background-repeat: no-repeat;
  background-position: center center;
  padding-left: 40px;
}

.inputContainer__people {
  width: 95%;
  height: 45px;
  background-color: var(--color-light-grayish-cyan-two);
  border: none;
  border-radius: 5px;
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  text-align: end;
  padding-right: 20px;
}

.inputContainer__people:focus {
  outline: none;
}
/* PEOPLE SECTION */

/* RESULT SECTION */
.calculator__result {
  width: 100%;
  background-color: var(--color-dark);
  box-sizing: border-box;
  border-radius: 10px;
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
}

.tip,
.total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family);
  font-size: var(--font-size);
  margin-bottom: 20px;
  align-items: center;
}

.tip__text-section p,
.total__text-section p {
  font-size: 1.4rem;
}

.tip-amount-text,
.total-text {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.person {
  color: var(--color-dark-grayish-cyan-two);
  font-weight: var(--font-weight-bold);
  margin: 5px 0 0;
}

.calculator__result button {
  height: 45px;
  color: var(--color-dark);
  background-color: var(--color-primary);
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  border: none;
  border-radius: 5px;
}

.calculator__result button:focus {
  outline: none;
  background-color: var(--color-primary);
}

.mount-person,
.mount-total {
  font-size: 2.8rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
/* RESULT SECTION */

@media screen and (min-width: 1440px) {
  .background {
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .background .title {
    margin: 0 0 100px;
  }

  .calculator {
    flex-direction: row;
    width: 60%;
    height: 500px;
    padding: 35px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.54);
    -moz-box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.54);
    box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.54);
  }

  .data__container {
    margin-right: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .result-container {
    margin-left: 30px;
    height: 100%;
  }

  .calculator__result {
    height: 100%;
    margin: 0;
    padding: 40px;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
  }

  .calculator__tip-buttons button {
    padding: 0;
    text-align: center;
  }

  .calculator__tip-buttons input {
    text-align: right;
  }

  .calculator__tip-buttons input::-webkit-input-placeholder {
    text-align: right;
  }

  .mount-person,
  .mount-total {
    font-size: 3.6rem;
  }

  .inputContainer__people,
  .input-container__numbers {
    padding-right: 10px;
  }

  .calculator__tip-buttons {
    grid-template-columns: repeat(3, 1fr);
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <title>Tip calculator app</title>
    <link rel="stylesheet" href="./styles/normalize.css" />
    <link rel="stylesheet" href="./styles/mobile.css" />
    <link
      rel="stylesheet"
      href="./styles/desktop.css"
      media="screen and (min-width: 1440px)"
    />
  </head>
  <body>
    <div class="background">
      <section class="title">
        <span>SPLI</span>
        <span>TTER</span>
      </section>
      <div class="calculator">
        <div class="data__container">
          <section class="calculator__bill">
            <div class="calculator__bill-container">
              <label for="bill">Bill</label>
              <div class="input-container__bill">
                <div class="dollar-icon"></div>
                <input
                  class="input-container__numbers"
                  type="number"
                  id="bill"
                  placeholder="0"
                  ;
                />
              </div>
            </div>
          </section>
          <section class="calculator__tip">
            <label for="custom">Select Tip %</label>
            <div class="calculator__tip-buttons">
              <button id="button-5" type="button">5%</button>
              <button id="button-10" type="button">10%</button>
              <button id="button-15" type="button">15%</button>
              <button id="button-25" type="button">25%</button>
              <button id="button-50" type="button">50%</button>
              <input
                class="custom"
                id="custom"
                placeholder="Custom"
                type="number"
              />
            </div>
          </section>
          <section class="calculator__people">
            <label for="people">Number of People</label>
            <div class="input-container__people">
              <div class="people-icon"></div>
              <input
                class="inputContainer__people"
                type="number"
                id="people"
                placeholder="0"
                ;
              />
            </div>
          </section>
        </div>
        <div class="result-container">
          <section class="calculator__result">
            <div class="total-container">
              <div class="tip">
                <div class="tip__text-section">
                  <p class="tip-amount-text">Tip Amount</p>
                  <p class="person">/ person</p>
                </div>
                <div>
                  <p class="mount-person" id="mount-person">$0.00</p>
                </div>
              </div>
              <div class="total">
                <div class="total__text-section">
                  <p class="total-text">Total</p>
                  <p class="person">/ person</p>
                </div>
                <div>
                  <p class="mount-total" id="mount-total">$0.00</p>
                </div>
              </div>
            </div>
            <button id="reset" type="reset" value="Reset">RESET</button>
          </section>
        </div>
      </div>
    </div>

    <script src="./src/index.js"></script>
  </body>
</html>

2
  • Si tienes un grupo de botones, y quieres que el último en ser activado tenga una apariencia diferente, puedes agregarle estilos o clases CSS. Si el siguiente botón que pulsas debe adquirir esas propiedades y el anterior va a mostrar su estado por defecto, lo que suelo hacer es una selección de todos los botones del grupo, se recorren eliminando las clases o estilos si lo hay y finalmente se le aplican al que se acaba de activar.
    – Orici
    Commented el 29 jul. 2021 a las 22:37
  • Creo que me diste una buena opción. Ahora a pensar como implementar eso. ¡Muchas gracias! Commented el 29 jul. 2021 a las 23:07

3 respuestas 3

0

Pues es cuestión de añadir una regla CSS para el botón activo: .botonActivo
Al pulsar un botón desactivas el que ahora tiene esa clase y se la pones al pulsado Añado la regla
.botonActivo {background: var(--color-primary) !important

    const onClickStatePorcentageButton = (button) =>
      {
      let activo = document.querySelector(".botonActivo");
      if(activo != null)
            activo.classList.remove("botonActivo")
      button.classList.add("botonActivo");
      };

Con esto mantienes solo un botón con aspecto destacado.

3
  • Saludos Juan, intenté a tu manera pero, por alguna razón no me está saliendo. Al hacer click, el botón cambia de color pero si selecciono otro, el anterior no vuelve a su estado original. Commented el 30 jul. 2021 a las 0:38
  • Miralo funcionando acá javascript.espaciolatino.com/muestras/tips.htm
    – Juan
    Commented el 30 jul. 2021 a las 1:05
  • Muchas gracias Juan, voy a verificar que todo lo que puse esté correcto. Commented el 30 jul. 2021 a las 15:36
0

En el siguiente ejemplo selecciono todos los botones de un grupo.

Uso una clase CSS para indicar el botón activo btn-active. Esta clase se la añado al último botón activado, pero previamente recorro todos los botones (nodos) seleccionados y les quito la clase de botón activo (si no esta no pasa nada).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test buttons</title>

    <style type="text/css">
        body {
            padding: 5%;
        }

        .btn {
            align-items     : center;
            background-color: rgb(225, 225, 225);
            border          : 1px solid grey;
            border-radius   : 4px;
            cursor          : pointer;
            display         : flex;
            justify-content : center;
            padding         : 9px;
            width           : 120px;
        }
        .btn-active {
            background-color: rgb(98, 146, 236);
            border-color    : rgb(129, 129, 255);
        }
        .buttons {
            border          : 1px solid grey;
            border-radius   : 4px;
            display         : flex;
            justify-content : space-around;
            padding         : 5%;
        }
    </style>
</head>
<body>
    <div class="buttons">
        <div class="btn">
            A
        </div>
        <div class="btn">
            B
        </div>
        <div class="btn">
            C
        </div>
    </div>

    <script>
        function qsa(selector) // js nodes
        {
            return document.querySelectorAll(selector);
        }

        const buttons = qsa('.buttons .btn');
        buttons.forEach(btnNode => {
            btnNode.onclick = () => {
                buttons.forEach(btnNode => {
                    btnNode.classList.remove('btn-active');
                });
                btnNode.classList.add('btn-active');
                
                // Do something ...
            }
        });
    </script>
</body>
</html>

1
  • Muchas gracias por sus respuestas, voy a probar ambos. Commented el 1 ago. 2021 a las 16:44
0

Una forma es limpiar o poner el color por defecto inmediatamente antes de cambiar el color al modo "activo". En el código lo agrego como cleanState.


calculatorButtons.forEach((button) => {
  if (button != reset) {
    button.onclick = () => {
      cleanState(calculatorButtons);
      buttonState(button);
    };
  }
});

const onClickStatePorcentageButton = (button) =>
  (button.style.backgroundColor = "var(--color-primary)");

function buttonState(button) {
  if (button.onclick) {
    
    onClickStatePorcentageButton(button);
  }
}

function cleanState(buttons) {
  buttons.forEach((button)=>button.style.backgroundColor = "var(--color-dark)")
    
}

const button5 = document.querySelector("#button-5");
const button10 = document.querySelector("#button-10");
const button15 = document.querySelector("#button-15");
const button25 = document.querySelector("#button-25");
const button50 = document.querySelector("#button-50");
const custom = document.querySelector("#custom");
const reset = document.querySelector("#reset");

const calculatorButtons = [
  button5,
  button10,
  button15,
  button25,
  button50,
  reset,
];

calculatorButtons.forEach((button) => {
  if (button != reset) {
    button.onclick = () => {
      cleanState(calculatorButtons);
      buttonState(button);
    };
  }
});

const onClickStatePorcentageButton = (button) =>
  (button.style.backgroundColor = "var(--color-primary)");

function buttonState(button) {
  if (button.onclick) {
    
    onClickStatePorcentageButton(button);
  }
}

function cleanState(buttons) {
  buttons.forEach((button)=>button.style.backgroundColor = "var(--color-dark)")
    
}
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

:root {
  --color-primary: hsl(172, 67%, 45%);
  --color-dark: hsl(183, 100%, 15%);

  --color-background: hsl(185, 41%, 84%);

  --color-dark-grayish-cyan: hsl(186, 14%, 43%);
  --color-dark-grayish-cyan-two: hsl(184, 14%, 56%);
  --color-light-grayish-cyan: hsl(185, 41%, 84%);
  --color-light-grayish-cyan-two: hsl(189, 41%, 97%);
  --color-white: hsl(0, 0%, 100%);

  --font-size: 2.4rem;
  --font-family: "Space Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
}

* {
  font-size: 62.5%;
  font-family: var(--font-family);
}

body {
  width: 100%;
  height: 100vh;
}

section {
  margin: 20px 0;
}

.background {
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.background .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
}

.background .title span {
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-grayish-cyan);
  letter-spacing: 1rem;
}

.calculator {
  background-color: var(--color-white);
  width: 100%;
  height: 100%;
  padding: 20px 35px;
  box-sizing: border-box;
  border-radius: 15px 15px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.data-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.result-container {
  width: 100%;
}

/* INPUT SECTION */
.calculator__bill {
  width: 100%;
}

.calculator__bill-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.calculator__bill label {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-dark-grayish-cyan);
}

.input-container__bill {
  width: 100%;
  height: 45px;
  margin-top: 15px;
  height: max-content;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--color-light-grayish-cyan-two);
  border-radius: 5px;
}

.dollar-icon {
  width: 5%;
  height: 45px;
  background-image: url("../assets/images/icon-dollar.svg");
  background-repeat: no-repeat;
  background-position: center center;
  padding-left: 40px;
}

.input-container__numbers {
  width: 100%;
  height: 45px;
  background-color: var(--color-light-grayish-cyan-two);
  border: none;
  border-radius: 5px;
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  text-align: end;
  padding-right: 20px;
}

.input-container__numbers:focus {
  outline: none;
}
/* INPUT SECTION */

/* TIP SECTION */
.calculator__tip {
  width: 100%;
}

.calculator__tip label {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  margin-bottom: 15px;
  color: var(--color-dark-grayish-cyan);
}

.calculator__tip-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 15px auto 0 auto;
  gap: 15px;
}

.calculator__tip-buttons input,
.calculator__tip-buttons button {
  width: 100%;
  height: 45px;
  padding: 0;
  margin: 0 auto;
  font-size: var(--font-size);
  color: var(--color-white);
  background-color: var(--color-dark);
  border: none;
  border-radius: 10px;
}

.calculator__tip-buttons input {
  background-color: var(--color-light-grayish-cyan-two);
  color: var(--color-dark-grayish-cyan);
  font-weight: var(--font-weight-bold);
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
}

.calculator__tip-buttons input:focus {
  outline: none;
}
/*TIP SECTION */

/* PEOPLE SECTION */
.calculator__people {
  width: 100%;
}

.calculator__people label {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  margin-bottom: 15px;
  color: var(--color-dark-grayish-cyan);
}

.input-container__people {
  width: 100%;
  height: 45px;
  margin-top: 15px;
  height: max-content;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--color-light-grayish-cyan-two);
  border-radius: 5px;
}

.people-icon {
  width: 5%;
  height: 45px;
  background-image: url("../assets/images/icon-person.svg");
  background-repeat: no-repeat;
  background-position: center center;
  padding-left: 40px;
}

.inputContainer__people {
  width: 95%;
  height: 45px;
  background-color: var(--color-light-grayish-cyan-two);
  border: none;
  border-radius: 5px;
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  text-align: end;
  padding-right: 20px;
}

.inputContainer__people:focus {
  outline: none;
}
/* PEOPLE SECTION */

/* RESULT SECTION */
.calculator__result {
  width: 100%;
  background-color: var(--color-dark);
  box-sizing: border-box;
  border-radius: 10px;
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
}

.tip,
.total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family);
  font-size: var(--font-size);
  margin-bottom: 20px;
  align-items: center;
}

.tip__text-section p,
.total__text-section p {
  font-size: 1.4rem;
}

.tip-amount-text,
.total-text {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.person {
  color: var(--color-dark-grayish-cyan-two);
  font-weight: var(--font-weight-bold);
  margin: 5px 0 0;
}

.calculator__result button {
  height: 45px;
  color: var(--color-dark);
  background-color: var(--color-primary);
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  border: none;
  border-radius: 5px;
}

.calculator__result button:focus {
  outline: none;
  background-color: var(--color-primary);
}

.mount-person,
.mount-total {
  font-size: 2.8rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
/* RESULT SECTION */

@media screen and (min-width: 1440px) {
  .background {
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .background .title {
    margin: 0 0 100px;
  }

  .calculator {
    flex-direction: row;
    width: 60%;
    height: 500px;
    padding: 35px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.54);
    -moz-box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.54);
    box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.54);
  }

  .data__container {
    margin-right: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .result-container {
    margin-left: 30px;
    height: 100%;
  }

  .calculator__result {
    height: 100%;
    margin: 0;
    padding: 40px;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
  }

  .calculator__tip-buttons button {
    padding: 0;
    text-align: center;
  }

  .calculator__tip-buttons input {
    text-align: right;
  }

  .calculator__tip-buttons input::-webkit-input-placeholder {
    text-align: right;
  }

  .mount-person,
  .mount-total {
    font-size: 3.6rem;
  }

  .inputContainer__people,
  .input-container__numbers {
    padding-right: 10px;
  }

  .calculator__tip-buttons {
    grid-template-columns: repeat(3, 1fr);
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <title>Tip calculator app</title>
    <link rel="stylesheet" href="./styles/normalize.css" />
    <link rel="stylesheet" href="./styles/mobile.css" />
    <link
      rel="stylesheet"
      href="./styles/desktop.css"
      media="screen and (min-width: 1440px)"
    />
  </head>
  <body>
    <div class="background">
      <section class="title">
        <span>SPLI</span>
        <span>TTER</span>
      </section>
      <div class="calculator">
        <div class="data__container">
          <section class="calculator__bill">
            <div class="calculator__bill-container">
              <label for="bill">Bill</label>
              <div class="input-container__bill">
                <div class="dollar-icon"></div>
                <input
                  class="input-container__numbers"
                  type="number"
                  id="bill"
                  placeholder="0"
                  ;
                />
              </div>
            </div>
          </section>
          <section class="calculator__tip">
            <label for="custom">Select Tip %</label>
            <div class="calculator__tip-buttons">
              <button id="button-5" type="button">5%</button>
              <button id="button-10" type="button">10%</button>
              <button id="button-15" type="button">15%</button>
              <button id="button-25" type="button">25%</button>
              <button id="button-50" type="button">50%</button>
              <input
                class="custom"
                id="custom"
                placeholder="Custom"
                type="number"
              />
            </div>
          </section>
          <section class="calculator__people">
            <label for="people">Number of People</label>
            <div class="input-container__people">
              <div class="people-icon"></div>
              <input
                class="inputContainer__people"
                type="number"
                id="people"
                placeholder="0"
                ;
              />
            </div>
          </section>
        </div>
        <div class="result-container">
          <section class="calculator__result">
            <div class="total-container">
              <div class="tip">
                <div class="tip__text-section">
                  <p class="tip-amount-text">Tip Amount</p>
                  <p class="person">/ person</p>
                </div>
                <div>
                  <p class="mount-person" id="mount-person">$0.00</p>
                </div>
              </div>
              <div class="total">
                <div class="total__text-section">
                  <p class="total-text">Total</p>
                  <p class="person">/ person</p>
                </div>
                <div>
                  <p class="mount-total" id="mount-total">$0.00</p>
                </div>
              </div>
            </div>
            <button id="reset" type="reset" value="Reset">RESET</button>
          </section>
        </div>
      </div>
    </div>

    <script src="./src/index.js"></script>
  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.