Javascript - How to add things to html and save html information

Question

If the title of the topic got confused I apologize, because I do not know how I would make my question summarized and correct, but it is the following...

I’m in the final stretch of a computer course (ends on the 13th of this month) and the last task of the course is to create a mobile app using html, css and javascript and finally to port to mobile using Phonegap

The problem is that the course does not teach JS (teaches only html and css) and I’m having a lot of trouble learning JS, besides the delivery date being very close, the idea of my app is to create lists

As this in the image, I need to do a function so that when I click the "Add Item" button on the page another box is added (a rectangle with input and textarea inside it) equal to the two that are below the input to add title to the list

I am very lay with JS, I watched several video lessons to try to learn, but I still can not understand even the basic syntax right

What I’d like to know is: what I should focus on specifically learning from JS, to make the "Add Item" button work the way I described it, and how I would make the boxes created and the information typed by the client in the inputs and textarea save

I apologize in advance for my leguisse on the subject

My HTML (image page only)

let currentItem = 3;
function adicionarItem(e) {
e.preventDefault(); // evitar que o form seja submetido

// criar o input
let input = document.createElement('input');
with (input) {
    classList.add('titulo');
    placeholder = 'Digite o Título da lista';
    maxLength = 19;
}
// criar o textarea
let textarea = document.createElement('textarea');
with (textarea) {
    classList.add('descricao');
    cols = 5;
    rows = 5;
    maxLength = 130;
}

// adiciona ambos em um div
let div = document.createElement('div');
div.id = 'retangulo' + currentItem; // usa o contador como parte do id
div.appendChild(input);
div.appendChild(textarea);

// atualiza o contador (assim o próximo div não terá id repetido)
currentItem++;

// adiciona a div no form
document.querySelector('#formulario').appendChild(div);
}

// ao clicar no botão, adiciona um novo item
document.querySelector('#botaoNovoItem').addEventListener('click', adicionarItem);

body {}

div {
  text-align: center;
  align-items: center;
}

.botao {
  background: #00FFFF;
  cursor: pointer;
  color: black;
  border: 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  width: 300;
  font-size: 50;
  box-shadow: 2px 2px 0 1px #131;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  outline: 0;
  padding: 50px 0px 0px 0px;
}

.botao:active {
  box-shadow: 0 0 0 0 #131, inset 3px 3px 3px #131;
  transform: translate (3px, 3px);
}

.botaor {
  background: #836FFF;
  cursor: pointer;
  color: white;
  border: 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  width: 300;
  font-size: 50;
  box-shadow: 2px 2px 0 1px #131;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  outline: 0;
}

.botaor:active {
  box-shadow: 0 0 0 0 #131, inset 3px 3px 3px #131;
  transform: translate (3px, 3px);
}

.listas {
  font-size: 50;
  text-align: center
}

.loading {
  font-size: 50;
  text-align: center
}

.logo {
  width: 856;
  height: 502;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.titulo {
  width: 300;
  height: 45;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 28;
}

#retangulo {
  width: 300;
  height: 200;
  border: 3px solid;
  border-color: black;
  background: white;
  margin-left: auto;
  margin-right: auto;
}

.item {
  width: 280;
  height: 45;
  margin-top: 5;
  font-size: 25;
}

.descricao {
  width: 290;
  height: 140;
  margin-top: 9;
  font-size: 20;
}

.adicionaritem {
  margin-left: 400;
  background: #00BFFF;
  cursor: pointer;
  color: white;
  border: 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  box-shadow: 2px 2px 0 1px #131;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  outline: 0;
  padding: 10px 0px 0px 0px;
  font-size: 15;
  width: 100;
}

.adicionaritem:active {
  box-shadow: 0 0 0 0 #131, inset 3px 3px 3px #131;
  transform: translate (3px, 3px);
}

.voltar {
  margin-left: 400;
  background: #00BFFF;
  cursor: pointer;
  color: black;
  border: 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  box-shadow: 2px 2px 0 1px #131;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  outline: 0;
  padding: 0px 0px 0px 0px;
  font-size: 15;
  width: 100;
}

