###### tags: front-end


# Aula 16 e 17 - Front-End

## Questão 1

### HTML

<h1>Tarefinhas</h1>

<form>
  <label>
    Nova tarefa
    <input type="text">
  </label>
  <button>Adicionar</button>
</form>

<hr/>

<ul class="a-fazer">

</ul>

<ul class="feitas">

</ul>


<div>
	<button>
		Botão
	</button>
</div>

### CSS

body {
  margin: 1em;
  max-width: 50ch;
}

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;
}

.feitas span {
  text-decoration: line-through;
}

### JS

const form = document.querySelector('form');
const input = form.querySelector("input");
const aFazer = document.querySelector(".a-fazer")
const feitas = document.querySelector(".feitas")

function deletarTarefa(event) {
  const botaoDeDeletar = event.target;
  const tarefa = botaoDeDeletar.closest("li");
  
  tarefa.remove();
}

function marcarComoFeita(event) {
  const checkbox = event.target;
  const tarefa = checkbox.closest("li");
  
  if (checkbox.checked) {
    feitas.append(tarefa);
  } else {
    aFazer.append(tarefa);
  }
}

form.addEventListener("submit", event => {
  event.preventDefault();
  
  const tarefa = document.createElement("li");
  
  const checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  
  checkbox.addEventListener("input", marcarComoFeita);
  
  const texto = document.createElement("span");
  texto.innerText = input.value;
  
  const botaoDeDeletar = document.createElement("button");
  botaoDeDeletar.innerText = "Deletar";
  botaoDeDeletar.addEventListener("click", deletarTarefa);
  
  tarefa.append(checkbox);
  tarefa.append(texto);
  tarefa.append(botaoDeDeletar);
  
  aFazer.append(tarefa);
  
  input.value = "";
})

## Questão 2

### HTML

<div>
	<button>
		Botão
	</button>
</div>

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

### JS

const div = document.querySelector("div");
const button = document.querySelector("button");

div.addEventListener("click", () => alert("div clicada"));

button.addEventListener("click", (event) => {
  event.stopPropagation();
  alert("button clicado")});