Minha Solução

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; }