Html:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<button onclick="showColors()">Aluratintas em estoque:</button>
<ul class="lista">
<li data-cores="laranja" cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
<li data-cores="vermelho" cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
<li data-cores="branco" cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
<li data-cores="amarelo" cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
<li data-cores="rosa" cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
<li data-cores="preto" cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
</ul>
<button onclick="hideColors()">Limpar</button>
<a href="https://alura.com.br/" target="_blank"><img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"></a>
<script src="script.js?v=1.0.0"></script> <!--Como boa prática, coloquei uma versão para o js-->
</body>
</html>
Javascript:
//Utilize as arrow functions e iterei sobre os elementos do data-cores
function showColors() {
let itens = document.querySelectorAll('[data-cores]');
Array.from(itens).forEach((item) => {
if (item.dataset.original !== undefined) {
item.textContent = item.dataset.original;
}
});
}
function hideColors() {
let itens = document.querySelectorAll('[data-cores]');
Array.from(itens).forEach((item) => {
item.dataset.original = item.textContent;
item.textContent = '';
});
}
