You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
1.9 KiB
112 lines
1.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Título Página</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
|
|
<div class="brand"> <a href="#">WEBAPP</a></div>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li> <a href="#">ABOUT</a></li>
|
|
<li> <a href="#">HOME</a></li>
|
|
<li> <a href="#">LOGIN</a></li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<form method="POST" >
|
|
|
|
<div class="form-group">
|
|
<label for="name">Animal:</label>
|
|
<input type="text" id="name" />
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<label for="lastname">Quantidade:</label>
|
|
<input type="text" id="lastname" />
|
|
</div>
|
|
|
|
<input type="submit" value="Send" class="btn" id="btnSubmit" />
|
|
|
|
<p id="result"></p>
|
|
|
|
</form>
|
|
|
|
<div class="container-table">
|
|
|
|
<table id="tbl" >
|
|
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Animal:</th>
|
|
<th scope="col">Quantidade:</th>
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody id="tbl-body" >
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<div>
|
|
|
|
</main>
|
|
|
|
|
|
<footer>
|
|
|
|
<h3>Bootcamp Netuno 2023 ©</h3>
|
|
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
|
|
document.querySelector('#btnSubmit').addEventListener('click',e =>{
|
|
|
|
e.preventDefault();
|
|
|
|
const name = document.querySelector('#name').value;
|
|
|
|
const lastname = document.querySelector('#lastname').value;
|
|
|
|
//document.querySelector('#result').textContent=`Hello ${name} ${lastname}!`;
|
|
|
|
const tblBody = document.querySelector('#tbl-body');
|
|
|
|
const row = document.createElement("tr");
|
|
|
|
|
|
const tdName = document.createElement("td");
|
|
tdName.textContent= name;
|
|
|
|
const tdLastname = document.createElement("td");
|
|
tdLastname.textContent= lastname;
|
|
|
|
row.appendChild(tdName);
|
|
row.appendChild(tdLastname);
|
|
|
|
tbl.appendChild(row);
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|