diff --git a/app.js b/app.js index 21533c0..664cb5d 100644 --- 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 = `

${firstNumber}

`; + state.correctAnswer = random1 + random2; -let secondary = document.getElementById('secondary-number'); - secondary.innerHTML = `

${secondNumber}

` + // 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); } - }); \ No newline at end of file + +// 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(); \ No newline at end of file diff --git a/app2.js b/app2.js new file mode 100644 index 0000000..1bbe72e --- /dev/null +++ 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 = `

${firstNumber}

`; + +let secondary = document.getElementById('secondary-number'); + secondary.innerHTML = `

${secondNumber}

` + + +//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() + +} + }); \ No newline at end of file diff --git a/index.html b/index.html index 66ae07b..b712de7 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ - + + @@ -7,6 +8,7 @@ Document +
7
@@ -18,8 +20,22 @@
-
+ + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 3d6c3b6..87308c2 100644 --- 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; +} \ No newline at end of file