[Projeto] Alternando o estilo dos botões com JavaScript | Front-end

main.js

buttons = document.querySelectorAll('button');
// console.log(buttons);

buttonFoco = document.querySelector('#foco');
buttonPausa = document.querySelector('#pausa');
buttonDescanso = document.querySelector('#descanso');

buttonFoco.addEventListener('click', () => {
    console.log('buttonFoco');
    adicionarActive(buttonFoco);
});

buttonPausa.addEventListener('click', () => {
    adicionarActive(buttonPausa);
});

buttonDescanso.addEventListener('click', () => {
    adicionarActive(buttonDescanso);
});

function adicionarActive(button) {  
    buttons.forEach((button) => {
        button.classList.remove('active');
    });
    button.classList.add('active');
}

styles.css

.button {
    color: #380060;
    background-color: #fefefe;
    border-radius: 10px;
    padding: 10px 30px;
    border: 2px solid #380060;
  }
  
  .button:hover {
    cursor: pointer;
  }
  
  .active {
    color: rgb(239, 220, 255);
    background-color: #380060;
    border: 2px solid #380060;
  }

index.html

<!DOCTYPE html>
<html lang="pt-br" data-contexto="foco">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desafio</title>
    
    <link rel="stylesheet" href="./styles.css">
    <script src="./main.js" defer></script>
    </head>
    <body>
        <main>
            <div>
                <button id = "foco" class="button active">Foco</button>
                <button id = "pausa" class="button">Pausa</button>
                <button id = "descanso" class="button">Descanso</button>
            </div>
        </main>
    </body>
</html>