<!DOCTYPE html>
<html lang="pt-br" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<button onclick="mostraTintas(this)">Aluratintas em estoque:</button>
<nav>
<ul class="lista">
<li cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
<li cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
<li cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
<li cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
<li cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
<li cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
</ul>
</nav>
<section>
<button class="tipoTinta" local="tinta-interior">Tintas Interiores</button>
<button class="tipoTinta" local="tinta-exterior">Tintas Exteriores</button>
<button class="tipoTinta" id="menu">Voltar ao Início</button>
</section>
<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="main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-br" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<button onclick="mostraTintas(this)">Aluratintas em estoque:</button>
<nav>
<ul class="lista">
<li cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
<li cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
<li cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
<li cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
<li cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
<li cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
</ul>
</nav>
<section>
<button class="tipoTinta" local="tinta-interior">Tintas Interiores</button>
<button class="tipoTinta" local="tinta-exterior">Tintas Exteriores</button>
<button class="tipoTinta" id="menu">Voltar ao Início</button>
</section>
<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="main.js"></script>
</body>
</html>
const localTinta = document.querySelectorAll("[local]")
const tipoTinta = document.querySelectorAll("[tipo]")
localTinta.forEach( (elemento) =>{
elemento.addEventListener("click", (evento)=> {
tinta = evento.target.getAttribute('local')
verTintas(tinta)
})
})
function verTintas(padrao){
for (var i = 0; i < tipoTinta.length; i++){
atual = tipoTinta[i].getAttribute('tipo')
if (padrao === atual){
tipoTinta[i].style.visibility = "hidden"
} else if (padrao != atual){
tipoTinta[i].style.visibility = "visible"
}
apertarBotao(tipoTinta[i])
}
}
function apertarBotao(tintas){
botao = document.getElementById('menu')
botao.style.visibility = "visible"
botao.addEventListener("click", ()=>{
tintas.style.visibility = "visible"
botao.style.visibility = "hidden"
})
}
