diff --git a/lectureCodeExamples/Week3/EventsICode/Animation.html b/lectureCodeExamples/Week3/EventsICode/Animation.html
new file mode 100755
index 0000000000000000000000000000000000000000..a77b1cb1ed6ead930972190b35f775e137d07081
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/Animation.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+
+<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("images/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/Week3/EventsICode/AssociateButtonWithFunction.html b/lectureCodeExamples/Week3/EventsICode/AssociateButtonWithFunction.html
new file mode 100755
index 0000000000000000000000000000000000000000..078d4c43e9925b0a7c0f3e66e68707222dd97557
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/AssociateButtonWithFunction.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+
+<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()" />
+ </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 */
+ var buttonInHTMLForm = document.getElementById("displayMessageButton");
+
+ /* Following assignment says: when the button is clicked on call the displayValue function */
+ buttonInHTMLForm.onclick = displayMessage; // DO NOT PUT ()
+ }
+
+ function displayMessage() {
+ alert("Fear the turtle");
+ }
+
+ function displaySchoolName() {
+ alert("UMCP");
+ }
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/EventsICode/GetSetAttribute.html b/lectureCodeExamples/Week3/EventsICode/GetSetAttribute.html
new file mode 100755
index 0000000000000000000000000000000000000000..279f5c5f14f5b80537ebb3383d920bbe8f4c0bb3
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/GetSetAttribute.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+
+<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() {
+ var buttonElement = document.getElementById("changeImageButton");
+ buttonElement.onclick = changeImage; // when button is clicked we call changeImage
+
+ var imageElement = document.getElementById("theImage");
+ // imageElement.ondblclick = changeImage; // When double-clicking on image we call changeImage
+ imageElement.addEventListener("dblclick", changeImage);
+ }
+
+ function changeImage() {
+ var imageElement = document.getElementById("theImage");
+ var currentPhoto = imageElement.getAttribute("src"); // retrieving value of src attribute
+
+ alert("Current photo being displayed is: " + currentPhoto);
+ var photoToDisplay = prompt("Enter name of photo to display", "images/Testudo(1,2,3).jpg");
+ imageElement.setAttribute("src", photoToDisplay);
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/EventsICode/GetSetAttribute2.html b/lectureCodeExamples/Week3/EventsICode/GetSetAttribute2.html
new file mode 100755
index 0000000000000000000000000000000000000000..4857555e9176c16134fac7f4f8dd8e42069dbf8b
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/GetSetAttribute2.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+
+<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", "images/Testudo(1,2,3).jpg");
+ document.querySelector("#theImage").src = photoToDisplay;
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/EventsICode/GetValueInTextField.html b/lectureCodeExamples/Week3/EventsICode/GetValueInTextField.html
new file mode 100755
index 0000000000000000000000000000000000000000..a4ec026ad9f31e578d0b7ae4ace37596b5962b1a
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/GetValueInTextField.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Get Value in Text Field</title>
+</head>
+
+<body onload="main()">
+ <form>
+ Enter Value
+ <input type="text" id="myTextField" value="NoValue" /><br /><br />
+ <input type="button" id="displayValueButton" value="Display Value" /><br /><br />
+ <input type="reset" value="Clear" />
+ </form>
+
+ <script>
+ function main() {
+ document.getElementById("displayValueButton").addEventListener("click", displayValue);
+ document.getElementById("displayValueButton").addEventListener("click", extraTask);
+ }
+
+ function displayValue() {
+ var myTextFieldInHTMLForm = document.getElementById("myTextField");
+
+ /* To get the value from the text field you need to use value */
+ var 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/Week3/EventsICode/GetValueInTextFieldOnChange.html b/lectureCodeExamples/Week3/EventsICode/GetValueInTextFieldOnChange.html
new file mode 100755
index 0000000000000000000000000000000000000000..42e52c87df316bbc87e98d42802c91bdc6c6443f
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/GetValueInTextFieldOnChange.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Get Value in Text Field</title>
+</head>
+
+<body onload="main()">
+
+ <!-- Notice the <input> element is not in <form></form> -->
+ Provide value and press enter:
+ <input type="text" id="myTextField" style="width:100px" /><br />
+
+ <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/Week3/EventsICode/InnerHTML.html b/lectureCodeExamples/Week3/EventsICode/InnerHTML.html
new file mode 100755
index 0000000000000000000000000000000000000000..991432eaa4a5620d63e8611e1caa44f0f402e813
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/InnerHTML.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+
+<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>";
+ answer += "<td>" + i + "</td>";
+ answer += "<td>" + Math.sqrt(i) + "</td>";
+ answer += "</tr>";
+
+ }
+ answer += "</table>";
+
+ // Try each of the following statement separately
+ document.querySelector("#displayArea").innerHTML = answer;
+ // document.writeln(answer);
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/EventsICode/LoadingJSFromFile.html b/lectureCodeExamples/Week3/EventsICode/LoadingJSFromFile.html
new file mode 100755
index 0000000000000000000000000000000000000000..5d4941205e19b5908e657b444a74321225f979da
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/LoadingJSFromFile.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<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/Week3/EventsICode/UpdateValueInTexField.html b/lectureCodeExamples/Week3/EventsICode/UpdateValueInTexField.html
new file mode 100755
index 0000000000000000000000000000000000000000..52c966d8baf7dc67a79374cf1a3ca4c1faf06ece
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/UpdateValueInTexField.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+
+<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"><br><br>
+ <input type="reset" value="Reset">
+ </form>
+ <script>
+
+ function main() {
+ document.getElementById("ComputeValueButton").onclick = displayValue; // DO NOT PUT ()
+ }
+
+ function displayValue() {
+ var myTextFieldElement = document.getElementById("myTextField");
+ var textProvided = myTextFieldElement.value;
+ var numericValue = Number(textProvided);
+
+ /* Updating the textfield */
+ myTextFieldElement.value = Math.sqrt(numericValue);
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/EventsICode/code.js b/lectureCodeExamples/Week3/EventsICode/code.js
new file mode 100755
index 0000000000000000000000000000000000000000..284627f5ab6ba9d3f1640ab997b1fd5e3b33c5ec
--- /dev/null
+++ b/lectureCodeExamples/Week3/EventsICode/code.js
@@ -0,0 +1,20 @@
+window.onload = main; /* When main should be called */
+
+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>";
+ answer += "<td>" + i + "</td>";
+ answer += "<td>" + Math.sqrt(i) + "</td>";
+ answer += "</tr>";
+
+ }
+ answer += "</table>";
+ document.querySelector("#displayArea").innerHTML = answer;
+}
diff --git a/lectureCodeExamples/Week3/EventsICode/images/Testudo1.jpg b/lectureCodeExamples/Week3/EventsICode/images/Testudo1.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..64478744002ecfaf2de8e0ef57b122468eb9ea9d
Binary files /dev/null and b/lectureCodeExamples/Week3/EventsICode/images/Testudo1.jpg differ
diff --git a/lectureCodeExamples/Week3/EventsICode/images/Testudo2.jpg b/lectureCodeExamples/Week3/EventsICode/images/Testudo2.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..d517a368bc05e837b888a3377ab8ac3a0ff84455
Binary files /dev/null and b/lectureCodeExamples/Week3/EventsICode/images/Testudo2.jpg differ
diff --git a/lectureCodeExamples/Week3/EventsICode/images/Testudo3.jpg b/lectureCodeExamples/Week3/EventsICode/images/Testudo3.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..3ea92a06ad44fdaca459de19d18182628b186d06
Binary files /dev/null and b/lectureCodeExamples/Week3/EventsICode/images/Testudo3.jpg differ