Estou fazendo um bloco de notas e estou com algumas duvidas, eu quero que quando se faça um click no botão "adicionar" adicione mais um postit para isso, posso usar o loop ou tenho que usar outro comando?
No botão com a caneta quando fizer click ativa a edição para começar a escrever eu não faço a menor ideia do que usar para fazer isso, alguem poderia me recomendar um site ou me explicar como posso fazer isso?
Na tag do textarea aquela parte amarela so se move na vertical como posso fazer para se mover tambem na horizontal.
var btn = document.querySelector(".btn-apagar");
btn.addEventListener("click", remove);
var textotitle = document.querySelector(".tarefas");
function remove() {
textotitle.parentNode.removeChild(textotitle);
}
* {
margin: 0;
padding: 0;
line-height: 1;
box-sizing: border-box;
/* outline: 1px solid tomato; */
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, Helvetica, sans-serif;
}
.emcima {
max-width: 64rem;
margin: 0 auto;
}
.espaco {
margin-top: 20px;
}
body {
background-color: #eaeaea;
padding: 20px;
}
button {
cursor: pointer;
}
h1 {
font-size: 18px;
text-transform: uppercase;
}
ul {
padding: 0;
list-style: none;
}
.A {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px solid #aaa;
}
.titulo {
background-color: transparent;
border: 0;
border-bottom: 1px solid #666;
margin-right: 10px;
display: inline;
}
.btn-mais {
border: 0;
color: #111111;
padding: 5px 10px;
border: 1px solid #999999;
border-radius: 6px;
display: inline-block;
}
header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.tarefa {
background-color: yellow;
padding: 10px;
max-width: 300px;
}
.btn-escrever,
.btn-apagar {
border: 0;
background-color: transparent;
padding: 3px 5px;
}
textarea {
width: 100%;
background-color: transparent;
border: 0;
}
<div class="emcima">
<div class='A'>
<h1>Tarefas</h1>
<button type="button" class="btn-mais">Adicionar</button>
</div>
<div class='espaco'>
<ul class="tarefas">
<li class="tarefa">
<header>
<input type="text" class="titulo" placeholder="Título">
<button type="button" class="btn-escrever">✒️</button>
<button type="button" class="btn-apagar">✂️</button>
</header>
<textarea name="" placeholder="Texto da tarefa" class='texto'></textarea>
</li>
</ul>
</div>
</div>