Merge pull request #31 from josemoracard/jose3-04-hide-on-click

alesanchezr · web-flow · commit 678ced062223 · 2023-11-16T15:46:59.000-04:00
exercises 04-hide-on-click a 08-event-target
diff --git a/exercises/01-alert-on-click/solution.hide.html b/exercises/01-alert-on-click/solution.hide.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>4Geeks Academy</title>
+	</head>
+	<body>
+		<button onclick="myClickFunction();">Click me</button>
+		and
+		<button onclick="myClickFunction();" id="button2">Don't click me</button>
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/exercises/02-on-click-Hello-World/solution.hide.html b/exercises/02-on-click-Hello-World/solution.hide.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>4Geeks Academy</title>
+	</head>
+	<body>
+		<input onclick="myClickFunction();" id="hello" type="button" value="Press to show 'Hello world'" />
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/exercises/02-on-click-Hello-World/solution.hide.js b/exercises/02-on-click-Hello-World/solution.hide.js
@@ -0,0 +1,4 @@
+// Declare your function here
+function myClickFunction() {
+	alert("Hello World");
+};
diff --git a/exercises/03-sum-values/solution.hide.js b/exercises/03-sum-values/solution.hide.js
@@ -0,0 +1,11 @@
+// Adding the function to the window makes it globally available
+window.calculateSumListener = function() {
+	// Return the value of the input #firstNumber
+	let stringA = document.getElementById("firstNumber").value;
+	// Return the value of the input #secondNumber
+	let stringB = document.getElementById("secondNumber").value;
+	// Your code here
+	let sum = parseInt(stringA) + parseInt(stringB);
+   	let resultInput = document.getElementById("resultNumber");
+   	resultInput.value = sum;
+};
diff --git a/exercises/04-hide-on-click/README.es.md b/exercises/04-hide-on-click/README.es.md
@@ -1,4 +1,4 @@
-# `04` Oculta onclick
+# `04` Hide onclick
 
 ## 📝 Instrucciones:
 
@@ -7,4 +7,4 @@
 
 ## 💡 Pista:
 
-Para ocultar un elemento en javascript debes usar **element.style.display**
++ Para ocultar un elemento con JavaScript debes usar `element.style.display`, y establece el valor correcto.
diff --git a/exercises/04-hide-on-click/README.md b/exercises/04-hide-on-click/README.md
@@ -6,4 +6,4 @@
 
 ## 💡 Hint:
 
