0
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>
Thanks for the tip, I saved the site here, I will certainly use it!!!
– Felipe Fabricio