JS-Beginners · nexus122 · Mar 28, 2022 · Mar 28, 2022 · Apr 6, 2022 · Apr 6, 2022
diff --git a/app.js b/app.js
@@ -1,32 +1,61 @@
-//generate random numbers
-let firstNumber = parseInt(Math.random()*10);
-let secondNumber = parseInt(Math.random()*10);
+// Estado de la aplicación.
+let state = {
+    primaryNumber: $('#primary-number'),
+    secondaryNumber: $('#secondary-number'),
+    resultado: $('#guess'),
+    button: $('#btn'),
+    alert: $('.alert'),
+    correctAnswer: 0,    
+}
 
-//get the total
-let total = firstNumber + secondNumber;
+// Generamos dos numeros aleatorios y generamos una respuesta a la suma de esos numeros.
+function generateRandom(){
+    let random1 = chance.integer({ min: 1, max: 10 });
+    let random2 = chance.integer({ min: 1, max: 10 });
+
+    state.primaryNumber.text(random1);
+    state.secondaryNumber.text(random2);
 
-//display numbers on the canvas
-let primary = document.getElementById('primary-number');
-    primary.innerHTML = `<p>${firstNumber}</p>`;
+    state.correctAnswer = random1 + random2;
 
-let secondary = document.getElementById('secondary-number');
-    secondary.innerHTML = `<p>${secondNumber}</p>`
+    // Ocultamos el color del input
+    state.resultado.removeClass("invalid");
+    state.resultado.removeClass("valid"); 
 
+}
 
-//get guess from user
-let button = document.getElementById('btn')
+// Mensaje que aparece y desaparece.
+function toast(message, valid){
+    state.alert.show(1000);
+    state.alert.html(message);
 
-button.addEventListener('click', function(){
+    if(valid){
+        state.alert.removeClass("invalid");
+        state.alert.addClass("valid");
+    }else{
+        state.alert.removeClass("valid");
+        state.alert.addClass("invalid");
+    }
 
-let guess = document.getElementById('guess').value;
-    guess = Number(guess);
-//check answer
-if (guess === total){
-    alert('Correct');
-    window.location.reload()
-} else {
-    alert('Sorry. Incorrect. The correct answer was ' + total + '.')
-    window.location.reload()
+    setTimeout(function(){state.alert.hide(1000)}, 1500);
 
 }
-    });
+
+// Controlamos que el usuario haga click en el btn check.
+state.button.click(function(){
+    if(state.resultado.val() == state.correctAnswer){
+        state.resultado.removeClass("invalid")
+        state.resultado.addClass("valid");   
+        toast(`👍 El resultado es correcto`, true);     
+        generateRandom();
+    }else{
+        state.resultado.removeClass("valid")
+        state.resultado.addClass("invalid");
+        toast(`👎 El resultado es incorrecto`, false);
+    }
+
+})
+
+
+// Generamos un numero aleatorio al inicio
+generateRandom();
diff --git a/app2.js b/app2.js
@@ -0,0 +1,32 @@
+//generate random numbers
+let firstNumber = parseInt(Math.random()*10);
+let secondNumber = parseInt(Math.random()*10);
+
+//get the total
+let total = firstNumber + secondNumber;
+
+//display numbers on the canvas
+let primary = document.getElementById('primary-number');
+    primary.innerHTML = `<p>${firstNumber}</p>`;
+
+let secondary = document.getElementById('secondary-number');
+    secondary.innerHTML = `<p>${secondNumber}</p>`
+
+
+//get guess from user
+let button = document.getElementById('btn')
+
+button.addEventListener('click', function(){
+
+let guess = document.getElementById('guess').value;
+    guess = Number(guess);
+//check answer
+if (guess === total){
+    alert('Correct');
+    window.location.reload()
+} else {
+    alert('Sorry. Incorrect. The correct answer was ' + total + '.')
+    window.location.reload()
+
+}
+    });
diff --git a/index.html b/index.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css">
     <title>Document</title>
 </head>
+
 <body>
     <div id="canvas">
         <div id="primary-number">7</div>
@@ -18,8 +20,22 @@
         </div>
         <div>
             <button id="btn">check</button>
-        </div>
+        </div>        
+    </div>
+
+    <div class="alert">
+
     </div>
+
+    <!-- Jquery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
+        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
+    <!-- Chance numeros aleatorios js -->
+    <script src="https://chancejs.com/chance.js"></script>
+
+    <!-- Js con la solución -->
     <script src="app.js"></script>
+
 </body>
+
 </html>
diff --git a/style.css b/style.css
@@ -1,5 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
 body{
     background: lightskyblue;
+    font-family: 'Roboto', sans-serif;
 }
 
 #canvas{
@@ -11,6 +14,7 @@ body{
     width: 700px;
     height: 300px;
     margin: 50px auto;
+    border-radius: 1em;
 }
 
 #primary-number, #secondary-number{
@@ -37,8 +41,8 @@ body{
     font-size: 40px;
     padding: 5px;
 }
-input{
-    border: solid 2px cyan;
+
+input{    
     width: 150px;
     height: 30px;
     padding-left: 25px;
@@ -53,3 +57,32 @@ button{
     border: 1px solid lightgrey;
 }
 
+/* Valido invalido */
+.valid{
+    box-shadow: 1px 1px 1px 1px rgba(0,255,0,0.4);            
+}
+
+.invalid{
+    box-shadow: 1px 1px 1px 1px rgba(255,0,0,0.4);
+}
+
+.alert {
+    display: block;
+    max-width: 700px;
+    min-height: 100px;    
+    margin: 0 auto;
+    font-size: 2em;
+    padding: 1em;
+    box-sizing: border-box;
+    border-radius: 1em;
+}
+
+.alert.valid{
+    background: green;
+    color: white;
+}
+
+.alert.invalid{
+    background-color: red;
+    color: white;
+}