4GeeksAcademy · labs404 · Mar 30, 2024 · Mar 30, 2024
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 onclick="myClickFunction();" id="button2">Don't click me</button>
+		<script src="index.js"></script>
+	</body>
+</html>
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/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/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/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/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/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.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/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/exercises/01-alert-on-click/index.html b/exercises/01-alert-on-click/index.html
@@ -8,7 +8,7 @@
 	<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 id="hello" onclick="myClickFunction();" 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,5 @@
 // Declare your function here
+window.myClickFunction = function myClickFunction() {
+    alert("Hello World");
+    console.log("line 4 working.");
+}
diff --git a/exercises/03-sum-values/index.js b/exercises/03-sum-values/index.js
@@ -5,5 +5,6 @@ window.calculateSumListener = function() {
 	// Return the value of the input #secondNumber
 	let stringB = document.getElementById("secondNumber").value;
 	// Your code here
-
+	let sum = parseInt(stringA) + parseInt(stringB);
+	document.getElementById("resultNumber").value = sum;
 };
diff --git a/exercises/04-hide-on-click/index.html b/exercises/04-hide-on-click/index.html
@@ -1,22 +1,17 @@
 <!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();" />
+		<input type="button" value="Show first div" onclick="myEventListenerTwo();" />
+		<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,9 @@
 window.myEventListener = function myEventListener() {
 	// Your code here
-
+	document.getElementById("firstDiv").style.display = "none";	
 }
+
+
+window.myEventListenerTwo = function myEventListenerTwo() {
+	document.getElementById("firstDiv").style.display = "block";
+}
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="loadListener();">
 		<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.loadListener = function loadListener() {
+    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
@@ -1,7 +1,10 @@
 window.onload = function myLoadFunction() {
 	alert("The website just finished loading!");
 	// Some code here
-
+	document.getElementById("theGreen").addEventListener("click", clickFunction);
 };
 
 // The listener function here
+function clickFunction() {
+	alert("woohoo!");
+}
diff --git a/exercises/07-count-on-click/index.html b/exercises/07-count-on-click/index.html
@@ -1,16 +1,16 @@
 <!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>
+		&nbsp;
+		<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
@@ -17,4 +17,7 @@ window.increaseCounter = function increaseCounter()
 }
 
 // Your code here
-
+window.decreaseCounter = function decreaseCounter() {
+	counter--;
+	document.getElementById('screen').innerHTML = `the counter value is ${counter}.`
+}
diff --git a/exercises/07.1-change-turn-on-click/index.js b/exercises/07.1-change-turn-on-click/index.js
@@ -6,8 +6,11 @@ window.onload = function loadfn() {
 
 // Modify this function
 window.turnChanger = function turnChanger() {
+	console.log("click detected.")
 	if (currentUser == "Mario") {
 		currentUser = "Juan";
+	} else if (currentUser == "Juan") {
+		currentUser = "Josh";
 	} else {
 		currentUser = "Mario";
 	}

diff --git a/exercises/08-event-target/index.js b/exercises/08-event-target/index.js
@@ -2,6 +2,6 @@ window.onload = function loadFn() {
 	let containerElm = document.getElementById("container");
 	containerElm.addEventListener("click", function(event) {
 		// Your code here
-
+		alert(event.target.id)
 	});
 };