4GeeksAcademy · eybagit · Jun 24, 2025
diff --git a/.learn/resets/01-alert-on-click/index.html b/.learn/resets/01-alert-on-click/index.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 id="button2">Don't click me</button>
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/01-alert-on-click/index.js b/.learn/resets/01-alert-on-click/index.js
@@ -0,0 +1,3 @@
+window.myClickFunction = function myClickFunction() {
+	alert("Your first function!");
+};
diff --git a/.learn/resets/02-on-click-Hello-World/index.html b/.learn/resets/02-on-click-Hello-World/index.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 id="hello" type="button" value="Press to show 'Hello world'" />
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/02-on-click-Hello-World/index.js b/.learn/resets/02-on-click-Hello-World/index.js
@@ -0,0 +1 @@
+// Declare your function here
diff --git a/.learn/resets/03-sum-values/index.html b/.learn/resets/03-sum-values/index.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>
+		<input id="firstNumber" type="text" value="" /> + <input id="secondNumber" type="text" value="" /> =
+		<input id="resultNumber" type="text" value="" />
+		<input type="button" value="Calculate" onclick="calculateSumListener();" />
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/03-sum-values/index.js b/.learn/resets/03-sum-values/index.js
@@ -0,0 +1,9 @@
+// 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
+
+};
diff --git a/.learn/resets/04-hide-on-click/index.html b/.learn/resets/04-hide-on-click/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title>4Geeks Academy</title>
+	<link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+	<div id="firstDiv">
+		My first div
+	</div>
+	<div id="secondDiv">
+		My second div
+	</div>
+	<input type="button" value="Hide first div" onclick="myEventListener();" />
+	<script src="index.js"></script>
+</body>
+
+</html>
diff --git a/.learn/resets/04-hide-on-click/index.js b/.learn/resets/04-hide-on-click/index.js
@@ -0,0 +1,4 @@
+window.myEventListener = function myEventListener() {
+	// Your code here
+
+}
diff --git a/.learn/resets/04-hide-on-click/styles.css b/.learn/resets/04-hide-on-click/styles.css
@@ -0,0 +1,6 @@
+#firstDiv {
+	background: green;
+}
+#secondDiv {
+	background: yellow;
+}
diff --git a/.learn/resets/05-the-load-event/index.html b/.learn/resets/05-the-load-event/index.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>
+		<p>Hello! Please alert "Loading finished..." when this website finally loads.</p>
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/05-the-load-event/index.js b/.learn/resets/05-the-load-event/index.js
@@ -0,0 +1 @@
+// Your function goes here
diff --git a/.learn/resets/06-add-listener-with-js/index.html b/.learn/resets/06-add-listener-with-js/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<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">I am a green button</button>
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/06-add-listener-with-js/index.js b/.learn/resets/06-add-listener-with-js/index.js
@@ -0,0 +1,7 @@
+window.onload = function myLoadFunction() {
+	alert("The website just finished loading!");
+	// Some code here
+
+};
+
+// The listener function here
diff --git a/.learn/resets/07-count-on-click/index.html b/.learn/resets/07-count-on-click/index.html
@@ -0,0 +1,16 @@
+<!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>
+  <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/.learn/resets/07-count-on-click/index.js b/.learn/resets/07-count-on-click/index.js
@@ -0,0 +1,20 @@
+// 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
+
diff --git a/.learn/resets/07.1-change-turn-on-click/index.html b/.learn/resets/07.1-change-turn-on-click/index.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>
+		<h1 id="screen">Loading...</h1>
+		<button onclick="turnChanger();">Switch turn</button>
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/07.1-change-turn-on-click/index.js b/.learn/resets/07.1-change-turn-on-click/index.js
@@ -0,0 +1,16 @@
+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";
+	} else {
+		currentUser = "Mario";
+	}
+
+	document.getElementById("screen").innerHTML = "It's " + currentUser + "'s turn";
+}
diff --git a/.learn/resets/08-event-target/index.html b/.learn/resets/08-event-target/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>4Geeks Academy</title>
+	</head>
+	<body>
+		<div id="container">
+			<button id="btn1">Click me</button>
+			<a id="anchor1" href="#">Click me</a>
+			<img id="img1" src="https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png" />
+			<script src="index.js"></script>
+		</div>
+	</body>
+</html>
diff --git a/.learn/resets/08-event-target/index.js b/.learn/resets/08-event-target/index.js
@@ -0,0 +1,7 @@
+window.onload = function loadFn() {
+	let containerElm = document.getElementById("container");
+	containerElm.addEventListener("click", function(event) {
+		// Your code here
+
+	});
+};
diff --git a/exercises/01-alert-on-click/index.html b/exercises/01-alert-on-click/index.html
@@ -8,7 +8,9 @@
 	<body>
 		<button onclick="myClickFunction();">Click me</button>
 		and
