diff --git a/LectureCodeExamples/Week2/EventsCode/Animation.html b/LectureCodeExamples/Week2/EventsCode/Animation.html
new file mode 100755
index 0000000000000000000000000000000000000000..60a6030bf1e4980f3f37a3f68ee49ba502672c81
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/Animation.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Animation Example</title>
+</head>
+
+<body onload="main()">
+ <h1>Animation Example</h1>
+ <img id="myImage" src="images/Testudo1.jpg" width="444" height="293" alt="animationImg"><br>
+ <input type="button" onclick="stopAnimation()" value="Stop Animation">
+ <input type="button" onclick="main()" value="Resume Animation">
+
+ <script>
+ let idGlobal;
+ const intervalInMilliseconds = 1000;
+
+ function main() {
+ /* setInterval calls the function swapImages at the specified rate */
+ idGlobal = setInterval("swapImages()", intervalInMilliseconds);
+ }
+
+ function swapImages() {
+ let imageElement = document.querySelector("#myImage");
+ let currentImage = imageElement.src, nextImage;
+
+ if (currentImage.includes("Testudo1.jpg")) {
+ nextImage = "images/Testudo2.jpg";
+ } else if (currentImage.includes("Testudo2.jpg")) {
+ nextImage = "images/Testudo3.jpg";
+ } else {
+ nextImage = "images/Testudo1.jpg";
+ }
+ imageElement.src = nextImage;
+ }
+
+ function stopAnimation() {
+ clearInterval(idGlobal);
+ alert("Animation Stopped");
+ }
+ </script>
+</body></html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week2/EventsCode/ArrowFunctions.html b/LectureCodeExamples/Week2/EventsCode/ArrowFunctions.html
new file mode 100755
index 0000000000000000000000000000000000000000..1149b4a4ee4e382ae4753ce8ffcad0308fe7b01e
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/ArrowFunctions.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ /* Anonymous function */
+ let productFunc = function(x) {
+ return x * 3;
+ }
+ document.writeln("productFunc(10): " + productFunc(10) + "<br>");
+
+
+ /* No parameters */
+ let initialValue = () => 1000;
+ document.writeln("initialValue(): " + initialValue() + "<br>");
+
+
+ /* One parameter and expression as returned value */
+ let prod2 = x => x * 2;
+ document.writeln("prod2(10): " + prod2(10) + "<br>");
+
+ /* More than one parameter and expression as returned value */
+ let sum = (x, y, z) => x + y + z;
+ document.writeln("sum(10, 2, 4): " + sum(10, 2, 4) + "<br>");
+
+ /* We need curly brackets */
+ let formatted = x => {
+ x++;
+ return `Value: ${x}`; /* return is needed */
+ };
+ document.writeln("formatted(5): " + formatted(5) + "<br>")
+
+ /* Using functions with sort() */
+ let scores = [10, 1, 44, 200];
+ let sortedAttempt1 = scores.sort();
+ document.writeln("sortedAttempt1 (Wrong): " + sortedAttempt1 + "<br>");
+ let sortedAttempt2 = scores.sort((a, b) => a - b);
+ document.writeln("sortedAttempt2 (Correct): " + sortedAttempt2 + "<br>");
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/AssociateButtonWithFunction.html b/LectureCodeExamples/Week2/EventsCode/AssociateButtonWithFunction.html
new file mode 100755
index 0000000000000000000000000000000000000000..f7d18ec68a4e4329465049ce02ce75d4074f9de7
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/AssociateButtonWithFunction.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Associate Button with Function</title>
+</head>
+
+<body onload="main()"> <!-- Important; we are executing main() once document is ready -->
+ <form>
+ <input type="button" id="displayMessageButton" value="Display Message">
+ <input type="button" value="Display School Name" onclick="displaySchoolName()">
+ <input type="button" id="displayTimeButton" value="Display time">
+
+ </form>
+
+ <script>
+ /*
+ * main is now being called in <body> onload = "main()" says:
+ * "execute main when page has been created"
+ */
+ function main() {
+ /* Next statement allow us to access the button from JavaScript */
+ let buttonInHTMLForm = document.getElementById("displayMessageButton");
+
+ /* Following assignment says: when the button is clicked on call the displayValue function */
+ buttonInHTMLForm.onclick = displayMessage; // DO NOT PUT ()
+
+ document.querySelector("#displayTimeButton").addEventListener("click", () => alert(new Date()));
+ }
+
+ function displayMessage() {
+ alert("Fear the turtle");
+ }
+
+ function displaySchoolName() {
+ alert("UMCP");
+ }
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/GetSetAttribute1.html b/LectureCodeExamples/Week2/EventsCode/GetSetAttribute1.html
new file mode 100755
index 0000000000000000000000000000000000000000..7632de8a715365461f9a2610597944d9b4767b5a
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/GetSetAttribute1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Get/Set Attribute in HTML Element</title>
+</head>
+
+<body onload="main()">
+ <form>
+ <img id="theImage" src="images/Testudo1.jpg" alt="viewerImg"><br>
+ <input type="button" id="changeImageButton" value="Change Image"><br>
+ You can also change the image by double-clicking on the image.
+ </form>
+
+ <script>
+ function main() {
+ document.querySelector("#changeImageButton").onclick = changeImage;
+
+ let imageElement = document.querySelector("#theImage");
+
+ // imageElement.ondblclick = changeImage; // When double-clicking on image we call changeImage
+ // same as above but using addEventListener
+ imageElement.addEventListener("dblclick", changeImage);
+ }
+
+ function changeImage() {
+ let imageElement = document.getElementById("theImage");
+ let currentPhoto = imageElement.getAttribute("src"); // retrieving value of src attribute
+
+ alert("Current photo being displayed is: " + currentPhoto);
+ let photoToDisplay = prompt("Enter name of photo to display (Testudo1.jpg, Testudo2.jpg, Testudo3.jpg)", "images/Testudo2.jpg");
+ imageElement.setAttribute("src", photoToDisplay);
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/GetSetAttribute2.html b/LectureCodeExamples/Week2/EventsCode/GetSetAttribute2.html
new file mode 100755
index 0000000000000000000000000000000000000000..5b8e71f2f8b10ecb083c107a71d8d667a3ef9ac4
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/GetSetAttribute2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Get/Set Attribute in HTML Element</title>
+</head>
+
+<body onload="main()">
+ <form>
+ <img id="theImage" src="images/Testudo1.jpg" alt="viewerImg"><br>
+ <input type="button" id="changeImageButton" value="Change Image"><br>
+ You can change also change the image by double clicking on the image.
+ </form>
+
+ <script>
+ function main() {
+ document.querySelector("#changeImageButton").onclick = changeImage;
+ document.querySelector("#theImage").ondblclick = changeImage;
+ }
+
+ function changeImage() {
+ let currentPhoto = document.querySelector("#theImage").src;
+
+ alert("Current photo being displayed is: " + currentPhoto);
+
+ let photoToDisplay = prompt("Enter name of photo to display (Testudo1.jpg, Testudo2.jpg, Testudo3.jpg)", "images/Testudo2.jpg");
+ document.querySelector("#theImage").src = photoToDisplay;
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/GetValueInTextField.html b/LectureCodeExamples/Week2/EventsCode/GetValueInTextField.html
new file mode 100755
index 0000000000000000000000000000000000000000..63e900f4339118bc9f031a125d484a4e33ea57d7
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/GetValueInTextField.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Get Value in Text Field</title>
+</head>
+
+<body onload="main()">
+
+ <!-- Notice this elements are not in a form (if you want a reset button you need form)-->
+ Enter Value
+ <input type="text" id="myTextField" value="NoValue"><br><br>
+ <input type="button" id="displayValueButton" value="Display Value"><br><br>
+
+ <script>
+ function main() {
+ /* Adding two tasks to same event */
+ document.getElementById("displayValueButton").addEventListener("click", displayValue);
+ document.getElementById("displayValueButton").addEventListener("click", extraTask);
+ }
+
+ function displayValue() {
+ let myTextFieldInHTMLForm = document.getElementById("myTextField");
+
+ /* To get the value from the text field you need to use value */
+ let textProvided = myTextFieldInHTMLForm.value;
+
+ alert("The value the user entered is: " + textProvided);
+ alert("Adding 10 to the value provided generates: " + (textProvided + 10));
+ }
+
+ function extraTask() {
+ alert("Extra task called");
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/GetValueOnChange.html b/LectureCodeExamples/Week2/EventsCode/GetValueOnChange.html
new file mode 100755
index 0000000000000000000000000000000000000000..dc1b72ec3be54e9f74176f728c81562cc86355c1
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/GetValueOnChange.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Get Value in Text Field</title>
+</head>
+
+<body onload="main()">
+
+ <form>
+ Provide value and press enter:
+ <input type="text" id="myTextField" style="width:100px"><br>
+ </form>
+
+ <script>
+ function main() {
+ document.querySelector("#myTextField").onchange = displayValue;
+ }
+
+ function displayValue() {
+ /* To get the value from the text field you need to use value */
+ let textProvided = document.querySelector("#myTextField").value;
+
+ alert("Value Provided: " + textProvided);
+ alert("Adding 10 to the value provided generates: " + (Number(textProvided) + 10));
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/InnerHTML.html b/LectureCodeExamples/Week2/EventsCode/InnerHTML.html
new file mode 100755
index 0000000000000000000000000000000000000000..6199a9af7661022d43b8d2e9882136ebf3f84777
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/InnerHTML.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Inner HTML</title>
+</head>
+
+<body onload="main()">
+ <!-- Do not include input element in form -->
+ Provide value and press enter:
+
+ <input type="text" id="myTextField" style="width:100px"><br>
+
+ <div id="displayArea">
+ </div>
+
+ <script>
+ function main() {
+ document.querySelector("#myTextField").onchange = displaySqrts;
+ }
+
+ function displaySqrts() {
+ let maximum = Number(document.querySelector("#myTextField").value);
+
+ let answer = "<table border='1'>";
+ for (let i = 1; i <= maximum; i++) {
+ answer += `<tr><td>${i}</td><td>${Math.sqrt(i)}</td><tr>`;
+ }
+ answer += "</table>";
+
+ // Try usingInner = true or usingInner = false
+ let usingInner = true;
+ if (usingInner) {
+ document.querySelector("#displayArea").innerHTML = answer;
+ } else {
+ document.writeln(answer);
+ }
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/LoadingJSFromFile.html b/LectureCodeExamples/Week2/EventsCode/LoadingJSFromFile.html
new file mode 100755
index 0000000000000000000000000000000000000000..649209032d6669c907bccbf240d64a957689b7d0
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/LoadingJSFromFile.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Inner HTML</title>
+ <script src="code.js" defer></script> <!-- Notice defer specification -->
+</head>
+
+<body> <!-- no longer using onload = "main()" -->
+ Provide value and press enter:
+ <input type="text" id="myTextField" style="width:100px"><br>
+
+ <div id="displayArea">
+ </div>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/SetTimeout.html b/LectureCodeExamples/Week2/EventsCode/SetTimeout.html
new file mode 100755
index 0000000000000000000000000000000000000000..aafbfc7685684b3e661ec41484ef2a30791c1d0c
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/SetTimeout.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>JS Example</title>
+</head>
+
+<body>
+ <h1>Message will appear soon, please wait ...</h1>
+ <script>
+ "use strict";
+
+ const delayInMilliSeconds = 4000;
+ setTimeout("message()", delayInMilliSeconds);
+
+ function message() {
+ alert("Be Real :)")
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week2/EventsCode/UpdateValueInTexField.html b/LectureCodeExamples/Week2/EventsCode/UpdateValueInTexField.html
new file mode 100755
index 0000000000000000000000000000000000000000..55052a4ed6dad0bda610e5418932c0c9f0e1bcba
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/UpdateValueInTexField.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Update Value in Text Field</title>
+</head>
+
+<body onload="main()">
+ <form>
+ Enter Value
+ <input type="text" id="myTextField" value="4"><br><br>
+ <input type="button" id="ComputeValueButton" value="Compute Sqrt">
+ (press button multiple times and look at textfield)<br><br>
+ <input type="reset" value="Reset">
+ </form>
+ <script>
+
+ function main() {
+ document.getElementById("ComputeValueButton").onclick = displayValue; // DO NOT PUT ()
+ }
+
+ function displayValue() {
+ let myTextFieldElement = document.getElementById("myTextField");
+ let textProvided = myTextFieldElement.value;
+ let numericValue = Number(textProvided);
+
+ /* Updating the textfield */
+ myTextFieldElement.value = Math.sqrt(numericValue);
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week2/EventsCode/code.js b/LectureCodeExamples/Week2/EventsCode/code.js
new file mode 100755
index 0000000000000000000000000000000000000000..672bf3cfc8471a92d9cc57699d4fee17092bbc0d
--- /dev/null
+++ b/LectureCodeExamples/Week2/EventsCode/code.js
@@ -0,0 +1,17 @@
+
+document.querySelector("#myTextField").onchange = displaySqrts;
+
+function displaySqrts() {
+ let maximum = Number(document.querySelector("#myTextField").value);
+
+ let answer = "<table border='1'>";
+ for (let i = 1; i <= maximum; i++) {
+ answer += "<tr>";
+ answer += "<td>" + i + "</td>";
+ answer += "<td>" + Math.sqrt(i) + "</td>";
+ answer += "</tr>";
+
+ }
+ answer += "</table>";
+ document.querySelector("#displayArea").innerHTML = answer;
+}
diff --git a/LectureCodeExamples/Week2/EventsCode/images/Testudo1.jpg b/LectureCodeExamples/Week2/EventsCode/images/Testudo1.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..64478744002ecfaf2de8e0ef57b122468eb9ea9d
Binary files /dev/null and b/LectureCodeExamples/Week2/EventsCode/images/Testudo1.jpg differ
diff --git a/LectureCodeExamples/Week2/EventsCode/images/Testudo2.jpg b/LectureCodeExamples/Week2/EventsCode/images/Testudo2.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..d517a368bc05e837b888a3377ab8ac3a0ff84455
Binary files /dev/null and b/LectureCodeExamples/Week2/EventsCode/images/Testudo2.jpg differ
diff --git a/LectureCodeExamples/Week2/EventsCode/images/Testudo3.jpg b/LectureCodeExamples/Week2/EventsCode/images/Testudo3.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..3ea92a06ad44fdaca459de19d18182628b186d06
Binary files /dev/null and b/LectureCodeExamples/Week2/EventsCode/images/Testudo3.jpg differ