Update README.md

README.md

@@ -20,4 +20,10 @@ Un banco financiero implementó el juego, Adivina tu número, la cual consiste e
 El desarrollador implementó toda la interfaz gráfica, y así mismo la lógica del juego en el archivo index.html (Con HTML, Javascript y CSS), sin embargo el equipo de desarrollo cometió el error de no testear dicho proyecto, y lo colocaron en los servidores de producción. Para su sorpresa, al momento de que el cliente lo vió... ¡NO FUNCIONABA NADA!
 Dado a esta experiencia, el banco financiero contrató a un tester para realizar las pruebas respectivas con la finalidad de que el proyecto funcione correctamente de acuerdo a los requerimientos dados.
 ## Plan de ataque
-Como tester debes solucionar este problema en tu repositorio de github, así mismo debe presentarle al equipo de desarrollo todos los errores que fuiste encontrando y corregiendo (i.e. Una breve descripción del error y su solución respectiva). Dentro del archivo test-strategy.md, así mismo el lider del equipo recomendó a cada tester, ver la consola del navegador de web para identificar más rápido los errores del proyecto.
+Como tester debes solucionar este problema en tu repositorio de github, así mismo debe presentarle al equipo de desarrollo todos los errores que fuiste encontrando y corregiendo (i.e. Una breve descripción del error y su solución respectiva). Dentro del archivo test-strategy.md, igualmente el lider del equipo recomendó a cada tester, ver la consola del navegador de web para identificar más rápido los errores del proyecto.
+## Entregables
+Como entregables debe presentar lo siguiente:
+* El archivo index.html corregido de acuerdo a las observaciones de testeo, cabe mencionar que este archivo debe ser funcional (Al momento de abrir el proyecto, debe funcionar de acuerdo a la lógica de negocio planteado en este ejercicio).
+* El plan de ataque test-strategy.md
+## Recursos:
+* Event Target: https://developer.mozilla.org/es/docs/Web/API/EventTarget

index.html

@@ -28,7 +28,8 @@ <h1>Juego Adivina tu número</h1>
       <p>Hemos seleccionado un número aleatorío entre 1 a 100. Trata de adivinar el número, en un total de 10 turnos o menos. No te preocupes, te diremos sí el número es más alto o más bajo </p>
 
 <div class="form">
-  <label for="guessField">Ingresa el número a adivinar: </label><input type="text" id="guessField" class="guessField">
+  <label for="guessField">Ingresa el número a adivinar: </label>
+  <input type="number" id="guessField" class="guessField">
   <input type="submit" value="Ingresar el número aleatorio" class="guessSubmit">
 </div>
 
@@ -41,38 +42,44 @@ <h1>Juego Adivina tu número</h1>
 </body>
 
 <script>
-  let randomNumber = Math.random() * 10;
-
-  const ATTEMPS = 5;
+  let randomNumber = Math.floor(Math.random() * 100) + 1;
+  
+  const ATTEMPS = 10;
   const guesses = document.querySelector('.guesses');
   const lastResult = document.querySelector('.lastResult');
-  const lowOrHi = document.querySelector('lowOrHi');
+  const lowOrHi = document.querySelector('.lowOrHi');
   const guessSubmit = document.querySelector('.guessSubmit');
   const guessField = document.querySelector('.guessField');
