Aula 5.8 | HTML, CSS e JavaScript: Praticando com as tecnologias da Web

Depois que foi feita a alteração no javascript do card, passando a utilizar a classe wrap-card, a página html passou a ter comportamento indesejado para o 2°, 3° e 4° cards: eles não alteram mais a cor, não editam e não removem mais.

Seguem os códigos:

HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>CEEP</title>
        <link rel="stylesheet" href="CSS/geral.css">        
        <link rel="stylesheet" href="CSS/base.css">
        <link rel="stylesheet" href="CSS/header.css">
        <link rel="stylesheet" href="CSS/newCard.css">      
        <link rel="stylesheet" href="CSS/card.css">
    </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>

        <form action="" class="newCard">
            <textarea class="newCard-content" placeholder="Digite o conteúdo aqui..." cols="30" rows ="10"></textarea>
            <input type="submit" class="newCard-action"
                    value="Salvar">
        </form>

        <section class="container">
            <ol class="wrap-card">
                <li class="card" data-color="first">
                    <nav class="wrap-card-options">
                        <ul>
                            <li class="card-options card_delete">
                                <a href="">Excluir</a>
                            </li>
                            <li class="card-options card_edit">
                                <a href="">Editar</a>
                            </li>                            
                            <li class="card-options isActive" data-color="first">
                                <a href="">Azul</a>
                            </li>
                            <li class="card-options"data-color="second">
                                <a href="">Vermelha</a>
                            </li>
                            <li class="card-options" data-color="third">
                                <a href="">Verde</a>
                            </li>
                            <li class="card-options" data-color="fourth">
                                <a href="">Amarela</a>
                            </li>                            
                        </ul>
                    </nav>
                        <p class="card-content" contenteditable="false">
                            item de lista 1. Que deveria ter alguma coisa e pronto!!!
                        </p>
                    </li>
                <li class="card" data-color="second">
                    <nav class="wrap-card-options">
                        <ul>
                            <li class="card-options card_delete">
                                <a href="">Excluir</a>
                            </li>
                            <li class="card-options card_edit">
                                <a href="">Editar</a>
                            </li>                             
                            <li class="card-options" data-color="first">
                                <a href="">Azul</a>
                            </li>
                            <li class="card-options isActive" data-color="second">
                                <a href="">Vermelha</a>
                            </li>
                            <li class="card-options" data-color="third">
                                <a href="">Verde</a>
                            </li>
                            <li class="card-options" data-color="fourth">
                                <a href="">Amarela</a>
                            </li>   
                        </ul>
                    </nav>                
                    <p class="card-content" contenteditable="false">
                    item de lista 2. Pois é fi. Este é o segundo. Grandes.
                    </p>

                </li>
                <li class="card" data-color="third">
                    <nav class="wrap-card-options">
                        <ul>
                            <li class="card-options card_delete">
                                <a href="">Excluir</a>
                            </li>
                            <li class="card-options card_edit">
                                <a href="">Editar</a>
                            </li>                             
                            <li class="card-options" data-color="first">
                                <a href="">Azul</a>
                            </li>
                            <li class="card-options"data-color="second">
                                <a href="">Vermelha</a>
                            </li>
                            <li class="card-options isActive" data-color="third">
                                <a href="">Verde</a>
                            </li>
                            <li class="card-options" data-color="fourth">
                                <a href="">Amarela</a>
                            </li>   
                        </ul>
                    </nav>                
                <p class="card-content" contenteditable="false">
                item de lista 3. E não tem nada demais.
                </p>

                </li>
                <li class="card" data-color="fourth">
                    <nav class="wrap-card-options">
                        <ul>
                            <li class="card-options card_delete">
                                <a href="">Excluir</a>
                            </li>
                            <li class="card-options card_edit">
                                <a href="">Editar</a>
                            </li>                             
                            <li class="card-options" data-color="first">
                                <a href="">Azul</a>
                            </li>
                            <li class="card-options"data-color="second">
                                <a href="">Vermelha</a>
                            </li>
                            <li class="card-options" data-color="third">
                                <a href="">Verde</a>
                            </li>
                            <li class="card-options isActive" data-color="fourth">
                                <a href="">Amarela</a>
                            </li>   
                        </ul>
                    </nav>                
                <p class="card-content" contenteditable="false">
                item de lista 4. Acabou.
                </p>
                </li>
            </ol>
        </section>
        <script src="JS/card.js"></script>
        <script src="JS/newcard.js"></script>        
    </body>
</html>

CSS HEADER

