Ashutosh-Ray
diff --git a/‎JavaScript2/Week5/classwork/EventsAndCallbacks.html‎
Lines changed: 22 additions & 0 deletions b/‎JavaScript2/Week5/classwork/EventsAndCallbacks.html‎
Lines changed: 22 additions & 0 deletions
diff --git a/‎JavaScript2/Week5/classwork/EventsAndCallbacks.js‎
Lines changed: 65 additions & 0 deletions b/‎JavaScript2/Week5/classwork/EventsAndCallbacks.js‎
Lines changed: 65 additions & 0 deletions
diff --git a/‎JavaScript2/Week5/classwork/Fetch.html‎
Lines changed: 41 additions & 0 deletions b/‎JavaScript2/Week5/classwork/Fetch.html‎
Lines changed: 41 additions & 0 deletions
diff --git a/‎JavaScript2/Week5/classwork/index.html‎
Lines changed: 0 additions & 18 deletions b/‎JavaScript2/Week5/classwork/index.html‎
Lines changed: 0 additions & 18 deletions
diff --git a/‎JavaScript2/Week5/classwork/main.js‎
Lines changed: 0 additions & 1 deletion b/‎JavaScript2/Week5/classwork/main.js‎
Lines changed: 0 additions & 1 deletion
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+        <title>Class example</title>
+	</head>
+	<body>
+
+		<input id="button1" type="button" value="Count up" />
+		<input id="button2" type="button" value="Log in 3 seconds" />
+
+		
+		<script src="EventsAndCallbacks.js" ></script>
+	</body>
+</html>
+
+
+
+
+
+
+
@@ -0,0 +1,65 @@
+//Events and callbacks
+
+    //https://developer.mozilla.org/en-US/docs/Web/API/Event
+
+
+//Callbacks
+
+    //alias: event handler
+
+    //callbacks are just functions, that you write.
+
+    //Examples
+	
+		//The function you give to filter, map methods.
+		//Button is clicked.
+		//Mouse is moving over a image.
+		//Some code you wnat to run 3 seconds from now.
+
+		
+//Exercises
+
+    // 1. Create a button with title "Count up". When the button is clicked first time, it should first log //      out 0. Next time 2, next time 3, and so on.
+    
+    // 2. Create a button with title "Log in 3 seconds". When it is clicked it should wait 3 seconds and 
+    //      then print the text "Log in 3 seconds". Google which built-in function you need for this.
+
+    // 3. Create a handler, that prints the x,y coordinate of the mouse event.
+
+
+	
+//solution 1
+
+    //<button id="button1" >Count up</button>
+
+	let counter = 0;
+			
+	document.querySelector("#button1").addEventListener("click", 
+
+		function(){
+			
+			console.log(counter);
+			counter++;
+		}
+
+    ); 
+    
+
+//solution 2
+
+    //<button id="button2" >Log in 3 seconds</button>
+			
+	document.querySelector("#button2").addEventListener("click", 
+
+		function(){
+			
+			const callbackFunction = () => console.log("Log in 3 seconds");
+			
+			setTimeout(
+				callbackFunction, 
+				3000
+			);
+			
+		}
+
+	); 
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8" />
+	<title>Class example</title>
+</head>
+
+<body>
+
+	<input id="btn" type="button" value="Display data" />
+
+	<div id="display"></div>
+</body>
+
+</html>
+
+<script>
+	const display = document.getElementById("display");
+	const btn = document.getElementById("btn");
+	btn.addEventListener("click", getData)
+
+
+
+	function getData() {
+		const url = 'https://randomuser.me/api/?results=10';
+		fetch(url)
+			.then((resp) => resp.json())
+			.then(function (data) {
+
+				data.results.forEach(function (author) {
+
+					display.innerHTML += `The firstname of the author is: ${author.name.first},
+											 and the lastname is: ${author.name.last}<br>`;
+				})
+			})
+			.catch(function (error) {
+				console.log(error);
+			});
+	}
+</script>