Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Aula 5.6

Referente ao curso HTML, CSS e JavaScript: Praticando com as tecnologias da Web

por JOSE ANGELO
| 34.9k xp | 51 posts

Galera, preciso de ajuda aqui.

Estou com uma série de problemas: 1. o placeholder no textArea não funciona; 2. o textArea não aumenta quando clico nele; 3. o javascript não valida se o textArea está ou não preenchido.

Baixei os arquivos finais do projeto (que por sinal estão incompletos) e não consegui achar o erro.

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>
                <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 NEW CARD

.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: 100;
    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 $cards = document.querySelectorAll('.card');
var $cardColors = document.querySelectorAll('.card-options');

for (var idx = 0; idx < $cards.length; idx++) {
    $cards[idx].addEventListener('click', function(event) {
        var $this = event.target;
        console.log("o cifão this:");
        console.log($this);
        console.log($this.classList.contains('card-options'));
        console.log("b");
        var $card = this;
        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 NEW CARD

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

$newCard.addEventListener('submit', function(event){

    if ($newCardContent.value == '') {
        event.preventDefault();
        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);
        };
    };
});

Desde já agradeço!

3 respostas
por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Oi José Angelo, tudo bem?

Vou falar com o pessoal aqui do Alura sobre os arquivos, ok?

Vamos aos problemas:

1 - o placeholder não está aparecendo pois não pode ter nenhum espaço ou enter entre a tag de abertura e fechamento (também não sabia dessa!)

2 - a altura não está pegando não é? A borda pega, mas a height não, você colocou para que quando o textarea pegue foco ela tenha 100... mas 100 o quê?

3 - O JS de validação parece normal aqui. Uma solução rápida é colocar o atributo required nesse textarea, aí o browser não deixa enviar o form.

Espero ter ajudado e bons estudos!

Natan

por JOSE ANGELO
| 34.9k xp | 51 posts

Obrigado pela ajuda.

Os itens 1 e 2 foram resolvidos.

O placeholder ficou assim:

<textarea class="newCard-content" placeholder="Digite o conteúdo aqui..." cols="30" rows ="10"></textarea>

O que queria mesmo é validar o preenchimento do card via JS, que foi minha pergunta 3.

Este ainda está em aberto.

solução!
por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Oi José,

Imagina, o fórum é para isso!

Não está validando? Apresenta algum erro no console? Você está puxando o script logo antes de fechar a tag body?

Como te disse, a validação do seu código parece ok e funcional. Testei seu código nesse Jsbin e fiz testes locais também, ambos ok.

Abcs!