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.
228 lines
3.4 KiB
228 lines
3.4 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">
|
|
</head>
|
|
|
|
<style>
|
|
|
|
*{padding:0;margin:0;box-sizing:border-box;}
|
|
|
|
header{
|
|
min-height:8vh;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
padding: 0.5em 1em;
|
|
background-color:#000;
|
|
color:#FFF;
|
|
}
|
|
|
|
nav ul{
|
|
display:flex;
|
|
gap:0.8em;
|
|
}
|
|
|
|
nav ul li{list-style:none;}
|
|
|
|
a{text-decoration:none; color:#FFF;}
|
|
|
|
main{
|
|
min-height:85vh;
|
|
background-color:#CCC;
|
|
display:flex;
|
|
gap:1em;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
align-items:center;
|
|
}
|
|
|
|
form{
|
|
width:350px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:1em;
|
|
border: 1px solid #000;
|
|
border-radius:5px;
|
|
padding:1em;
|
|
|
|
}
|
|
|
|
.form-group{
|
|
width:100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:0.3em;
|
|
}
|
|
|
|
.form-group input{
|
|
font-size:1em;
|
|
padding:0.3em 0.4em;
|
|
border-radius:5px;
|
|
}
|
|
|
|
.btn{
|
|
padding:0.3em 0.1em;
|
|
font-size:1em;
|
|
cursor:pointer;
|
|
}
|
|
|
|
footer{
|
|
min-height:7vh;
|
|
background-color:#000;
|
|
color:#FFF;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
font-size:1.3em;
|
|
}
|
|
|
|
p{
|
|
text-align:center;
|
|
margin:0.5em 0em;
|
|
}
|
|
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
thead {
|
|
background-color: #ebebeb;
|
|
text-align: left;
|
|
}
|
|
|
|
th, td {
|
|
padding: 10px;
|
|
text-align: left;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
th {
|
|
font-weight: bold;
|
|
color: #333;
|
|
border-bottom: 2px solid #000;
|
|
}
|
|
|
|
tbody tr:nth-child(even) {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
tbody td {
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<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">Name:</label>
|
|
<input type="text" id="name" />
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<label for="lastname">Lastname:</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">Name:</th>
|
|
<th scope="col">Lastname:</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>
|