From 8a1aafc39b8c942b7bf129cfe22089a50466ca6f Mon Sep 17 00:00:00 2001 From: nexus122 Date: Mon, 28 Mar 2022 10:20:56 +0200 Subject: [PATCH 1/4] Ejercicio Solucionado --- app.js | 75 +++++++++++++++++++++++++++++++++++++----------------- app2.js | 32 +++++++++++++++++++++++ index.html | 20 +++++++++++++-- style.css | 37 +++++++++++++++++++++++++-- 4 files changed, 137 insertions(+), 27 deletions(-) create mode 100644 app2.js diff --git a/app.js b/app.js index 21533c0..bcba286 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 = Math.floor(Math.random() * 10 + 1); + let random2 = Math.floor(Math.random() * 10 + 1); + + 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 From 11700019cce338b0ac4d42e23188499473b685d6 Mon Sep 17 00:00:00 2001 From: nexus122 Date: Mon, 28 Mar 2022 10:23:09 +0200 Subject: [PATCH 2/4] libreria chance.js --- app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index bcba286..664cb5d 100644 --- a/app.js +++ b/app.js @@ -10,8 +10,8 @@ let state = { // Generamos dos numeros aleatorios y generamos una respuesta a la suma de esos numeros. function generateRandom(){ - let random1 = Math.floor(Math.random() * 10 + 1); - let random2 = Math.floor(Math.random() * 10 + 1); + let random1 = chance.integer({ min: 1, max: 10 }); + let random2 = chance.integer({ min: 1, max: 10 }); state.primaryNumber.text(random1); state.secondaryNumber.text(random2); From fe67b794822344f9ce0b2ce686aaf62a3478fce8 Mon Sep 17 00:00:00 2001 From: nexus122 Date: Wed, 6 Apr 2022 13:38:45 +0200 Subject: [PATCH 3/4] Subir los cambios en la rama Vue --- index.html | 36 ++++++++++++++++++------------------ style.css | 9 ++++++--- vue.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 55 insertions(+), 21 deletions(-) create mode 100644 vue.js diff --git a/index.html b/index.html index b712de7..4bdd284 100644 --- a/index.html +++ b/index.html @@ -10,31 +10,31 @@ -
-
7
-
+
-
10
-
=
-
- +
+
+
{{number1}}
+
+
+
{{number2}}
+
=
+
+ +
+
+ +
-
- -
-
-
+
{{alert}}
+ -
+ + - - - + - + diff --git a/style.css b/style.css index 87308c2..62cae68 100644 --- a/style.css +++ b/style.css @@ -5,16 +5,18 @@ body{ font-family: 'Roboto', sans-serif; } -#canvas{ - box-sizing:border-box; +#canvas { + box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: yellow; width: 700px; height: 300px; - margin: 50px auto; + margin: auto; + margin-bottom: 1em; border-radius: 1em; + margin-top: 5em; } #primary-number, #secondary-number{ @@ -55,6 +57,7 @@ button{ background: red; color: white; border: 1px solid lightgrey; + cursor: pointer; } /* Valido invalido */ diff --git a/vue.js b/vue.js new file mode 100644 index 0000000..6074517 --- /dev/null +++ b/vue.js @@ -0,0 +1,31 @@ +// Aplicaci贸n Vue +Vue.createApp({ + data() { + return{ + number1: 0, + number2: 0, + result: 0, + alert:'', + alertClass:'' + } + }, + methods: { + generateRandom(){ + this.number1 = chance.integer({ min: 1, max: 10 }); + this.number2 = chance.integer({ min: 1, max: 10 }); + }, + checkTheAnswer(){ + if(this.result == this.number1 + this.number2){ + this.alert = "馃憤 El resultado es correcto"; + this.alertClass = "valid"; + this.generateRandom(); + }else{ + this.alert = "馃憥 El resultado es incorrecto"; + this.alertClass = "invalid"; + } + } + }, + mounted(){ + this.generateRandom(); + } +}).mount('#app'); \ No newline at end of file From a4eac3a8266032c97c85359fa5388a3c77fb058e Mon Sep 17 00:00:00 2001 From: nexus122 Date: Wed, 6 Apr 2022 13:39:24 +0200 Subject: [PATCH 4/4] Revert "Subir los cambios en la rama Vue" This reverts commit fe67b794822344f9ce0b2ce686aaf62a3478fce8. --- index.html | 36 ++++++++++++++++++------------------ style.css | 9 +++------ vue.js | 31 ------------------------------- 3 files changed, 21 insertions(+), 55 deletions(-) delete mode 100644 vue.js diff --git a/index.html b/index.html index 4bdd284..b712de7 100644 --- a/index.html +++ b/index.html @@ -10,31 +10,31 @@ -
-
-
{{number1}}
-
+
-
{{number2}}
-
=
-
- -
-
- -
+
+
7
+
+
+
10
+
=
+
+
+
+ +
+
-
{{alert}}
-
+
- - +
+ + - + - + diff --git a/style.css b/style.css index 62cae68..87308c2 100644 --- a/style.css +++ b/style.css @@ -5,18 +5,16 @@ body{ font-family: 'Roboto', sans-serif; } -#canvas { - box-sizing: border-box; +#canvas{ + box-sizing:border-box; display: flex; align-items: center; justify-content: center; background: yellow; width: 700px; height: 300px; - margin: auto; - margin-bottom: 1em; + margin: 50px auto; border-radius: 1em; - margin-top: 5em; } #primary-number, #secondary-number{ @@ -57,7 +55,6 @@ button{ background: red; color: white; border: 1px solid lightgrey; - cursor: pointer; } /* Valido invalido */ diff --git a/vue.js b/vue.js deleted file mode 100644 index 6074517..0000000 --- a/vue.js +++ /dev/null @@ -1,31 +0,0 @@ -// Aplicaci贸n Vue -Vue.createApp({ - data() { - return{ - number1: 0, - number2: 0, - result: 0, - alert:'', - alertClass:'' - } - }, - methods: { - generateRandom(){ - this.number1 = chance.integer({ min: 1, max: 10 }); - this.number2 = chance.integer({ min: 1, max: 10 }); - }, - checkTheAnswer(){ - if(this.result == this.number1 + this.number2){ - this.alert = "馃憤 El resultado es correcto"; - this.alertClass = "valid"; - this.generateRandom(); - }else{ - this.alert = "馃憥 El resultado es incorrecto"; - this.alertClass = "invalid"; - } - } - }, - mounted(){ - this.generateRandom(); - } -}).mount('#app'); \ No newline at end of file