Boa noite, meu código esta igual porém o js não está funcionando. Eu salvei o card.js na mesma pasta do index.html
var $cardColors = document.querySelectorAll('.card-colors');
for (var index=0; index<$cardColors.length;index++){
$cardColors[index].addEventListener('click', function () {
var $card = this.parentNode;
$card.dataset.color = this.dataset.color;
});
}html
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="card.css">
<title>Ceep</title>
</head>
<body>
<header class="header container">
<h1 class="header-title">Ceep</h1>
<nav class="header-menu">
<ul >
<li class="header-button">
<a href="">Linhas</a>
</li>
<li class="header-button">
<a href="">?</a>
</li>
</ul>
</nav>
</header>
<section >
<ol>
<li class="card card_colorFirst">
<nav class="wrap-card-colors">
<ul>
<li class="card-colors card-colors_colorFirst"><a href=""></a>Azul</li>
<li class="card-colors card-colors_colorSecond"><a href=""></a>Vermelho</li>
<li class="card-colors card-colors_colorThird"><a href=""></a>Verde</li>
<li class="card-colors card-colors_colorFourth"><a HREF=""></A></a>Amarelo</li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, cupiditate, unde. Minima eos blanditiis, quos nemo temporibus fugit autem odit molestias a quidem velit veritatis nam iure neque rerum, veniam. Corporis architecto, id libero voluptatum, laudantium provident sit ducimus blanditiis.</p>
</li><!--
--><li class="card card_colorSecond">
<nav class="wrap-card-colors">
<ul>
<li class="card-colors card-colors_colorFirst"><a href=""></a>Azul</li>
<li class="card-colors card-colors_colorSecond"><a href=""></a>Vermelho</li>
<li class="card-colors card-colors_colorThird"><a href=""></a>Verde</li>
<li class="card-colors card-colors_colorFourth"><a HREF=""></A></a>Amarelo</li>
</ul>
</nav >
<p>Magnam officia asperiores porro quidem enim, rerum aspernatur repellat, tempora, laboriosam amet animi iste totam doloremque numquam provident tempore corporis id quod voluptas. Dicta enim necessitatibus aspernatur, molestias autem similique aperiam labore harum blanditiis officia, a, porro voluptate fugit laborum.</p>
</li><!--
--><li class="card card_colorThird">
<nav class="wrap-card-colors">
<ul>
<li class="card-colors card-colors_colorFirst"><a href=""></a>Azul</li>
<li class="card-colors card-colors_colorSecond"><a href=""></a>Vermelho</li>
<li class="card-colors card-colors_colorThird"><a href=""></a>Verde</li>
<li class="card-colors card-colors_colorFourth"><a HREF=""></A></a>Amarelo</li>
</ul>
</nav >
<p>Ullam autem voluptas quod iste odit, voluptatum quae minus voluptates nesciunt quo veniam nulla eius distinctio, ab itaque saepe. Qui autem vero fugiat expedita explicabo, iste excepturi mollitia quaerat animi. Ut earum praesentium velit soluta, temporibus accusantium vero quae doloremque.</p>
</li><!--
--><li class="card card_colorFourth">
<nav class="wrap-card-colors">
<ul>
<li class="card-colors card-colors_colorFirst"><a href=""></a>Azul</li>
<li class="card-colors card-colors_colorSecond"><a href=""></a>Vermelho</li>
<li class="card-colors card-colors_colorThird"><a href=""></a>Verde</li>
<li class="card-colors card-colors_colorFourth"><a HREF=""></A></a>Amarelo</li>
</ul>
</nav>
<p>Dolores necessitatibus animi sint ut libero aliquid eaque quaerat sapiente voluptatum, aut ea est quia officia maxime, nihil mollitia hic veniam natus omnis eligendi tempore quod? Error ducimus, similique esse ipsa totam dignissimos ratione maxime nihil debitis hic placeat sunt!</p>
</li>
</ol>
</section>
<script src="card.js"></script>
</body>
</html>a função para aparecer o "você clicou!" no console funcionou, mas as cores não mudam quando eu clico.