-To hide an element with javascript your need to do **element.style.display**
++ To hide an element with JavaScript you need to do `element.style.display`, then set it with the correct value.
diff --git a/exercises/04-hide-on-click/index.js b/exercises/04-hide-on-click/index.js
@@ -1,4 +1,4 @@
-window.myEventListener = function myEventListener()
-{
-	//your code here
+window.myEventListener = function myEventListener() {
+	// Your code here
+	
 }
diff --git a/exercises/04-hide-on-click/solution.hide.js b/exercises/04-hide-on-click/solution.hide.js
@@ -0,0 +1,5 @@
+window.myEventListener = function myEventListener() {
+	// Your code here
+	let firstDiv = document.querySelector('#firstDiv')
+	firstDiv.style.display = "none"
+}
diff --git a/exercises/05-the-load-event/README.es.md b/exercises/05-the-load-event/README.es.md
@@ -1,13 +1,13 @@
-# `05` El evento load 
+# `05` The load Event
 
 Es una muy buena práctica esperar a que el navegador termine de cargar la página antes de iniciar el flujo de tu sitio web/aplicación, para hacerlo, usamos el evento LOAD.
 
 ## 📝 Instrucciones:
 
-1. Crea una función llamada `loadListener` que escuche al evento `load` y luego muestre una alerta con el string "loading finished..." cuando se la llame.
+1. Crea una función llamada `loadListener` que escuche al evento `load` y luego muestre una alerta con el string "Loading finished..." cuando se la llame.
 
-## 💡 Pista:
+## 💡 Pistas:
 
 - El listener debe asignarse al body.
 
-- Así se añade un listener de evento a un evento load: http://www.w3schools.com/jsref/event_onload.asp
+- Así se añade un listener de evento a un evento load: http://www.w3schools.com/jsref/event_onload.asp
diff --git a/exercises/05-the-load-event/README.md b/exercises/05-the-load-event/README.md
@@ -2,12 +2,12 @@
 
 It is a very good practice to wait for the browser to finish loading the page before starting the flow of your website/application, to do so, we use the LOAD event.
 
-## 📝 Instructions
+## 📝 Instructions:
 
-1. Create a function called `loadListener` that listens to the `load` event and alerts the string "loading finished..." when called.
+1. Create a function called `loadListener` that listens to the `load` event and triggers an alert with the string "Loading finished..." when called.
 
-## 💡 Hint:
+## 💡 Hints:
 
 - The listener has to be assigned to the body.
 
-- Here is how to add the event listener to the load event: http://www.w3schools.com/jsref/event_onload.asp
+- Here is how to add the event listener to the load event: http://www.w3schools.com/jsref/event_onload.asp
diff --git a/exercises/05-the-load-event/index.html b/exercises/05-the-load-event/index.html
@@ -7,7 +7,7 @@
 	</head>
 
 	<body>
-		<p>Hello! Please alert "loading finished..." when this website finally loads, use the window.onload</p>
+		<p>Hello! Please alert "Loading finished..." when this website finally loads.</p>
 		<script src="index.js"></script>
 	</body>
 </html>
diff --git a/exercises/05-the-load-event/index.js b/exercises/05-the-load-event/index.js
@@ -1 +1 @@
-// your function goes here
+// Your function goes here
diff --git a/exercises/05-the-load-event/solution.hide.html b/exercises/05-the-load-event/solution.hide.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>4Geeks Academy</title>
+	</head>
+
+	<body onload="loadListener()">
+		<p>Hello! Please alert "Loading finished..." when this website finally loads.</p>
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/exercises/05-the-load-event/solution.hide.js b/exercises/05-the-load-event/solution.hide.js
@@ -0,0 +1,4 @@
+// Your function goes here
+function loadListener() {
+    alert("Loading finished...")
+}
diff --git a/exercises/06-add-listener-with-js/README.es.md b/exercises/06-add-listener-with-js/README.es.md
@@ -1,22 +1,21 @@
-# `06` Añade Listener con JS
+# `06` Add Listener With JS
 
 A veces debemos añadir listener de eventos DURANTE EL TIEMPO DE EJECUCIÓN.
 
 La mejor forma de hacer eso es usando una función `addEventListener` a cualquier elemento del DOM que queramos empezar a escuchar.
 
 ## 📝 Instrucciones:
 
-Ahora el código está escuchando la ejecución y muestra una alerta cuando el sitio web termina de cargar. 
+Ahora mismo, el código está escuchando la ejecución y muestra una alerta cuando el sitio web termina de cargar. 
 
-1. Escribe el código necesario para que se muestre una alerta que diga "wuju" cada vez que le des clic al botón verde.
+1. Escribe el código necesario para que se muestre una alerta que diga "woohoo!" cada vez que le des clic al botón verde.
 
-## 💡 Pista:
+## 💡 Pistas:
 
 - Aquí está la documentación para añadir un listener de evento(addEventListener): https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
 
 - Usa la función `alert()`.
 
-### Resultado esperado:
-
+## 💻 Resultado esperado:
 
 ![06-add-listener-with-js](../../.learn/assets/a1mgdPD.gif?raw=true)
diff --git a/exercises/06-add-listener-with-js/README.md b/exercises/06-add-listener-with-js/README.md
@@ -6,16 +6,16 @@ The best way to do that is using the `addEventListener` function on any DOM elem
 
 ## 📝 Instructions:
 
-Right now this code is listening for the load and it prompts an alert when the website finishes loading. 
+Right now, this code is listening for the load, and it prompts an alert when the website finishes loading. 
 
 1. Write the necessary code to alert "woohoo!" whenever the green button is clicked.
 
-## 💡 Hint:
+## 💡 Hints:
 
 - Here is the documentation for addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
 
 - Use the function `alert()`.
 
-### Expexted result:
+## 💻 Expected result:
 
 ![06-add-listener-with-js](../../.learn/assets/a1mgdPD.gif?raw=true)
diff --git a/exercises/06-add-listener-with-js/index.html b/exercises/06-add-listener-with-js/index.html
@@ -5,14 +5,18 @@
 		<meta name="viewport" content="width=device-width" />
 		<title>4Geeks Academy</title>
 		<style>
+           		 #theGreen {
+              	 		background: green; 
+               		 	color: white
+         	  	 }
 			#theGreen:hover {
 				background: red;
 			}
 		</style>
 	</head>
 
 	<body>
