Bugs no final do projeto | HTML, CSS e JavaScript: Praticando com as tecnologias da Web

<!DOCTYPE html>
<html>
<head>
    <title>Ceep - Gerenciamento de Lembretes</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/blocos/header.css">
    <link rel="stylesheet" type="text/css" href="css/blocos/card.css">
    <link rel="stylesheet" type="text/css" href="css/blocos/new-card.css">
</head>
<body>
    <header class="header container">
        <h1 class="header-title">Ceep</h1>
        <nav class="header-menu">
            <ul>
                <li class="header-button">
                    <a>Linhas</a>
                </li>
                <li class="header-button">
                    <a>?</a>
                </li>
            </ul>
        </nav>
    </header>
    <form class="new-card">
        <textarea class="new-card-content" placeholder="Digite aqui o conteúdo de seu novo cartão"></textarea>
        <input class="new-card-submit" type="submit" name="salvar" value="salvar">
    </form>
    <section class="container">
        <ol class="wrap-card">
            <li class="card card_colorFirst" data-color="first">
            <nav class="wrap-card-btns">
                <ul>
                    <li class="btn-pad card_delete">
                        <a href="">Excluir</a>
                    </li>
                    <li class="btn-pad card_edit">
                        <a href="">Editar</a>
                    </li>
                    <li class="btn-pad card-colors isActive" data-color="first">
                    <a href="#">Azul</a>
                    </li>
                    <li class="btn-pad card-colors" data-color="second">
                    <a href="#">Amarelo</a>
                    </li>
                    <li class="btn-pad card-colors" data-color="third">
                    <a href="#">Vermelho</a>
                    </li>
                    <li class="btn-pad card-colors" data-color="fourth">
                    <a href="#">Verde</a>
                    </li>
                </ul>
            </nav>
            <p class="card-content" contenteditable="false">
                Bem-vindo ao Ceep
            </p>
            </li><!--
            -->
        </ol>
    </section>
    <script type="text/javascript" src="JS/blocos/new-card.js"></script>
    <script type="text/javascript" src="JS/blocos/card.js"></script>
</body>
</html>

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

$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 position = 0; position < $cardColors.length; position++) {
            $cardColors[position].classList.remove('isActive');
        };
        $this.classList.add('isActive');
    };

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

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

var $newCardForm = document.querySelector('.new-card');
var $newCardContent = document.querySelector('.new-card-content');
var $newCardSubmit = document.querySelector('.new-card-submit');
var $newCardError = document.createElement('span');

    $newCardForm.addEventListener('submit', function(event){
        //não permite que o botão recarregue a página
        event.preventDefault();
        if ($newCardContent.value == '') {

            //Caso esteja vazio, mostra a mensagem de erro
            $newCardError.textContent = 'Por favor, preencha o campo acima para gerar seu cartão';
            $newCardError.classList.add('new-card-error');
            //Adiciona a mensagem antes do botão de envio, abaixo do campo de texto
            $newCardForm.insertBefore($newCardError, $newCardSubmit);

        }else{

            var $wrapCards = document.querySelector('.wrap-card')
            //Seleciona o primeiro cartão existente na página
            var $firstCard = document.querySelector('.card')
            //Clona o cartão com toda a sua árvore de filhos e classes
            var $copyCard = $firstCard.cloneNode(true);

            $copyCard.querySelector('.card-content').textContent = $newCardContent.value;
            $wrapCards.insertBefore($copyCard, $firstCard)

        };
    });

    //Caso a pessoa digite algo após o erro ser mostrado, a mensagem de erro é ocultada
    $newCardContent.addEventListener('input', function(){

        var $removeError = document.querySelector('.new-card-error');
        //verifica se a mensagem de erro existe, para evitar loops ao digitar o texto
        if($newCardError != null){ 

            $newCardError.remove();

        };

    });

Bugs e outros :

Ao clicar no cartão (perto das bordas) o fundo do container fica da mesma cor que o cartão.
Não tem o botão de refresh
Os outros botões do header não funcionam.
Caso o usuário feche todos os cartões, não é possível criar um novo

Mergulhe em programação