# Aula 18 - Front-end

## Questão 1 e 2

### HTML

function gerarNumeroInteiroAleatorio(min, max) {
	// número fracionário aleatório maior ou igual a 0 e menor que 1
	const aleatorioDeBase = Math.random();
	// número fracionário aleatório maior ou igual a 0 e menor que (max - min + 1)
	const aleatorioFracionario = Math.random() * (max - min + 1);
	// número inteiro aleatório maior ou igual a 0 e menor ou igual a (max - min)
	// Math.trunc tira a parte fracionária de um número: 0,5 vira 0, 1,25 vira 1, etc
	const aleatorioInteiro = Math.trunc(aleatorioFracionario);
	// número inteiro aleatório maior ou igual a min e menor ou igual a max
	return min + aleatorioInteiro;
}

function gerarCorAleatoria() {
	const vermelho = gerarNumeroInteiroAleatorio(0, 255);
	const verde = gerarNumeroInteiroAleatorio(0, 255);
	const azul = gerarNumeroInteiroAleatorio(0, 255);
	
	return "rgb(" + vermelho + ", " + verde + ", " + azul + ")";
}

function escolherElementoAleatorio(array) {
	return array[gerarNumeroInteiroAleatorio(0, array.length - 1)]
}

const blocoDeCor = document.querySelector(".cor");
const botao1 = document.querySelector('.botao1');
const botao1Texto = botao1.querySelector('span');
const botao2 = document.querySelector('.botao2');
const botao2Texto = botao2.querySelector('span');
const botao3 = document.querySelector('.botao3');
const botao3Texto = botao3.querySelector('span');

function randomizaBotoes () {
    const botoes = [];
    botoes.push(gerarCorAleatoria(), gerarCorAleatoria(), gerarCorAleatoria());
    blocoDeCor.style.backgroundColor = escolherElementoAleatorio(botoes);
    botao1Texto.innerText = botoes[0];
    botao2Texto.innerText = botoes[1];
    botao3Texto.innerText = botoes[2];
}

randomizaBotoes ();

let vitorias = 0;

botao1.addEventListener("click", () => {
    if (botao1Texto.innerText === blocoDeCor.style.backgroundColor) {
        alert("Acertou amigão!");
        randomizaBotoes();   
        vitorias++;
        if (vitorias === 10) {
            alert("Você acertou 10 vezes consecutivas! Posso andar com você no intervalo?");
            vitorias = 0;
        }
    } else {
        alert("Você errou amigão ;(")
        vitorias = 0;
        randomizaBotoes(); 
    }
});    

botao2.addEventListener("click", () => {
    if (botao2Texto.innerText === blocoDeCor.style.backgroundColor) {
        alert("Acertou amigão!");
        randomizaBotoes(); 
        vitorias++;   
        if (vitorias === 10) {
            alert("Você acertou 10 vezes consecutivas! Posso andar com você no intervalo?");
            vitorias = 0;
        }
    } else {
        alert("Você errou amigão ;(")
        vitorias = 0;
        randomizaBotoes(); 
    }
});    

botao3.addEventListener("click", () => {
    if (botao3Texto.innerText === blocoDeCor.style.backgroundColor) {
        alert("Acertou amigão!");
        randomizaBotoes();  
        vitorias++;  
        if (vitorias === 10) {
            alert("Você acertou 10 vezes consecutivas! Posso andar com você no intervalo?");
            vitorias = 0;
        }
    } else {
        alert("Você errou amigão ;(")
        vitorias = 0;
        randomizaBotoes(); 
    }
});    

### CSS

body > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-height: 70vh;
}

.cor {
    background-color: black;
    flex-basis: 500px;
    min-width: 500px;
    margin: auto;
}

.botoes{
    display: flex;
    min-width: 500px;
    justify-content: space-between;
}

button {
    border-radius: 0.5em;
    padding: 0.5em 1em;
    border: 1px solid gray;
}

### JS

function gerarNumeroInteiroAleatorio(min, max) {
	// número fracionário aleatório maior ou igual a 0 e menor que 1
	const aleatorioDeBase = Math.random();
	// número fracionário aleatório maior ou igual a 0 e menor que (max - min + 1)
	const aleatorioFracionario = Math.random() * (max - min + 1);
	// número inteiro aleatório maior ou igual a 0 e menor ou igual a (max - min)
	// Math.trunc tira a parte fracionária de um número: 0,5 vira 0, 1,25 vira 1, etc
	const aleatorioInteiro = Math.trunc(aleatorioFracionario);
	// número inteiro aleatório maior ou igual a min e menor ou igual a max
	return min + aleatorioInteiro;
}