-		<button id="theGreen" style="background: green; color: white;">I am a green button</button>
+		<button id="theGreen">I am a green button</button>
 		<script src="index.js"></script>
 	</body>
 </html>
diff --git a/exercises/06-add-listener-with-js/index.js b/exercises/06-add-listener-with-js/index.js
@@ -1,6 +1,7 @@
 window.onload = function myLoadFunction() {
 	alert("The website just finished loading!");
-	//some code here
+	// Some code here
+	
 };
 
-//the listener function here
+// The listener function here
diff --git a/exercises/06-add-listener-with-js/solution.hide.js b/exercises/06-add-listener-with-js/solution.hide.js
@@ -0,0 +1,11 @@
+window.onload = function myLoadFunction() {
+	alert("The website just finished loading!");
+	// Some code here
+	const greenButton = document.getElementById("theGreen");
+	greenButton.addEventListener("click", myClickFunction);
+};
+
+// The listener function here
+function myClickFunction() {
+	alert("woohoo!");
+};
diff --git a/exercises/07-count-on-click/README.es.md b/exercises/07-count-on-click/README.es.md
@@ -1,7 +1,7 @@
-# `07` Contar onclick
+# `07` Count onclick
 
-Si tienes **variables globales**, puedes cambiar su valor durante el tiempo de ejecución usando los handlers de eventos. Por ejemplo, este código incrementa el valor de la variable counter cada vez que el usuario hace clic en el botón #increase.
+Si tienes **variables globales**, puedes cambiar su valor durante el tiempo de ejecución usando los handlers de eventos. Por ejemplo, este código incrementa el valor de la variable `counter` cada vez que el usuario hace clic en el botón **Increase**.
 
-## 📝 Instrucciones
+## 📝 Instrucciones:
 
-1. Crea un botón que disminuya con una función handler de evento. La función debería disminuir la variable counter y actualizar la pantalla.
+1. Crea un botón que disminuya con una función handler de evento. La función debería disminuir la variable `counter` y actualizar el número en pantalla.
diff --git a/exercises/07-count-on-click/README.md b/exercises/07-count-on-click/README.md
@@ -1,7 +1,7 @@
 # `07` Count onclick
 
-If you have global variables, you can change their value during runtime using event handlers. For example, this code is increasing the value of the variable counter every time the user clicks on the #increase button.
+If you have global variables, you can change their value during runtime using event handlers. For example, this code is increasing the value of the `counter` variable every time the user clicks on the **Increase** button.
 
-## 📝 Instructions
+## 📝 Instructions:
 
-1. Create a decrease button with an event handler function. The function should decrease the counter variable and update the screen.
+1. Create a decrease button with an event handler function. The function should decrease the `counter` variable and update the number on screen.
diff --git a/exercises/07-count-on-click/index.js b/exercises/07-count-on-click/index.js
@@ -1,17 +1,20 @@
-//This is a global variable
-var counter = 0;
+// This is a global variable
+let counter = 0;
 
 window.onload = function loadFunction()
 {
-	//here I set the screen to the initial value when the website is fully loaded.
+	// Here I set the screen to the initial value when the website is fully loaded
 	document.getElementById('screen').innerHTML = "The counter value is "+counter;
 }
 
-//called when the user clicks
+// Called when the user clicks
 window.increaseCounter = function increaseCounter()
 {
-	//increase the global counter in one
+	// Increase the global counter by one
 	counter++;
-	//update the screen with the new value
+	// Update the screen with the new value
 	document.getElementById('screen').innerHTML = "The counter value is "+counter;
 }