-		<button id="button2">Don't click me</button>
+		<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/index.html b/exercises/02-on-click-Hello-World/index.html
@@ -6,7 +6,7 @@
 		<title>4Geeks Academy</title>
 	</head>
 	<body>
-		<input id="hello" type="button" value="Press to show 'Hello world'" />
+		<input onclick="onclickHelloWorld();" 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/index.js b/exercises/02-on-click-Hello-World/index.js
@@ -1 +1,4 @@
 // Declare your function here
+window.onclickHelloWorld = function(){
+    alert("Hello World")
+}
diff --git a/exercises/03-sum-values/index.js b/exercises/03-sum-values/index.js
@@ -5,5 +5,10 @@ window.calculateSumListener = function() {
 	// Return the value of the input #secondNumber
 	let stringB = document.getElementById("secondNumber").value;
 	// Your code here
+	const result = parseInt(stringA) + parseInt(stringB);
+
+	let resultImput = document.getElementById("resultNumber");
+	resultImput.value = result;
+	console.log(`sumamos ${stringA} + ${stringB} = ${result} `);
 
 };
diff --git a/exercises/04-hide-on-click/index.html b/exercises/04-hide-on-click/index.html
@@ -1,22 +1,16 @@
 <!DOCTYPE html>
 <html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>4Geeks Academy</title>
+		<link rel="stylesheet" href="styles.css" />
+	</head>
 
-<head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	<title>4Geeks Academy</title>
-	<link rel="stylesheet" href="styles.css" />
-</head>
-
-<body>
-	<div id="firstDiv">
-		My first div
-	</div>
-	<div id="secondDiv">
-		My second div
-	</div>
-	<input type="button" value="Hide first div" onclick="myEventListener();" />
-	<script src="index.js"></script>
-</body>
-
+	<body>
+		<div id="firstDiv">My first div</div>
+		<div id="secondDiv">My second div</div>
+		<input type="button" value="Hide first div" onclick="myEventListener();" />
+		<script src="index.js"></script>
+	</body>
 </html>
diff --git a/exercises/04-hide-on-click/index.js b/exercises/04-hide-on-click/index.js
@@ -1,4 +1,5 @@
 window.myEventListener = function myEventListener() {
-	// Your code here
+	const firstDiv = document.getElementById("firstDiv");
+	firstDiv.style.display= "none";
 
 }
diff --git a/exercises/05-the-load-event/index.html b/exercises/05-the-load-event/index.html
@@ -6,7 +6,7 @@
 		<title>4Geeks Academy</title>
 	</head>
 
-	<body>
+	<body onload="myOnloadFunction()">
 		<p>Hello! Please alert "Loading finished..." when this website finally loads.</p>
 		<script src="index.js"></script>
 	</body>

diff --git a/exercises/05-the-load-event/index.js b/exercises/05-the-load-event/index.js
@@ -1 +1,4 @@
 // Your function goes here
+window.myOnloadFunction = function(){
+    alert("Loading finished...");
+}
diff --git a/exercises/06-add-listener-with-js/index.html b/exercises/06-add-listener-with-js/index.html
@@ -5,10 +5,10 @@
 		<meta name="viewport" content="width=device-width" />
 		<title>4Geeks Academy</title>
 		<style>
-           		 #theGreen {
-              	 		background: green; 
-               		 	color: white
-         	  	 }
+			#theGreen {
+				background: green;
+				color: white;
+			}
 			#theGreen:hover {
 				background: red;
 			}

diff --git a/exercises/06-add-listener-with-js/index.js b/exercises/06-add-listener-with-js/index.js
@@ -5,3 +5,9 @@ window.onload = function myLoadFunction() {
 };
 
 // The listener function here
+const displayAlert = () =>{
+	alert("Wooho");
+}
+
+const greenButton = document.getElementById("theGreen");
+greenButton.addEventListener("click",displayAlert);
diff --git a/exercises/07-count-on-click/index.html b/exercises/07-count-on-click/index.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>4Geeks Academy</title>
+	</head>
 
-<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>
-  <script src="index.js"></script>
-</body>
-
+	<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/index.js b/exercises/07-count-on-click/index.js
@@ -16,5 +16,13 @@ window.increaseCounter = function increaseCounter()
 	document.getElementById('screen').innerHTML = "The counter value is "+counter;
 }
 
+window.decreaseCounter = 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