Se o título do tópico ficou confuso peço desculpas, porque não sei como eu faria a minha pergunta de forma resumida e correta, mas é o seguinte...
Estou na reta final de um curso de informatica (acaba dia 13 desse mês) e a última tarefa do curso é criar um app para celular usando html, css e javascript e por fim fazer o porte para celular usando o Phonegap
O problema é que o curso não ensina JS (ensina apenas html e css) e eu estou com muita dificuldade em aprender JS, além da data de entrega estar muito próxima, a ideia do meu app é criar listas
Conforme esta na imagem, preciso fazer uma função para que quando eu clique no botão "Adicionar Item" na página seja adicionado outra caixa (um retangulo com input e textarea dentro dele) igual as duas que estão abaixo do input para adicionar titulo a lista
Sou muito leigo com JS, assisti várias vídeo aulas para tentar aprender, mas ainda não consegui entender nem a sintaxe básica direito
O que eu gostaria de saber é: o que eu deveria focar em aprender especificamente de JS, para fazer o botão "Adicionar Item" funcionar da forma que eu descrevi, e como eu faria para que as caixas criadas e as informações digitadas pelo cliente nos inputs e textarea salvem
Desde já peço desculpas pela minha leguisse no assunto
Meu HTML (somente o da pagina da imagem)
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>