main.js:
const lista = document.querySelectorAll("[data-lista]"); const botao1 = document.querySelector("#botao1") const botao2 = document.querySelector(".botao2")
botao1.addEventListener("click", () => { lista.forEach ((elemento ) => { elemento.style = "visibility:visible:"; }) });
botao2.addEventListener("click", () => { lista.forEach ((elemento ) => { elemento.style = "visibility:hidden"; }) });
html:
- Tinta laranja
- Tinta vermelha
- Tinta branca
- Tinta amarela
- Tinta rosa
- Tinta preta
css:
{ margin: 0; padding: 0; }
body { font-family: "Roboto Mono", monospace; min-height: 400px; min-width: 450px; background-size: 80vh; color: rgb(0, 0, 0); background-image: url("https://www.uniabeu.edu.br/wp-content/uploads/2020/03/fundo-lilas.png"); background-size: cover; background-repeat: no-repeat; height: 100vh; font-size: 24px; font-weight: bold; display: flex; align-items: center; flex-direction: column; }
button { font-size: 24px; font-family: "Futura Lt BT", sans-serif; background-color: black; background-repeat: no-repeat; cursor: pointer; overflow: hidden; outline: none; padding: 8px 20px 8px 20px; color: white; box-shadow: 0px 0px 5px gray; border-radius: 5px 5px 0 0; border: none; transition: 500ms; opacity: 0.8; margin: 30px 0; }
#botoes { text-align: center; margin: 30px 0; margin-top: 300px; }
button:hover { color: white; background-color: gray;
}
button:active { color: black; background-color: white; }
.lista { padding: 20px; list-style-type: none; border: 4mm ridge rgba(234, 122, 11, 0.992); }
.alura-logo { width: 150px; position: absolute; top: 2%; right: 2%; }
[cor="laranja"] { color: orange; }
[cor="vermelho"] { color: red; }
[cor="branco"] { color: white; }
[cor="amarelo"] { color: yellow; }
[cor="rosa"] { color: pink; }
[cor="preto"] { color: black; }