Loop and how to enable editing to write in javascript

Question

I’m making a notepad and I’m having some doubts, I want when you click on the "add" button add one more postit for this, I can use the loop or I have to use another command?

On the button with the pen when I click active the edit to start writing I have no idea what to use to do this, someone could recommend me a site or explain to me how I can do this?

In the textarea tag that yellow part only moves vertically as I can do to move also horizontally.

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>

Answer 1

I did a quick thing here. Regarding the add button, I think just make Javascript add post it tags. The problem I think is in relation to the space, I advise using Bootstrap in relation to this. In the pen, I did as follows:

I put a display: none; so the user can’t write. I then set the add button. As soon as the user clicks on the button, the input and textarea will appear so he can write. I also removed the display: inline; of your 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";
}

In relation to the textarea size, it is increasing to the horizontal yes. What is not increasing is the color, because it does not have. The yellow color is of the class .tarefa. To resolve this, simply remove the background-color: transparent; of textarea and put the color you prefer.