Inicio

README.md

@@ -0,0 +1,81 @@
+
+<p align="center"><img src="./img/portada.png" alt="vista de la página del juego" width="1000"></p>
+
+<h1>ADIVINA EL NÚMERO SECRETO :crystal_ball:</h1>
+<p align="left"><img src="https://img.shields.io/badge/STATUS-EN%20DESAROLLO-green"></p>
+
+<h2>Descripción del proyecto :bulb:</h2>
+<p>
+Juego del número secreto realizado en la Formación de Principiante en Programación de Alura-Latam.
+<br>Esta página web nos permite jugar contra el programa para adivinar un número secreto aleatorio.
+</p>
+
+<h3>Funcionalidad :wrench:</h3>
+<p>
+:small_blue_diamond: El programa elige un número aleatorio entre el 1 y el 10<br>
+<br>:small_blue_diamond: El usuario va ingresando números entre 1 y 10 hasta adivinar el número secreto
+<br>:small_blue_diamond: En cada intento el usuario recibe una pista sobre si el número secreto es mayor o menor
+<br>:small_blue_diamond: Al adivinar, el programa le comunica al usuario cuál era el número secreto y en cuántos intentos lo adivinó
+<br>:small_blue_diamond: Se agregó un botón para que al finalizar el usuario pueda comenzar una nueva partida
+
+<h3>Requisitos :clipboard:</h3>
+<p>
+:heavy_check_mark: El input solo acepta números
+<br>:heavy_check_mark: El número secreto debe ser aleatorio
+<br>:heavy_check_mark: Debe mostrar un contador de intentos
+<br>:heavy_check_mark: Incluir un botón para reiniciar el juego
+</p>
+
+<h3>Mi aporte :nail_care:</h3>
+<p>
+El ejercicio estaba enfocado a Java Script. Así que tomé el códig como base y elaboré un nuevo diseño para trabajar en la distribución de los elementos, el uso del flexbox y pantallas responsivas a distintos tamaños.
+</p>
+
+<h2>Acceso al proyecto :link:</h2>
+<br>  
+    &#9670;
+    <a href=""><img alt="Static Badge" src="https://img.shields.io/badge/GitHub_del_proyecto-indigo"></a>
+    &#9670;
+    <a href=""><img alt="Static Badge" src="https://img.shields.io/badge/GitHub_Page-indigo"></a>
+    &#9670;
+<br>
+
+<h2>Autoría :woman:</h2>
+<p>
+El proyecto fue desarrollado por Vanina Denegri en base a los diseños y el código base provistos por Alura-Latam.
+<br>
+    &#9632;
+    <a href="https://github.com/VannDennOk/"><img alt="Static Badge" src="https://img.shields.io/badge/Mi_perfil_de_GitHub-blue"></a>
+    &#9632;
+    <a href="https://www.linkedin.com/in/vaninadenegri/"><img alt="Static Badge" src="https://img.shields.io/badge/Mi_perfil_de_LinkedIn-blue"></a>
+    &#9632;
+</p>
+
+<h2>Reconocimientos :crown:</h2>
+<p>
+Links útiles y utilizados para realizar este README:
+<br>
+<br>
+    &#9679;
+    <a href="https://gist.github.com/rxaviers/7360908"><img alt="Static Badge" src="https://img.shields.io/badge/Lista_de_emojis_para_GitHub-darkslategray"></a>
+    &#9679;
+    <a href="https://shields.io"><img alt="Static Badge" src="https://img.shields.io/badge/Img Shields-darkslategray"></a>
+    &#9679;
+</p>
+
+<h2>Muestrame tu apoyo :gift_heart:</h2>
+<p> 
+Si te gustó mi proyecto podés dejarme alguna estrellita :star:
+<br>
+Mandarme algún mensaje :e-mail:
+<br>
+O seguirme en redes para comentar y compartir :bell:
+<br>
+Dame los reconocimientos correspondientes si es necesario :gift_heart:  
+</p>
+
+<h2>Notas finales :exclamation:</h2>
+<p>Estos son mis proyectos como principiante. Pongo mucho esfuerzo en descubrir cosas nuevas. Aún me quedan cosas por aprender, mejorar mis "buenas prácticas", trabajar mejor en el responsive, utilizar mejor GitHub, etc., etc., etc. Por favor, si tenés algún comentario para ayudarme a crecer lo recibiré atentamente siempre y cuando venga con respeto.</p>
+
+<h2>Licencia :warning:</h2>
+<p>Este proyecto está bajo la licencia <a href="https://opensource.org/license/MIT"><img alt="Static Badge" src="https://img.shields.io/badge/MIT-red"></a></p>

app.js

@@ -0,0 +1,80 @@
+let numeroSecreto = 0;
+let intentos = 0;
+let listaNumerosSorteados = [];
+let numeroMaximo = 10;
+
+
+
+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',`Bien! El número era ${numeroSecreto}! Acertaste en ${intentos} ${(intentos === 1) ? 'intento' : 'intentos'} ;)`);
+        document.querySelector('#reiniciar').removeAttribute('disabled','');
+        document.querySelector('#intentar').setAttribute('disabled','');
+        //document.getElementById('reiniciar').removeAttribute('disabled');
+        //document.getElementById('intentar').setAttribute('enabled');
+    } else {
+        //El usuario no acertó.
+        if (numeroDeUsuario > numeroSecreto) {
+            asignarTextoElemento('p',`Ups! El número secreto es menor! Intentá otra vez (llevas ${intentos} ${(intentos === 1) ? 'intento' : 'intentos'})`);
+        } else {
+            asignarTextoElemento('p',`Ups! El número secreto es mayor! Intentá otra vez (llevas ${intentos} ${(intentos === 1) ? 'intento' : 'intentos'})`);
+        }
+        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 salieron todos los números disponibles. Bye!');
+    } 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');
+    document.querySelector('#intentar').removeAttribute('disabled','');
+    asignarTextoElemento('p',`Ingresá un número del 1 al ${numeroMaximo}`);
+
+    numeroSecreto = generarNumeroSecreto();
+    intentos = 1;
+    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','');        
+}
+
+condicionesIniciales();

index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Adivina el número secreto</title>
+</head>
+
+<body>
+    <section class="container">
+        <div class="container__superior">
+            <img class="container__imagen" src="./img/BolaCristal.png" height="50" alt="Bola de cristal con dos manos sobre ella">
+        </div>
+
+        <div class="container__inferior">                
+            <div class="conteiner_input">
+                <p class="texto"></p>
+                <input type="number" id="valorUsuario" min="1" max="10" class="input">
+            </div>
+            <div class="chute container__botones">
+                <button onclick="verificarIntento();" class="container__boton" id="intentar" disabled>Intentar</button>
+                <button onclick="reiniciarJuego();" class="container__boton" id="reiniciar" disabled>Nuevo juego</button>
+            </div>
+        </div>
+    </section>
+
+    <script src="app.js"></script>
+
+</body>
+
+<footer>
+    <div class="footer__text">
+        <p>© Vanina Denegri | Ejercicio de formación de Alura Latam | 2024</p>
+    </div>
+    <div class="footer__social-icons">
+        <a href="https://www.linkedin.com/in/vaninadenegri/"><img src="./img/icon_linkedin.png" alt="icono linkedin" width="16"></a>
+        <a href="https://github.com/VannDennOk"><img src="./img/icon_github.png" alt="icono git hub" width="16" class="icon_github"></a>
+    </div>
+</footer>
+
+</html>