function gerarCorAleatoria() {
	const vermelho = gerarNumeroInteiroAleatorio(0, 255);
	const verde = gerarNumeroInteiroAleatorio(0, 255);
	const azul = gerarNumeroInteiroAleatorio(0, 255);
	
	return "rgb(" + vermelho + ", " + verde + ", " + azul + ")";
}

function escolherElementoAleatorio(array) {
	return array[gerarNumeroInteiroAleatorio(0, array.length - 1)]
}

const blocoDeCor = document.querySelector(".cor");
const botao1 = document.querySelector('.botao1');
const botao1Texto = botao1.querySelector('span');
const botao2 = document.querySelector('.botao2');
const botao2Texto = botao2.querySelector('span');
const botao3 = document.querySelector('.botao3');
const botao3Texto = botao3.querySelector('span');

function randomizaBotoes () {
    const botoes = [];
    botoes.push(gerarCorAleatoria(), gerarCorAleatoria(), gerarCorAleatoria());
    blocoDeCor.style.backgroundColor = escolherElementoAleatorio(botoes);
    botao1Texto.innerText = botoes[0];
    botao2Texto.innerText = botoes[1];
    botao3Texto.innerText = botoes[2];
}

randomizaBotoes ();

let vitorias = 0;

botao1.addEventListener("click", () => {
    if (botao1Texto.innerText === blocoDeCor.style.backgroundColor) {
        alert("Acertou amigão!");
        randomizaBotoes();   
        vitorias++;
        if (vitorias === 10) {
            alert("Você acertou 10 vezes consecutivas! Posso andar com você no intervalo?");
            vitorias = 0;
        }
    } else {
        alert("Você errou amigão ;(")
        vitorias = 0;
        randomizaBotoes(); 
    }
});    

botao2.addEventListener("click", () => {
    if (botao2Texto.innerText === blocoDeCor.style.backgroundColor) {
        alert("Acertou amigão!");
        randomizaBotoes(); 
        vitorias++;   
        if (vitorias === 10) {
            alert("Você acertou 10 vezes consecutivas! Posso andar com você no intervalo?");
            vitorias = 0;
        }
    } else {
        alert("Você errou amigão ;(")
        vitorias = 0;
        randomizaBotoes(); 
    }
});    

botao3.addEventListener("click", () => {
    if (botao3Texto.innerText === blocoDeCor.style.backgroundColor) {
        alert("Acertou amigão!");
        randomizaBotoes();  
        vitorias++;  
        if (vitorias === 10) {
            alert("Você acertou 10 vezes consecutivas! Posso andar com você no intervalo?");
            vitorias = 0;
        }
    } else {
        alert("Você errou amigão ;(")
        vitorias = 0;
        randomizaBotoes(); 
    }
});    

## Questão 3 e 4

### HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="aula18-senha.css">
    <title>Document</title>
</head>
<body>
    <div>
        <label>
            Senha
            <input class="senha" type="password">
            <button class="botaoSenha">Esconder senha</button>
        </label>
    </div>
    <div>
        <label>
            Senha
            <input class="senha-focus" type="password">
        </label>
    </div>
    <script src="aula18-senha.js"></script>
</body>
</html>
</body>
</html>

### CSS

div {
    margin: 1em;
    text-align: center;
}

button {
    border-radius: 0.5em;
    padding: 0.5em 1em;
    border: 1px solid gray;
}

### JS

const botaoSenha = document.querySelector('.botaoSenha');
const inputSenha = document.querySelector(".senha");
const inputSenhaFocus = document.querySelector(".senha-focus");

botaoSenha.addEventListener("click", () => {
    if (inputSenha.getAttribute("type") === null) {
        inputSenha.setAttribute("type","password");
    } else {
        inputSenha.removeAttribute("type");
    }
})

inputSenhaFocus.addEventListener("focus", () => {
        inputSenhaFocus.removeAttribute("type");
})

inputSenhaFocus.addEventListener("blur", () => {
    inputSenhaFocus.setAttribute("type","password");
})

## Questão 5 e 6

### HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="aula18-forca.css">
    <title>Forca</title>
</head>
<body>
    <div class="container-forca">
        <div class="forca">
          <div class="base"></div>
          <div class="esquerda"></div>
          <div class="topo"></div>
          <div class="direita"></div>
        </div>
      
          <div class="corpo">
          <div class="cabeca"></div>
          <div class="tronco"></div>
          <div class="braco direito"></div>
          <div class="braco esquerdo"></div>
          <div class="perna direito"></div>
          <div class="perna esquerdo"></div>
        </div>
      </div>
      
      <div class="letras"></div>
      
      <div class="botoes">
        <button>a</button>
        <button>b</button>
        <button>c</button>
        <button>d</button>
        <button>e</button>
        <button>f</button>
        <button>g</button>
        <button>h</button>
        <button>i</button>
        <button>j</button>
        <button>k</button>
        <button>l</button>
        <button>m</button>
        <button>n</button>
        <button>o</button>
        <button>p</button>
        <button>q</button>
        <button>r</button>
        <button>s</button>
        <button>t</button>
        <button>u</button>
        <button>v</button>
        <button>w</button>
        <button>x</button>
        <button>y</button>
        <button>z</button>
      </div>
      <script src="aula18-forca.js"></script>