.header {
    background-color: #0082C7;
    height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.header-title {
    color: #B3DAEE;
    display: inline;
    vertical-align: middle;
}

.header-menu {
    float: right;
}

.header-button:first-child {
    margin-right: 15px;
}

.header-button {
    background-color: #006195;
    font-size: 16px;
    color: #FFF;
    box-sizing: content-box;
    height: 22px;
    padding: 8px;
    display: inline-block;
}

CSS GERAL

* {
    margin: 0;
    border: 0;
    padding: 0;
    outline: none;
}

body, textarea {
    font-family: 'verdana', 'sans-serif';
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol, li {
    list-style: none;
}

CSS BASE

.container {
    padding: 0 10%;
}

.error {
    display: block;
    color: red;
    text-align: center;
}

CSS CARD

.card {
    display: inline-block;
    box-sizing: border-box;
    padding: 16px;
    width: 25%;
    position: relative;
}

.wrap-card-options {
    position: absolute;
    top: -16px;
    left: 0px;
    opacity: 0;
    transition: opacity 0.25s linear;
}

.card:hover .wrap-card-options {
    opacity: 1;
}

.card-options {
    background-color: white;
    display: inline-block;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    text-indent: -9999999px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.card-options.isActive {
    border-width: 4px;
}

.card_delete {
    background-image: url(../images/X_solid_black_25.gif);
    background-size: 65%;
    margin-right: 5px;
}

.card_edit {
    background-image: url(../images/edit.png);
    background-size: 60%;    
}

.card-content[contenteditable="true"] {
    outline: 2px dashed rgba(0, 0, 0, 0.5);
}

[data-color="first"] {
    background-color: #45AAEE; /* Azul */
}

[data-color="second"] {
    background-color: #FF1010; /* Vermelha */
}

[data-color="third"] {
    background-color: #76EF40; /* Verde */
}

[data-color="fourth"] {
    background-color: #EBEF40; /* Amarela */
}

CSS NEWCARD

.newCard {
    background-color: darkgrey;
    padding: 25px 125px;
    margin-bottom: 30px;
}

.newCard-content {
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;    
    width: 560px;
    height: 24px;
    padding: 5px;
    border: 1px;
    transition: height 0.3s linear,
                border 0.5s linear;
}

.newCard-content:focus {
    height: 100px;
    border: 2px solid green;
}

.newCard-action {
    display: block;
    font-size: 16px;
    width: 90px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    background-color: #8272C7;
    cursor: pointer;
    margin-top: 20px;
}

JS CARD

var $wrapCards = document.querySelector('.wrap-card');
var $cardColors = document.querySelectorAll('.card-options');

    $wrapCards.addEventListener('click', function(event) {
        var $this = event.target;
        var $card = $this.parentNode.parentNode.parentNode;
        var $cardContent = $card.querySelector('.card-content');

        if ($this.dataset.color) {
            $card.dataset.color = $this.dataset.color;

            for (var i = 0; i < $cardColors.length; i++) {
                $cardColors[i].classList.remove('isActive');
            }

            $this.classList.add('isActive');
        }

        console.log($this.classList.contains('.card_delete'));

        if ($this.classList.contains('card_delete')) {
            $card.remove();
        };

        console.log($this.classList.contains('.card_edit'));
        if ($this.classList.contains('card_edit')) {
            if ($cardContent.getAttribute('contenteditable') == 'false') {
                $cardContent.setAttribute('contenteditable', 'true');
                $cardContent.focus();
                $this.classList.add('isActive');            
            } else {
                $cardContent.setAttribute('contenteditable', 'false');
                $cardContent.blur();
                $this.classList.remove('isActive');            
            };
        };        
    });

JS NEWCARD

var $newCard = document.querySelector(".newCard");
var $newCardContent = document.querySelector(".newCard-content");
var $newCardAction = document.querySelector(".newCard-action");

$newCard.addEventListener('submit', function(event){
    event.preventDefault();
    if ($newCardContent.value == '') {
        if (document.querySelector('.error') == null) {
            var $error = document.createElement('span');
            $error.classList.add('error');
            $error.textContent = 'Favor preencher algum conteúdo!';
            $newCard.insertBefore($error, $newCardAction);
        };
    } else {
      var $wrapCard = document.querySelector('.wrapCard');
      var $card = document.querySelector('.card');
      var $copyCard = document.querySelector('.card').cloneNode(true);
      $copyCard.querySelector('.card-content').textContent =  $newCardContent.value;
      $wrapCard.insertBefore($copyCard, $card);
    };
});