Skip to content

D
Dishly
Commit 78ccb657 by Mariana Bongiolo
Options

Sistema de cadastro de imagens

parent 65e5de03
Showing with 44 additions and 4 deletions
templates/index.html
...@@ -6,11 +6,50 @@ ...@@ -6,11 +6,50 @@
<title>Dishly</title> <title>Dishly</title>
</head> </head>
<body> <body>
<h1>Cadastro com Imagem</h1>
<div Imagem> <form id="formCadastro">
<img src="/img/renata-imagem-receitas-macarrao-ao-molho-carbonara-share.jpg" alt="Macarrão carbonara" width="600px"> <input type="text" id="nome" placeholder="Digite o nome" required>
<p>Macarrão Carbonara</p>
</div> <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