diff --git a/app.js b/app.js new file mode 100644 index 0000000..0fe73be --- /dev/null +++ b/app.js @@ -0,0 +1,79 @@ +let numeroSecreto = 0; +let intentos = 0; +let listaNumerosSorteados = []; +let numeroMaximo = 10; +let intentosMax = 5; + + +function asignarTextoElemento(elemento, texto) { + let elementoHTML = document.querySelector(elemento); + elementoHTML.innerHTML = texto; + return; +} + +function verificarIntento() { + let numeroDeUsuario = parseInt(document.getElementById('valorUsuario').value); + + if (numeroDeUsuario === numeroSecreto) { + asignarTextoElemento('p',`Acertaste el número en ${intentos} ${(intentos === 1) ? 'intento' : 'intentos'}`); + document.getElementById('reiniciar').removeAttribute('disabled'); + } else { + //El usuario no acertó. + if (numeroDeUsuario > numeroSecreto) { + asignarTextoElemento('p','El número secreto es menor'); + } else { + asignarTextoElemento('p','El número secreto es mayor'); + } + intentos++; + limpiarCaja(); + } + return; +} + +function limpiarCaja() { + document.querySelector('#valorUsuario').value = ''; +} + +function generarNumeroSecreto() { + let numeroGenerado = Math.floor(Math.random()*numeroMaximo)+1; + + // console.log(numeroGenerado); + // console.log(listaNumerosSorteados); + //Si ya sorteamos todos los números + if (listaNumerosSorteados.length == numeroMaximo) { + asignarTextoElemento('p','Ya se sortearon todos los números posibles'); + } else { + //Si el numero generado está incluido en la lista + if (listaNumerosSorteados.includes(numeroGenerado)) { + return generarNumeroSecreto(); + } else { + listaNumerosSorteados.push(numeroGenerado); + return numeroGenerado; + } + } +} + +function condicionesIniciales() { + asignarTextoElemento('h1','Juego del número secreto!'); + asignarTextoElemento('p',`Indica un número del 1 al ${numeroMaximo}`); + numeroSecreto = generarNumeroSecreto(); + intentos = 1; + if (listaNumerosSorteados.length === intentosMax) { + listaNumerosSorteados = []; + } + // console.log(numeroSecreto); +} + +function reiniciarJuego() { + //limpiar caja + limpiarCaja(); + //Indicar mensaje de intervalo de números + //Generar el número aleatorio + //Inicializar el número intentos + condicionesIniciales(); + //Deshabilitar el botón de nuevo juego + document.querySelector('#reiniciar').setAttribute('disabled','true'); + +} + +condicionesIniciales(); \ No newline at end of file diff --git a/img/Ruido.png b/img/Ruido.png new file mode 100644 index 0000000..342d06e Binary files /dev/null and b/img/Ruido.png differ diff --git a/img/bg.png b/img/bg.png new file mode 100644 index 0000000..1818e0a Binary files /dev/null and b/img/bg.png differ diff --git a/img/code.png b/img/code.png new file mode 100644 index 0000000..47a57c9 Binary files /dev/null and b/img/code.png differ diff --git a/img/ia.png b/img/ia.png new file mode 100644 index 0000000..e951bfe Binary files /dev/null and b/img/ia.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8a01bcc --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="pt-br"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap" + rel="stylesheet"> + <link rel="stylesheet" href="style.css"> + <title>JS Game</title> +</head> + +<body> + + <div class="container"> + <div class="container__contenido"> + <div class="container__informaciones"> + <div class="container__texto"> + <h1></h1> + <p class="texto__parrafo"></p> + </div> + <input type="number" id="valorUsuario" min="1" max="10" class="container__input"> + <div class="chute container__botones"> + <button onclick="verificarIntento();" class="container__boton">Intentar</button> + <button onclick="reiniciarJuego();" class="container__boton" id="reiniciar" disabled>Nuevo juego</button> + </div> + </div> + <img src="./img/ia.png" alt="Una persona mirando a la izquierda" class="container__imagen-persona" /> + </div> + </div> + + + + <script src="app.js"></script> + +</body> + +</html> \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ac1a45b --- /dev/null +++ b/style.css @@ -0,0 +1,111 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + color: white; +} + +body { + background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + + +body::before { + background-image: url("img/code.png"); + background-repeat: no-repeat; + background-position: right; + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + opacity: 0.4; +} + +.container { + width: 1200px; + height: 600px; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 24px; + border: 1px solid #1875E8; + box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15); + background-image: url("img/Ruido.png"); + background-size: 100% 100%; + position: relative; +} + + +.container__contenido { + display: flex; + align-items: center; + position: absolute; + bottom: 0; +} + +.container__informaciones { + flex: 1; + padding: 3rem; +} + +.container__boton { + border-radius: 16px; + background: #1875E8; + padding: 16px 24px; + width: 100%; + font-size: 24px; + font-weight: 700; + border: none; + margin-top: 2rem; +} + +.container__boton:disabled { + background: #898989; +} + +.container__texto { + margin: 16px 0 16px 0; +} + +.container__texto-azul { + color: #1875E8; +} + +.container__input { + width: 100%; + height: 72px; + border-radius: 16px; + background-color: #FFF; + border: none; + color: #1875E8; + padding: 2rem; + font-size: 24px; + font-weight: 700; + font-family: 'Inter', sans-serif; +} + +.container__botones { + display: flex; + gap: 2em; +} + +h1 { + font-family: 'Chakra Petch', sans-serif; + font-size: 72px; + padding-bottom: 3rem; +} + +p, +button { + font-family: 'Inter', sans-serif; +} + +.texto__parrafo { + font-size: 32px; + font-weight: 400; +} \ No newline at end of file