Skip to content

D
Dishly
Commit c8f3d141 by Mariana Bongiolo
Options

Mudando de lugar o cadastro

parent 78ccb657
Showing with 46 additions and 46 deletions
templates/cadastro.html
...@@ -3,9 +3,53 @@ ...@@ -3,9 +3,53 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Dishly</title>
</head> </head>
<body> <body>
<h1>Cadastro com Imagem</h1>
<form id="formCadastro">
<input type="text" id="nome" placeholder="Digite o nome" required>
<input type="file" id="imagem" accept="image/*" required>
<button type="submit">Cadastrar</button>
</form>
<div class="cards" id="lista"></div>
<script>
const form = document.getElementById("formCadastro");
const lista = document.getElementById("lista");
form.addEventListener("submit", function(e) {
e.preventDefault();
const nome = document.getElementById("nome").value;
const arquivo = document.getElementById("imagem").files[0];
if (!arquivo) return;
const leitor = new FileReader();
leitor.onload = function(evento) {
const card = document.createElement("div");
card.classList.add("card");
card.innerHTML = `
<img src="${evento.target.result}">
<h3>${nome}</h3>
`;
lista.appendChild(card);
form.reset();
};
leitor.readAsDataURL(arquivo);
});
</script>
</body> </body>
</html> </html>
\ No newline at end of file
templates/index.html
...@@ -6,50 +6,6 @@ ...@@ -6,50 +6,6 @@
<title>Dishly</title> <title>Dishly</title>
</head> </head>
<body> <body>
<h1>Cadastro com Imagem</h1>
<form id="formCadastro">
<input type="text" id="nome" placeholder="Digite o nome" required>
<input type="file" id="imagem" accept="image/*" required>
<button type="submit">Cadastrar</button>
</form>
<div class="cards" id="lista"></div>
<script>
const form = document.getElementById("formCadastro");
const lista = document.getElementById("lista");
form.addEventListener("submit", function(e) {
e.preventDefault();
const nome = document.getElementById("nome").value;
const arquivo = document.getElementById("imagem").files[0];
if (!arquivo) return;
const leitor = new FileReader();
leitor.onload = function(evento) {
const card = document.createElement("div");
card.classList.add("card");
card.innerHTML = `
<img src="${evento.target.result}">
<h3>${nome}</h3>
`;
lista.appendChild(card);
form.reset();
};
leitor.readAsDataURL(arquivo);
});
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment