project finalized

assets/app/reconhecimentoDeVoz.js

@@ -0,0 +1,24 @@
+const elementoChute = document.querySelector('#chute')
+
+window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+const recognition = new SpeechRecognition();
+recognition.lang = 'pt-Br';
+recognition.start()
+
+recognition.addEventListener('result', onSpeak)
+recognition.addEventListener('end', () => recognition.start())
+
+function onSpeak() {
+    chute = e.results[0][0].transcript
+    exibeChuteNaTela(chute)
+    verificaSeOChutePossuiUmValorValido(chute)
+}
+
+function exibeChuteNaTela(chute) {
+    elementoChute.innerHTML = `
+        <div>Você disse:</div> 
+                
+        <span class="box">${chute}</span>
+    `
+}

assets/app/sortearNumero.js

@@ -0,0 +1,23 @@
+// DECLARAÇÕES
+const elementoMenorValor = document.querySelector('#menor-valor')
+const elementoMaiorValor = document.querySelector('#maior-valor')
+
+const menorValor = 1
+const maiorValor = 100
+const numeroSecreto = gerarNumeroAleatorio()
+
+// ATRIBUIÇÕES
+elementoMenorValor.innerHTML = menorValor
+elementoMaiorValor.innerHTML = maiorValor
+
+// FUNÇÕES
+function gerarNumeroAleatorio() {
+    return parseInt(Math.random() * maiorValor);
+}
+
+console.log(`Número secreto: ${numeroSecreto}`)
+
+// EVENTOS
+
+
+

assets/app/validacao.js

@@ -0,0 +1,40 @@
+function verificaSeOChutePossuiUmValorValido(chute) {
+    const numero = +chute
+
+    if (chuteInvalido(numero)) {
+        elementoChute.innerHTML += `<div>Valor inválido</div>`
+        return
+    }
+
+    if (numeroForMaiorOuMenorQueOValorPermitido(numero)) {
+        elementoChute.innerHTML += `<div>Valor inválido: Fale um número entre ${menorValor} e ${maiorValor}</div>`
+        return
+    }
+
+    if (numero === numeroSecreto) {
+        document.body.innerHTML = `
+            <h2>Você acertou!</h2>
+            <h3>O número secreto era ${numeroSecreto}</h3>
+
+            <button id="jogar-novamente" class="btn-jogar">Jogar novamente</button>
+        `
+    } else if (numero > numeroSecreto) {
+        elementoChute.innerHTML += `<div>O número secreto é menor <i class="fa-solid fa-down-long"></i></div>`
+    } else {
+        elementoChute.innerHTML += `<div>O número secreto é maior <i class="fa-solid fa-up-long"></i></div>` 
+    }
+}
+
+function chuteInvalido(numero) {
+    return Number.isNaN(numero);
+}
+
+function numeroForMaiorOuMenorQueOValorPermitido(numero) {
+    return numero > maiorValor || numero < menorValor
+}
+
+document.body.addEventListener('click', e => {
+    if (e.target.id == 'jogar-novamente') {
+        window.location.reload()
+    }
+});

assets/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 62.5%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

assets/css/style.css

@@ -0,0 +1,68 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
+
+:root {
+    --font-family: 'Montserrat', sans-serif;
+    --bg-color: #0AA1DD;
+    --primary-color: #E8F9FD;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+    text-align: center;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 100vh;
+    margin: 0;
+}
+
+h1 {
+    font-size: 8rem;
+}
+
+h2 {
+    font-size: 6.4rem;
+}
+
+h3 {
+    font-size: 3.2rem;
+    margin-top: 2rem;
+}
+
+.mensagem {
+    font-size: 2.4rem;
+    margin-top: 4rem;
+}
+
+.box {
+    display: inline-block;
+
+    margin: 2rem;
+    border: 0.2rem solid var(--primary-color);
+    padding: 1rem;
+
+    font-size: 6.4rem;
+}
+
+.btn-jogar {
+    background: none;
+    margin-top: 2rem;
+    border: .1rem solid var(--primary-color);
+    border-radius: .5rem;
+    padding: .8rem 1.5rem;
+
+    color: var(--primary-color);
+
+    transition: .3s;
+}
+
+.btn-jogar:hover {
+    background-color: var(--primary-color);
+    color: black;
+    transform: scale(1.01);
+}

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Número Secreto</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <link rel="stylesheet" href="./assets/css/reset.css">
+    <link rel="stylesheet" href="./assets/css/style.css">
+</head>
+<body>
+    <main>
+        <h1>Acerte o número secreto</h1>
+
+        <h3>O número secreto está entre <span id="menor-valor"></span> e <span id="maior-valor"></span></h3>
+
+        <div id="chute" class="mensagem">
+            <!-- <div>Você disse:</div> 
+            
+            <span class="box">20</span>
+
+            <div>O número secreto é maior <i class="fa-solid fa-up-long"></i></div> -->
+        </div>
+    </main>
+
+    <script src="./assets/app/sortearNumero.js"></script>
+    <script src="./assets/app/reconhecimentoDeVoz.js"></script>
+    <script src="./assets/app/validacao.js"></script>
+</body>
+</html>