-
+  
   let guessCount = 1;
   let resetButton;
 
   function checkGuess() {
 
-    let userGuess = guessField.value;
+    let userGuessString = guessField.value;
+    let userGuess = parseFloat(userGuessString);
+    if(!Number.isInteger(userGuess)){
+      alert("Por favor ingresar un número entero !");
+      guessField.value = '';
+      return;
+    }
     if(guessCount === 1) {
       guesses.textContent = 'Número aleatorio anterior: ';
     }
-    guesses.textContent += userGuess + ' ';
-
+    guesses.textContent += userGuess + ' - ';
+    console.log("Ingresado:", userGuess);
     if(userGuess === randomNumber) {
-      lastResult.textContent = '!!!Pérdistes!!!';
-      lastResult.style.backgroundColor = 'black';
-      lowOrHi.textContent = '';
+      lastResult.textContent = 'Felicitaciones! adivinaste el número!';
+      lastResult.style.backgroundColor = 'green';
+      lowOrHi.textContent = ' ';
       setGameOver();
     } else if(guessCount === ATTEMPS) {
-      lastResult.textContent = 'Felicitaciones! adivinaste el número!';
+      lastResult.textContent = '!!!Pérdistes!!!';
       lastResult.style.backgroundColor = 'red';
       setGameOver();
     } else {
       lastResult.textContent = 'Incorrecto! ';
-      lastResult.style.backgroundColor = 'green';
+      lastResult.style.backgroundColor = 'black';
       if(userGuess < randomNumber) {
         lowOrHi.textContent = 'El número es mayor!';
       } else if(userGuess > randomNumber) {
@@ -81,18 +88,19 @@ <h1>Juego Adivina tu número</h1>
     }
 
     guessCount++;
+
     guessField.value = '';
     guessField.focus();
   }
-  guessSubmit.addeventListener('click', checkGuess);
+  guessSubmit.addEventListener('click', checkGuess);
 
   function setGameOver() {
 	  guessField.disabled = true;
 	  guessSubmit.disabled = true;
 	  resetButton = document.createElement('button');
 	  resetButton.textContent = 'Comienza un nuevo juego';
 	  document.body.appendChild(resetButton);
-	  resetButton.addeventListener('click', resetGame);
+	  resetButton.addEventListener('click', resetGame);
   }
 
   function resetGame() {
@@ -111,7 +119,8 @@ <h1>Juego Adivina tu número</h1>
 
 	  lastResult.style.backgroundColor = 'white';
 
-	  randomNumber = Math.floor(Math.random()) + 1;
+	  randomNumber = Math.floor(Math.random() * 100) + 1;
+
   }
 </script>
 </html>

test-strategy.md

@@ -0,0 +1,38 @@
+Buenos días, he realizado el testeo al juego de adivinar el número, los hallazgos son los siguientes:
+
+1) Se encontró que el tipo de input es de text, lo que se quiere ingresar es un numero entero, por lo que se cambio de tipo "text" a tipo "number".
+
+    Solución: Linea 32, <input type="number" id="guessField" class="guessField">
+
+2) Se encontro que la variable ATTEMPS, es quíen posee el número máximo de intentos, por lo que se cambió a 10 intentos máximos.
+    Solución: Línea 47,  const ATTEMPS = 10;
+
+3) En el apartado de la declaración de las constantes, precisamente en la constante lowOrHi, se observó la falta de un "."(punto), por lo que no realizaba el evento de cambiar el texto y no dejaba proceder con el resto.
+    Solución: Línea 50, const lowOrHi = document.querySelector('.lowOrHi');
+
+4) El evento Click esta mal escrito, precisamente en ".addEventListener", la letra E de "Event" estaba escrito en minúscula, por lo que se corrigió su sintaxis.
+    Solución: Línea 95,  guessSubmit.addEventListener('click', checkGuess);
+
+5) El número aleatorio se realizaba del 0 al 9, dicho número era decimal, se requiere que el número sea del 1 al 100, perteneciendo al grupo de enteros, por ello se agregó la función "Math.floor" lo que realiza la función, es redondear el número decimal hacia abajo, de esta manera conseguir un número entero, agregando una adición para que no posea el número cero.
+    Solución:  Línea 45, let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+6) La variable userGuess se esta obtiniendo correctamente, con la diferencia que el tipo de dato almacenado es de tipo String, por lo que se realizó una conversión para obtener el dato en tipo númerico con punto flotante, de esta manera el dato podrá ingrese a las condicionales If.
+    Solución: Línea 59-60
+                let userGuessString = guessField.value;
+                let userGuess = parseFloat(userGuessString);
+
+7) En el apartado de la lógica del juego (En los condicionales "If"), se tiene inverso las condiciones, debido a que al evaluar el número ingresado por el usuario, al ser igual que el random debe de indicar que Ganó, pero se encontro que idicaba al usuario que perdio, de esta misma forma al evaluar el número de intentos.
+    Solución: Línea 71-79
+
+8) El evento Click esta mal escrito, precisamente en ".addEventListener", la letra E de "Event" estaba escrito en minúscula, por lo que se corrigió su sintaxis.
+    Solución: Línea 103,  resetButton.addEventListener('click', resetGame);
+
+9) El número aleatorio se realizaba unicamente el cero, luego se le sumaba un 1, por tal razón el número aleatorio siempre era 1, por ello se agregó la función "Math.floor" lo que realiza la función, es redondear el número decimal hacia abajo, de esta manera conseguir un número entero, agregando una adición para que no posea un cero.
+    Solución:  Línea 122, randomNumber = Math.floor(Math.random() * 100) + 1;
+
+10) En la concatenación de los números ingresados, se agregó un guión para separar visualmente los numeros ya ingresados.
+    Solución: Línea 69.
+
+11) Realizar un condicional "If" antes de comprobar si igual al número random, con el objetivo de capturar el número y verificar si es sistinto de entero, si es distinto indicar al usuario que el número a ingresar debe ser entero, luego retornar a una nueva captura de número ingresado.
+    Solución: Línea 62-66.
+    Recomendación: En la Línea 60, Se puede realizar el cambio en la conversión del número ingresado, en vez de utilizar "parseFloat(userGuessString)", se puede utilizar "parseInt(userGuessString);", de esta manera se puede quitar la condicional "If" de las líneas 62-66, ya que el número se convertirá en número entero, sin importar si el usuario ingresa un decimal.