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!
