2

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>

1 Resposta 1

0

fiz uma coisa rápida aqui. Em relação ao botão adicionar, creio que é só fazer com que o Javascript adicione tags do post it. O problema eu acho é em relação ao espaço, aconselho usar o Bootstrap em relação a isto. Na caneta, eu fiz da seguinte forma:

Coloquei um display: none; para o usuário não poder escrever. Em seguida, configurei o botão de adicionar. Assim que o usuário clicar no botão, irá aparecer o input e o textarea para ele poder escrever. Também removi o display: inline; da sua class .titulo.

HTML:

<button type="button" onclick="aparecer()" class="btn-escrever">✒️</button>

CSS:

.titulo {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #666;
  margin-right: 10px;
}

.titulo, .texto {
  display: none;
}

JAVASCRIPT:

function aparecer() {
  document.querySelector('.titulo').style.display = "block";
  document.querySelector('.texto').style.display = "block";
}

Em relação ao tamanho do textarea, ele está aumentando para a horizontal sim. O que não está aumentando é a cor, pois ele não tem. A cor amarela é da class .tarefa. Para resolver isto, basta remover o background-color: transparent; do textarea e colocar a cor que preferir.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .