###### tags: `Frontend`
# Aulas 16 e 17 - Frontend - Lista de Exercícios - LiveHelp - 20/08/20
## Aluno: Rafael Almeida Santos
#### Questão 01
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="agenda.css">
<title>Document</title>
</head>
<body>
<h1>Tarefinhas</h1>
<form action="">
<label for="tarefa">Nova tarefa
<input type="text" id="tarefa">
</label>
<button class="btn">Adicionar</button>
</form> <hr>
<ul class="toDo">
</ul>
<ul class="done">
</ul>
<script src="scriptAgenda.js"></script>
</body>
</html>
```
```css=
body{
margin: 1em;
max-width: 50ch;
}
form{
display: flex;
align-items: center;
justify-content: space-between;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li{
display: flex;
align-items: center;
margin-top: 0.5em;
}
li input {
margin-right: 0.5em;
}
li button{
margin-left: auto;
}
.done span{
text-decoration: line-through;
}
```
```javascript=
const form = document.querySelector("form");
const input = document.querySelector("form input")
const toDo = document.querySelector(".toDo")
const done = document.querySelector(".done")
function deletaTarefa(evento) {
const botaoDeletar = evento.target;
const tarefa = botaoDeletar.closest("li");
tarefa.remove();
}
function marcaTarefaComoFeita(evento) {
const checkBox = evento.target;
const tarefa = checkBox.closest("li");
if(checkBox.checked){
done.append(tarefa);
} else{
toDo.append(tarefa)
}
}
form.addEventListener("submit", event => {
event.preventDefault();//Evitando que a página seja recarregada
const tarefa = document.createElement("li");//Criei um elemento no JS
const checkBox = document.createElement("input");//criei input
checkBox.setAttribute("type", "checkbox")//setei input para checkbox
const botaoDeletar = document.createElement("button");
botaoDeletar.innerText = "Deletar";/*Configurando texto dentro do elemento */
botaoDeletar.setAttribute("cursor", "pointer")
botaoDeletar.addEventListener('click',deletaTarefa);
checkBox.addEventListener('input', marcaTarefaComoFeita)
const texto = document.createElement("span")//Criei isso só para poder alterar meu texto
texto.innerText = input.value
tarefa.append(checkBox);
tarefa.append(texto); /*Texto da tarefa que digitei */
tarefa.append(botaoDeletar);
toDo.append(tarefa)//Colocando a tarefa no meu HTML de fato!
input.value = ""; //Esvaizando o conteúdo do meu input após escrever a tarefa
});
```
#### Questão 02
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="exemploPropag.css">
<title>Document</title>
</head>
<body>
<div>
<button>
Botão
</button>
</div>
<script src="exemploPropagScript.js"></script>
</body>
</html>
```
```css=
body {
margin: 1em;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
div {
display: inline-block;
padding: 2em;
border-radius: 4px;
background-color: palevioletred;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
button {
appearance: none;
color: palevioletred;
background-color: white;
border-radius: 2px;
padding: 0.5em;
border: 0;
font-weight: bold;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
button:hover, button:focus {
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
button:active {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
```
```javascript=
const div = document.querySelector("div");
const button = document.querySelector("button");
div.addEventListener("click", () => alert("div foi clicada"));
button.addEventListener("click", event => {
event.stopPropagation()
alert("button foi clicado")
});
```
Sign in with Wallet
Connect another wallet