.voltar:active {
  box-shadow: 0 0 0 0 #131, inset 3px 3px 3px #131;
  transform: translate (3px, 3px);
}

<html>
  <head>
  <title> Criar Lista </title>
  <link rel="stylesheet" type="text/css" href="personalizacao.css" />
  <script type="text/javascript" src= "javascript.js"> </script> 
  </head>

                                   <body>
                                   
                                 
                                   
                        <a href="2-Tela Inicial.html"> <button class="voltar"> ⬅ Voltar para o início  </button></p> </a>
                        
                        <input type="text" class="titulo" placeholder="Digite o Título da lista" maxlength=18>
                        
                        
                        <form id="formulario">
  <button id="botaoNovoItem" class="adicionaritem">Adicionar item</button>
  <div id="retangulo1">
<input type="text" class="item" placeholder="Novo item" maxlength=19> 
<textarea class="descricao"  cols="5" rows="5" maxlength=130></textarea>
  </div>
  <div id="retangulo2"> 
<input type="text" class="item" placeholder="Novo item" maxlength=19> 
<textarea class="descricao"  cols="5" rows="5" maxlength=130></textarea>
  </div>
</form>
                        
                
                        
                        
                        
                    
                          
  
                                    </body>


</html>

Answer 1

To add a new item, you can search the function appendChild if it is pure Javascript, or append if you are using jQuery. Have a nice example in English here.

And to take the data from the fields, you can function getElementById or getElementsByTagName together with the property value, which is also on the link in the previous example.

I hope I helped and good luck with the job.

Answer 2

The basic idea is to use createElement to create the new fields and add them to an existing element.

There are other details to tidy up, for example:

• one id should be unique on the page, but you created two div's with the same id. This does not give error (in the sense of not loading the page), but when searching or manipulating these elements, Javascript will not behave in the expected way (because the functions that use the id assume he is unique)
• the HTML is poorly formed (has tags that close without the respective opening, the div's do not have closure, etc.). So I deleted some parts in the example below, and left only the essential for the example (then you complete with the rest of your code)

I also deleted a lot of CSS, since it’s only "visual" and doesn’t interfere with Javascript (because the idea is to focus on how it works, then you add your CSS again).

I put the div's within a form, because I believe that the idea is to submit these data later (if it is just to fill and do nothing, it would seem useless to me), then these elements should be in a form. I took the opportunity to leave this form as the element into which new div's.

let currentItem = 3;
function adicionarItem(e) {
    e.preventDefault(); // evitar que o form seja submetido

    // criar o input
    let input = document.createElement('input');
    with (input) {
        classList.add('titulo');
        placeholder = 'Digite o Título da lista';
        maxLength = 19;
    }
    // criar o textarea
    let textarea = document.createElement('textarea');
    with (textarea) {
        classList.add('descricao');
        cols = 5;
        rows = 5;
        maxLength = 130;
    }

    // adiciona ambos em um div
    let div = document.createElement('div');
    div.id = 'retangulo' + currentItem; // usa o contador como parte do id
    div.appendChild(input);
    div.appendChild(textarea);

    // atualiza o contador (assim o próximo div não terá id repetido)
    currentItem++;

    // adiciona a div no form
    document.querySelector('#formulario').appendChild(div);
}

// ao clicar no botão, adiciona um novo item
document.querySelector('#botaoNovoItem').addEventListener('click', adicionarItem);

div {
  border: 3px solid black;
  margin: 3px;
  padding: 3px;
}

<form id="formulario">
  <button id="botaoNovoItem" class="adicionaritem">Adicionar item</button>
  <div id="retangulo1">
    <input type="text" class="item" placeholder="Novo item" maxlength=19> 
    <textarea class="descricao"  cols="5" rows="5" maxlength=130></textarea>
  </div>
  <div id="retangulo2"> 
    <input type="text" class="item" placeholder="Novo item" maxlength=19> 
    <textarea class="descricao"  cols="5" rows="5" maxlength=130></textarea>
  </div>
</form>