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>