---- HTML ----
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="favicon.ico" />
<title>Exercícios</title>
<script src="script.js" defer></script>
</head>
<body>
<header></header>
<main>
<button id="bt_foco" type="button" class="bt_padrao">Foco</button>
<button id="bt_curto" type="button" class="bt_padrao">Descanso Curto</button>
<button id="bt_longo" type="button" class="bt_padrao">Descando Longo</button>
</main>
<footer></footer>
</body>
</html>
---- CSS ----
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
button {
display: block;
background-color: gray;
border-radius: 16px;
padding: 15px;
width: 200px;
}
button.active {
background-color: green;
color: white;
}
---- javascript ----
const bt_foco = document.getElementById("bt_foco");
const bt_curto = document.getElementById("bt_curto");
const bt_longo = document.getElementById("bt_longo");
const botoes = document.querySelectorAll(".bt_padrao");
const play = new Audio("play.wav");
const pause = new Audio("pause.mp3");
function clicar_bt(obj) {
//limpa o foco dos botões
botoes.forEach((botao) => {
botao.classList.remove("active");
});
//adiciona foco do botão no contexto
obj.classList.add("active");
//reproduz som por 3 secundos e para
play.loop = true;
play.play();
setTimeout(() => {
play.loop = false;
pause.play();
}, 3000);
}
bt_foco.addEventListener("click", () => {
clicar_bt(bt_foco);
});
bt_curto.addEventListener("click", () => {
clicar_bt(bt_curto);
});
bt_longo.addEventListener("click", () => {
clicar_bt(bt_longo);
});