+
+// Your code here
+
diff --git a/exercises/07-count-on-click/solution.hide.html b/exercises/07-count-on-click/solution.hide.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>4Geeks Academy</title>
+	</head>
+
+	<body>
+		<h1 id="screen">Loading...</h1>
+		<button onclick="increaseCounter();">Increase</button>
+		<button onclick="decreaseCounter();">Decrease</button>
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/exercises/07-count-on-click/solution.hide.js b/exercises/07-count-on-click/solution.hide.js
@@ -0,0 +1,26 @@
+// This is a global variable
+let counter = 0;
+
+window.onload = function loadFunction()
+{
+	// Here I set the screen to the initial value when the website is fully loaded
+	document.getElementById('screen').innerHTML = "The counter value is "+counter;
+}
+
+// Called when the user clicks
+window.increaseCounter = function increaseCounter()
+{
+	// Increase the global counter by one
+	counter++;
+	// Update the screen with the new value
+	document.getElementById('screen').innerHTML = "The counter value is "+counter;
+}
+
+// Your code here
+window.decreaseCounter = function decreaseCounter() 
+{
+   	// Decrease the global counter by one
+   	counter--;
+   	// Update the screen with the new value
+	document.getElementById('screen').innerHTML = "The counter value is "+counter;
+}
diff --git a/exercises/07.1-change-turn-on-click/README.es.md b/exercises/07.1-change-turn-on-click/README.es.md
@@ -1,14 +1,13 @@
-# `07.1` Cambio de Turno on Click
+# `07.1` Change Turn on Click
 
 Digamos que quieres crear una herramienta para cambiar de turno entre dos jugadores: Mario y Juan.
 
-Para eso hemos creado la variable global `currentUser`(jugador actual) y guardado el nombre del jugador actual en esa variable. Cada vez que haces clic en el botón, la variable cambia su valor a la del otro jugador.
+Para eso hemos creado la variable global `currentUser` (jugador actual) y guardado el nombre del jugador actual en esa variable. Cada vez que haces clic en el botón, la variable cambia su valor a la del otro jugador.
 
-
-## 📝 Instructiones:
+## 📝 Instrucciones:
 
 1. Cambia el código de la función `turnChanger` para añadir un tercer jugador llamado "Josh".
 
-## 💡 Pista
+## 💡 Pista:
 
-Añade una condición 'else if' ya sea para Juan o Josh y cambia el valor de la variable `currentUser` consecuentemente.
++ Añade una condición `else if` ya sea para Juan o Josh y cambia el valor de la variable `currentUser` consecuentemente.
diff --git a/exercises/07.1-change-turn-on-click/README.md b/exercises/07.1-change-turn-on-click/README.md
@@ -1,13 +1,13 @@
-# `07.1` Chance Turn on Click
+# `07.1` Change Turn on Click
 
 Let's say that you want to create a turn-changer tool to switch turns between two players: Mario and Juan.
 
-For that, we have created the global variable `currentUser` and stored the current player name in that variable, and updated the value of that variable on each button click to the other player's name.
+For that, we have created the global variable `currentUser` and stored the current player name in that variable, then updated the value of that variable every time the button is clicked to the other player's name.
 
 ## 📝 Instructions:
 
-1. Change the code of the `turnChanger `function to add a third player called "Josh"
+1. Change the code of the `turnChanger` function to add a third player called "Josh"
 
-## 💡 Hint
+## 💡 Hint:
 
-Add an 'else if 'condition asking for either Juan or Josh and change the value of `currentUser` variable accordingly.
++ Add an `else if` condition asking for either Juan or Josh and change the value of `currentUser` variable accordingly.
diff --git a/exercises/07.1-change-turn-on-click/index.js b/exercises/07.1-change-turn-on-click/index.js
@@ -1,9 +1,10 @@
-var currentUser = "Mario";
+let currentUser = "Mario";
 
 window.onload = function loadfn() {
 	document.getElementById("screen").innerHTML = "It's " + currentUser + "'s turn";
 }
 
+// Modify this function
 window.turnChanger = function turnChanger() {
 	if (currentUser == "Mario") {
 		currentUser = "Juan";
diff --git a/exercises/07.1-change-turn-on-click/solution.hide.js b/exercises/07.1-change-turn-on-click/solution.hide.js
diff --git a/exercises/08-event-target/README.es.md b/exercises/08-event-target/README.es.md
diff --git a/exercises/08-event-target/README.md b/exercises/08-event-target/README.md
diff --git a/exercises/08-event-target/index.js b/exercises/08-event-target/index.js
diff --git a/exercises/08-event-target/solution.hide.js b/exercises/08-event-target/solution.hide.js

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,4 @@`
`6`	`6`
`7`	`7`	`## 💡 Hint:`
`8`	`8`
`9`		`-To hide an element with javascript your need to do element.style.display`
	`9`	++ To hide an element with JavaScript you need to do `element.style.display`, then set it with the correct value.
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-window.myEventListener = function myEventListener()`
`2`		`-{`
`3`		`- //your code here`
	`1`	`+window.myEventListener = function myEventListener() {`
	`2`	`+ // Your code here`
	`3`	`+`
`4`	`4`	`}`