Skip to content

D
Dishly
You need to sign in or sign up before continuing.
Commit c8f3d141 by Mariana Bongiolo
Options

Mudando de lugar o cadastro

parent 78ccb657
Showing with 49 additions and 47 deletions
templates/cadastro.html
......@@ -3,9 +3,53 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Dishly</title>
</head>
<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>
</html>
\ No newline at end of file
templates/index.html
......@@ -6,50 +6,6 @@
<title>Dishly</title>
</head>
<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>
</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