</body>
</html>

### CSS

* {
	box-sizing: border-box;
}

body {
	margin: 1em;
}

.container-forca {
	width: 200px;
	height: 300px;
	position: relative;
}

.base {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100px;
	border-bottom: 4px solid black;
}

.esquerda {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 48px;
	border-left: 4px solid black;
}

.topo {
	position: absolute;
	top: 0;
	left: 50px;
	right: 50px;
	border-bottom: 4px solid black;
}

.direita {
	position: absolute;
	top: 0;
	height: 50px;
	right: 48px;
	border-left: 4px solid black;
}

.cabeca {
	border-radius: 50%;
	border: 2px solid black;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50px;
	right: 23px;
}

.tronco {
	position: absolute;
	height: 100px;
	border-right: 2px solid black;
	right: 49px;
	top: 100px;
}

.braco {
	position: absolute;
	border-right: 2px solid black;
	height: 75px;
	right: 49px;
	top: 125px;
}

.esquerdo {
	transform: rotate(45deg);
	transform-origin: top center;
}

.direito {
	transform: rotate(-45deg);
	transform-origin: top center;
}

.perna {
	position: absolute;
	border-right: 2px solid black;
	height: 75px;
	right: 49px;
	top: 200px;
}

.letras {
	margin: 2em 0;
	display: flex;
}

.letra {
	display: inline-block;
	font-size: 3em;
	width: 2ch;
	height: 1.5em;
	text-align: center;
	margin-right: 10px;
	border-bottom: 1px solid black;
}

.botoes {
	margin: -0.5em;
	display: flex;
	flex-wrap: wrap;
}

.botoes button {
	margin: 0.5em;
	padding: 0;
	width: 3em;
	height: 3em;
	text-align: center;
}

span {
	font-size: 3em;
	margin: 0.3em;
}

### JS

function gerarNumeroInteiroAleatorio(min, max) {
	// número fracionário aleatório maior ou igual a 0 e menor que 1
	const aleatorioDeBase = Math.random();
	// número fracionário aleatório maior ou igual a 0 e menor que (max - min + 1)
	const aleatorioFracionario = Math.random() * (max - min + 1);
	// número inteiro aleatório maior ou igual a 0 e menor ou igual a (max - min)
	// Math.trunc tira a parte fracionária de um número: 0,5 vira 0, 1,25 vira 1, etc
	const aleatorioInteiro = Math.trunc(aleatorioFracionario);
	// número inteiro aleatório maior ou igual a min e menor ou igual a max
	return min + aleatorioInteiro;
}

function escolherElementoAleatorio(array) {
	return array[gerarNumeroInteiroAleatorio(0, array.length - 1)]
}

const botoesLetras = document.querySelectorAll(".botoes button");
const letrasExibidas = document.querySelector(".letras");
const palavrasForca = ["pular", "muro", "celular", "varal"] 
const palavra = escolherElementoAleatorio(palavrasForca);
const span = letrasExibidas.querySelectorAll('*');
let acertos = 0;
let erros = 0;

for (i = 0; i < palavra.length; i++) {
	letrasExibidas.append(document.createElement("span"));
	letrasExibidas.querySelectorAll('*')[i].innerText = '_'
}

for (let i = 0; i < botoesLetras.length; i++) { 
	botoesLetras[i].addEventListener("click", () => { 
		const letraClicada = botoesLetras[i].innerHTML;
		for (let j = 0; j < palavra.length; j++) {
			if (palavra[j] === letraClicada) {
				letrasExibidas.querySelectorAll('*')[j].innerText = letraClicada;
				acertos++
				if (acertos === palavra.length) {
					alert('Você ganhou!');
				}
			} else {
				erros++;
				if (erros/palavra.length === 6) {
					alert('Você perdeu ;(');
				}
			}
		}
	})
}


document.addEventListener("keypress", () => { 
	const letraTeclada = event.key;
	for (let j = 0; j < palavra.length; j++) {
		if (palavra[j] === letraTeclada) {
			letrasExibidas.querySelectorAll('*')[j].innerText = letraTeclada;
			acertos++
			if (acertos === palavra.length) {
				alert('Você ganhou!');
			}
			} else {
				erros++;
				if (erros/palavra.length === 6) {
					alert('Você perdeu ;(');
				}
			}
		}
	})