---
# System prepended metadata

title: Aulas 16 e 17 - Frontend - Lista de Exercícios - LiveHelp - 20/08/20
tags: [Frontend]

---

###### 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")
});
```