diff --git a/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/Checkboxes.html b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/Checkboxes.html
new file mode 100755
index 0000000000000000000000000000000000000000..04255ee11e8989052b04b5659abf2e3a7f5561d7
--- /dev/null
+++ b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/Checkboxes.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <title>Checkboxes</title>
+</head>
+
+<body>
+
+ Indicate what kinds of computers you have.<br>
+ <form>
+ <input type="checkbox" id="laptop">Laptop<br>
+ <input type="checkbox" id="desktop" checked>Desktop<br>
+ <input type="button" id="processDataButton" value="Process" onclick="processData()">
+ <input type="reset" value="Clear">
+ </form>
+
+ <script>
+ function processData() {
+ /* Retrieving the values */
+ let laptopCheckbox = document.getElementById("laptop");
+ let desktopCheckbox = document.getElementById("desktop");
+
+ let message = "";
+ if (laptopCheckbox.checked) {
+ message += "Laptop was selected.\n";
+ } else {
+ message += "Laptop was NOT selected.\n";
+ }
+
+ if (desktopCheckbox.checked) {
+ message += "Desktop was selected.\n";
+ } else {
+ message += "Desktop was NOT selected.\n";
+ }
+
+ alert(message);
+ }
+ </script>
+</body></html>
diff --git a/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/DropDownList.html b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/DropDownList.html
new file mode 100755
index 0000000000000000000000000000000000000000..6a0179bef1b066ed1767d820f6786e708c30b7b7
--- /dev/null
+++ b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/DropDownList.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <title>Drow-Down List</title>
+</head>
+
+<body>
+ <h2>Programming Language Preference</h2>
+
+ <form>
+ <select id="preference">
+ <option value="JavaScript">JavaScript</option>
+ <option value="Ruby" selected="selected">Ruby</option>
+ <option value="Python">Python</option>
+ </select>
+
+ <input type="button" id="processDataButton" value="Process" onclick="processData()">
+ <input type="reset">
+ </form>
+
+ <script>
+ function processData() {
+ let id = "preference";
+ let answer = getSelection(id);
+ alert("Option selected: " + answer);
+ }
+
+ function getSelection(id) {
+ let preference = document.getElementById(id);
+ let optionSelected = preference[preference.selectedIndex].value;
+
+ return optionSelected;
+ }
+ </script>
+</body></html>
diff --git a/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/NumberRangeTime.html b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/NumberRangeTime.html
new file mode 100755
index 0000000000000000000000000000000000000000..7c59b527fe23be0e90bbc9a066ec249a00178cb9
--- /dev/null
+++ b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/NumberRangeTime.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Number, Range, Time</title>
+</head>
+
+<body>
+ <h2>Form Elements (Number/Range/Time)</h2>
+ <form>
+ Enter a number: <input type="number" value="21" min="1" max="120" step="5" id="request">
+ <input type="button" id="process" value="Process Number" onclick="processNumber()"><br><br>
+
+ Enter number in range: <input type="range" id="rangeElem" min="10" max="50">
+ <input type="button" id="processRange" value="Process Range" onclick="processRange1()"><br><br>
+
+ Enter time <input type="time" id="timeElem" >
+ <input type="button" id="processTime" value="Process Time" onclick="processTime1()"><br><br>
+
+ <input type="reset">
+
+ </form>
+ <h3>Display Area</h3>
+ <div id="display"></div>
+
+ <script>
+ function processNumber() {
+ var age = document.getElementById("request").value;
+ document.getElementById("display").innerHTML = "Age is " + age;
+ }
+
+ function processRange1() {
+ var value = document.getElementById("rangeElem").value;
+ document.getElementById("display").innerHTML = "Range value is " + value;
+ }
+
+ function processTime1() {
+ var value = document.getElementById("timeElem").value;
+ document.getElementById("display").innerHTML = "Time is " + value;
+ }
+ </script>
+</body></html>
diff --git a/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/RadioButtons.html b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/RadioButtons.html
new file mode 100755
index 0000000000000000000000000000000000000000..cadd3dc76bc0a1466e094a565381b7e213eb60e7
--- /dev/null
+++ b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/RadioButtons.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Radio Buttons</title>
+</head>
+
+<body>
+ <h2>Radio Buttons</h2>
+ <form>
+ <!-- Notice: using same name but different ids -->
+ <input type="radio" id="radioHS" name="category" value="hs">HS<br>
+ <input type="radio" id="radioUndergraduate" name="category" value="undergraduate">Undergraduate<br>
+ <input type="radio" id="radioGraduate" name="category" value="graduate" checked>Graduate<br>
+ <input type="button" id="processDataButton" value="Process" onclick="processData()">
+ <input type="reset">
+ </form>
+
+ <script>
+ function processData() {
+ let radioButtonsName = "category";
+ alert(`Selection was: ${ getSelection(radioButtonsName)}`);
+ }
+
+ function getSelection(radioButtonsName) {
+ for (let entry of document.getElementsByName("category")) {
+ if (entry.checked) {
+ return entry.value;
+ }
+ }
+ }
+ </script>
+</body></html>
diff --git a/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/ScrollableList.html b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/ScrollableList.html
new file mode 100755
index 0000000000000000000000000000000000000000..1e72cce7ad5340803ff94c4dce7c556043ae03e7
--- /dev/null
+++ b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/ScrollableList.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Scrollable List</title>
+</head>
+
+<body>
+ <h2>Scrollable List</h2>
+ <h2>Use CTRL KEY To Select Multiple Entries</h2>
+ <form>
+ <select id="preference" multiple size="5">
+ <option value="JavaScript">JavaScript</option>
+ <option value="Ruby" selected>Ruby</option> <!-- default selection -->
+ <option value="PHP">PHP</option>
+ <option value="C++" selected>C++</option> <!-- default selection -->
+ <option value="Pascal">Pascal</option>
+ <option value="Fortran">Fortran</option>
+ <option value="Basic">Basic</option>
+ <option value="Assembly">Assembly</option>
+ <option value="C#">C#</option>
+ </select>
+ <br><br>
+ <input type="button" id="processDataButton" value="Process" onclick="processData()">
+ <input type="reset">
+ </form>
+
+ <script>
+ function processData() {
+ let answer = getSelection();
+ alert("Selection: " + answer);
+ }
+
+ function getSelection() {
+ let optionsArray = document.getElementById("preference").options;
+ let answer = "";
+
+ for (let option of optionsArray) {
+ if (option.selected) {
+ answer += option.value + "|";
+ }
+ }
+
+ return answer;
+ }
+ </script>
+</body></html>
diff --git a/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/Textarea.html b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/Textarea.html
new file mode 100755
index 0000000000000000000000000000000000000000..0dd32f6d866b50b7310e5ea4b40d1fdfa2c92fcf
--- /dev/null
+++ b/LectureCodeExamples/Week3/AccessFormDataUsingJSCode/Textarea.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Text Area</title>
+</head>
+
+<body>
+ <h2>Text Area</h2>
+ <form>
+ <!-- Notice the default text -->
+ <textarea id="request" rows="8" cols="50">Please check my last assignment.</textarea>
+ <br>
+ <input type="button" id="processDataButton" value="Process" onclick="processData()">
+ <input type="reset">
+ </form>
+
+ <script>
+ function processData() {
+ let information = document.getElementById("request");
+ alert("The submitted request is: \n" + information.value);
+ }
+ </script>
+</body></html>
diff --git a/LectureCodeExamples/Week3/FormsCode/FieldSet.html b/LectureCodeExamples/Week3/FormsCode/FieldSet.html
new file mode 100755
index 0000000000000000000000000000000000000000..f18a60d5248590df6b875609836b3855db1dba2f
--- /dev/null
+++ b/LectureCodeExamples/Week3/FormsCode/FieldSet.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>FieldSet and Legend</title>
+ <meta charset="utf-8">
+</head>
+
+<body>
+ <form>
+ <fieldset>
+ <legend>
+ <strong>User Information</strong>
+ </legend>
+
+ <label>First Name: <input type="text"></label><br><br>
+ <label>Last Name: <input type="text"></label><br><br>
+
+ How many pairs of shoes do you own?<br>
+ <label><input type="radio" name="shoes">0 to 5 pairs</label><br>
+ <label><input type="radio" name="shoes">6 to 10 pairs</label><br>
+ <label><input type="radio" name="shoes">11 to 30 pairs</label><br>
+ <label><input type="radio" name="shoes" checked="checked">31 or more pairs</label><br>
+ </fieldset>
+ <hr>
+
+ <fieldset>
+ <legend>
+ <strong>Responses</strong>
+ </legend>
+
+ Please tell us which of our products you own:<br>
+ <label><input type="checkbox">Shoe Polish</label><br>
+ <label><input type="checkbox">Shoe Horn</label><br>
+ <label><input type="checkbox">Closet Shoe Tree</label><br>
+ <br>
+ Please tell us why you love our products:<br>
+ <textarea rows="10" cols="40"></textarea><br>
+ </fieldset>
+ </form>
+</body>
+</html>
diff --git a/LectureCodeExamples/Week3/FormsCode/FormElements.html b/LectureCodeExamples/Week3/FormsCode/FormElements.html
new file mode 100755
index 0000000000000000000000000000000000000000..445079c83de8b6d1b61e772c402344ce4fbfb045
--- /dev/null
+++ b/LectureCodeExamples/Week3/FormsCode/FormElements.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Form Elements</title>
+ <style>
+ /* NOTE: While validating, make sure you use CSS */
+ /* level 3 profile by accessing "More Options" */
+ body {
+ font-family: Arial, Helvetica, sans-serif;
+ }
+
+ input {
+ margin: 0.75em;
+
+ /* Makes our input elements with round borders (currently DISABLED) */
+ /* border-radius: 1em; */
+
+ /* Some padding to help round borders */
+ padding: 0.125em;
+ }
+
+ input[type="button"] {
+ box-shadow: 1em 1em 1em silver;
+ }
+
+ h1 {
+ text-shadow: silver 0.125em 0.125em 0.125em;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>Form Elements</h1>
+ <hr>
+ <form>
+ <label for="userMidtermScore">Range</label>
+ <input id="userMidtermScore" type="range" min="0" max="50" step="5" value="0">
+ <br>
+
+ <label for="userFinalScore">Number</label>
+ <input id="userFinalScore" type="number" min="0" max="100" step="10" value="0">
+ <br>
+
+ <label for="date">Date</label>
+ <input id="date" type="date">
+ <br>
+
+ <label for="time">Time</label>
+ <input id="time" type="time">
+ <br>
+
+ <label for="datetime-local">Datetime-local</label>
+ <input id="datetime-local" type="datetime-local">
+ <br>
+
+ <label for="week">Week</label>
+ <input id="week" type="week">
+ <br>
+
+ <label for="month">Month</label>
+ <input id="month" type="month">
+ <br>
+
+ <label for="tel">Telephone</label>
+ <input id="tel" type="tel">
+ <br>
+
+ <label for="color">Color</label>
+ <input id="color" type="color">
+ <br>
+
+ <label>Button: <input type="button" value="Execute"></label>
+ <br><br>
+ <hr>
+ </form>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week3/FormsCode/InputElementAttributes.html b/LectureCodeExamples/Week3/FormsCode/InputElementAttributes.html
new file mode 100755
index 0000000000000000000000000000000000000000..501b9455abd6bc3ee98a78f14ca251f8081e2045
--- /dev/null
+++ b/LectureCodeExamples/Week3/FormsCode/InputElementAttributes.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Input Element Attributes</title>
+</head>
+
+<body>
+ <h1>Input Element Attributes</h1>
+
+
+ <form>
+ Name: <input type="text" value="Mary" size="4" maxlength="8">
+ <br><br>
+
+ School (readonly): <input type="text" value="UMD" size="1" maxlength="3" readonly>
+ <br><br>
+
+ Building (disabled): <input type="text" value="Iribe" size="1" disabled>
+ <br><br>
+
+ <input type="reset">
+ </form>
+</body>
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week3/FormsCode/InputList.html b/LectureCodeExamples/Week3/FormsCode/InputList.html
new file mode 100755
index 0000000000000000000000000000000000000000..9c01e400f7fd2d841ac2330564a27fb4a4336379
--- /dev/null
+++ b/LectureCodeExamples/Week3/FormsCode/InputList.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>Input List</title>
+ <meta charset="utf-8">
+</head>
+
+<body>
+ <h1>Input List</h1>
+
+ <form action="inputList.php" method="get">
+ <strong>Select color</strong><br>
+ <input list="color-options" name="color-choice">
+
+ <datalist id="color-options">
+ <option value="orange">
+ <option value="blue">
+ </datalist>
+
+ <br><br>
+ <input type="submit">
+ </form>
+
+</body></html>
diff --git a/LectureCodeExamples/Week3/FormsCode/Labels.html b/LectureCodeExamples/Week3/FormsCode/Labels.html
new file mode 100755
index 0000000000000000000000000000000000000000..26d7827c8c3b166431a40457c0223cd7027e0141
--- /dev/null
+++ b/LectureCodeExamples/Week3/FormsCode/Labels.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>Labels</title>
+ <meta charset="utf-8">
+</head>
+
+<body>
+ <form>
+ <h1>User Information</h1>
+
+ <!-- Input element is embedded in label -->
+ <!-- Clicking on "First Name:" text will change focus to this element -->
+ <label>First Name: <input type="text"></label>
+ <br><br>
+
+ <!-- Relying on id and for to link label and input element -->
+ <label for="lastname">Last Name: </label><input type="text" id="lastname">
+ <br><br>
+
+ <label for="middlename">Middle Name: </label>
+ <p>text separating label from text field to show
+ that label still changes focus to the text field
+ below (click on Middle Name:)
+ </p>
+ <br><br>
+ <input type="text" id="middlename">
+ <br><br>
+ <!-- Clicking on "School:" text will NOT change focus to this element -->
+ <!-- as we are not using a label -->
+ School: <input type="text">
+ <br><br>
+
+ <input type="reset">
+ </form>
+
+</body></html>
diff --git a/LectureCodeExamples/Week3/FormsCode/inputList.php b/LectureCodeExamples/Week3/FormsCode/inputList.php
new file mode 100755
index 0000000000000000000000000000000000000000..a8b6231d17f5ad283791dfa90a3e89b8370db793
--- /dev/null
+++ b/LectureCodeExamples/Week3/FormsCode/inputList.php
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Datalist Processing</title>
+</head>
+
+<body>
+ <?php
+ echo "<h1>Color Choice</h1>";
+ $choice = $_GET['color-choice'];
+ echo "<strong>Choice is: $choice</strong>";
+ ?>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/Car.html b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/Car.html
new file mode 100755
index 0000000000000000000000000000000000000000..4d196ed3026037a8578e8d1dae8f1cd09c435987
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/Car.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Class Example</title>
+</head>
+
+<body>
+ <script>
+ class Car {
+ static dealership = "Terp Cars"; /* static public */
+ static #instances = 0; /* static private */
+
+ passengers = ["Driver"]; /* public */
+
+ #tag; /* private */
+ #mileage; /* private */
+
+ constructor(tag, mileage) {
+ this.#tag = tag;
+ this.#mileage = mileage;
+ Car.#instances++;
+ }
+
+ get tag() {
+ return this.#tag;
+ }
+
+ set tag(newTag) {
+ if (newTag == null) {
+ document.writeln("<br><strong>Oops, cannot set tag to null</strong><br>")
+ } else {
+ this.#tag = newTag;
+ }
+ }
+
+ displayInfo() {
+ document.writeln(this.#tag + ", " + this.#mileage);
+ }
+
+ static getInstances() {
+ return Car.#instances;
+ }
+
+ [Symbol.toPrimitive]() { /* Java's toString() */
+ return `${this.#tag} ${this.#mileage} Passengers: ${this.passengers}`;
+ }
+ }
+
+
+ let car1 = new Car("abc", 22000);
+ document.writeln("Initial car info: ");
+ car1.displayInfo();
+
+ document.writeln(`<br>The tag value is ${car1.tag}`);
+ car1.tag = "newTagABC";
+ document.writeln(`<br>After assignment to tag, the tag value is ${car1.tag}`);
+
+ car1.tag = null; /* Setting tag to null */
+ document.writeln("After attempt to change tag to null: ");
+ car1.displayInfo();
+
+ let car2 = new Car("core1", 40000);
+ document.writeln(`<br>Dealership: ${Car.dealership}<br>`);
+ document.writeln(`Instances: ${Car.getInstances()}<br>`);
+
+ document.writeln("<hr>"); /* Using equivalent of Java's toString() */
+ document.writeln(car1 + "<br>");
+ document.writeln(car2 + "<br>");
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/ClassDeclaration.html b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/ClassDeclaration.html
new file mode 100755
index 0000000000000000000000000000000000000000..449cd60027f6b6aef346a17901fca58c1a101998
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/ClassDeclaration.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>ES6 Class Example</title>
+ </head>
+
+ <body>
+ <script>
+ class StoreBranch {
+ static #instances = 0; /* static and private */
+ #name; /* private instance variable */
+ #location; /* private instance variable */
+
+ /* Constructor */
+ constructor(name = "NONAME", location = "NOLOCATION") {
+ if (!this.#isValidName(name)) {
+ console.log("Warning, name too short");
+ }
+ this.#name = name;
+ this.#location = location;
+ StoreBranch.#instances++;
+ }
+
+ /* Java's toString() */
+ [Symbol.toPrimitive]() {
+ return `Name: ${this.#name}, Location: ${this.#location}`;
+ }
+
+ /* Non-static method */
+ displayInfo() {
+ document.writeln(
+ `DisplayInfo: <em>${this.#name}</em> located in <em>${this.#location}</em>`
+ );
+ StoreBranch.#printSchool(); /* Calling private static method */
+ }
+
+ /* static method */
+ static getInstances() {
+ return StoreBranch.#instances;
+ }
+
+ /* non-static private method */
+ #isValidName(name) {
+ return name.length >= 2;
+ }
+
+ /* static private method */
+ static #printSchool(name) {
+ document.writeln("<br>School: UMCP<br>");
+ }
+ }
+
+ let storeBranch1 = new StoreBranch("Nendy's", "Greenbelt");
+ storeBranch1.displayInfo();
+ document.writeln("<br>*****<br>");
+ document.writeln(storeBranch1);
+
+ document.writeln("<br>*****<br>");
+ let storeBranch2 = new StoreBranch("A");
+ document.writeln(storeBranch2);
+
+ document.writeln("<br>*****<br>");
+ let storeBranch3 = new StoreBranch();
+ document.writeln(storeBranch3);
+
+ document.writeln("<br>*****<br>");
+ document.writeln(`Number of stores: ${StoreBranch.getInstances()}`);
+ </script>
+ </body>
+</html>
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/SportsCar.html b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/SportsCar.html
new file mode 100755
index 0000000000000000000000000000000000000000..805d711b574307db3f81683049f4a79d9552563f
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/SportsCar.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Class Example</title>
+</head>
+
+<body>
+ <script>
+ class Car {
+ static dealership = "Terp Cars"; /* static public */
+ static #instances = 0; /* static private */
+
+ passengers = ["Rose"]; /* public */
+ #tag; #mileage; /* private */
+
+ constructor(tag, mileage) {
+ this.#tag = tag;
+ this.#mileage = mileage;
+ Car.#instances++;
+ }
+
+ displayInfo() {
+ document.writeln(`Tag: ${this.#tag}, Mileage: ${this.#mileage}, Passengers: ${this.passengers}`);
+ }
+
+ [Symbol.toPrimitive]() {
+ /* Java's toString() */
+ return `Tag: ${this.#tag}, Mileage: ${this.#mileage}, Passengers: ${this.passengers}`;
+ }
+
+ get tag() {
+ return this.#tag;
+ }
+
+ set tag(newTag) {
+ this.#tag = newTag;
+ }
+
+ static getInstances() {
+ return Car.#instances;
+ }
+ }
+
+ class SportsCar extends Car {
+ #engine;
+ constructor(tag, mileage, engine) {
+ super(tag, mileage);
+ this.#engine = engine;
+ }
+
+ displayInfo() {
+ super.displayInfo();
+ document.writeln(`Engine: ${this.#engine}<br>`);
+ }
+
+ [Symbol.toPrimitive]() {
+ return `${super[Symbol.toPrimitive]()}, Engine: ${this.#engine}`;
+ }
+
+ get engine() {
+ return this.#engine;
+ }
+ }
+ const tag = "ABC", mileage = 10000;
+ const carOne = new Car(tag, mileage);
+ document.writeln(`Mark #1: Car info:<br>`);
+ carOne.displayInfo();
+ document.writeln(`<br>Mark #2: ${carOne}`);
+ carOne.tag = "CBD"
+ document.writeln(`<br>Mark #3: New Tag: ${carOne.tag}<br>`);
+
+ const carTwo = new SportsCar("X2W-Sports", 22000, "turbo");
+ document.writeln(`Mark #4: Sports car info:<br>`);
+ carTwo.displayInfo();
+ document.writeln(`Mark #5: Engine: ${carTwo.engine}<br>`);
+ document.writeln(`Mark #6: ${carTwo}<br>`);
+ document.writeln(`Mark #7: Total Cars: ${Car.getInstances()}`);
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/README.txt b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/README.txt
new file mode 100755
index 0000000000000000000000000000000000000000..257a9ff5acfa17324aae8d6c51925f64a659fe16
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/README.txt
@@ -0,0 +1,2 @@
+For this examples, we have also provided the .php files that
+a web server will use to process the requests.
\ No newline at end of file
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.css b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.css
new file mode 100755
index 0000000000000000000000000000000000000000..4a40e2245efb39c2e0d08271eeec16fe96e27008
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.css
@@ -0,0 +1,12 @@
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+fieldset {
+ border-radius: .75em;
+}
+
+input {
+ border-radius: .75em;
+}
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.html b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.html
new file mode 100755
index 0000000000000000000000000000000000000000..ab04e63ef26fc1523462985c2b44d81448e2b6d6
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Form Validation</title>
+ <link rel="stylesheet" href="formValidation.css">
+ <script src="formValidation.js"></script>
+</head>
+
+<body>
+ <form id="myForm" action="paymentValidation.php" method="get">
+ <fieldset>
+ <legend>
+ <em>Customer Info</em>
+ </legend>
+ <strong>Name:
+ </strong><input id="name" type="text" name="name" value="Mary">
+
+ <strong>Account Number:
+ </strong><input id="account" type="text" name="account"><br><br>
+
+ <strong>Payment:
+ </strong><input id="payment" type="text" name="payment"><br><br>
+
+ <strong>Receive News:
+ </strong><input type="checkbox" name="news" id="news" checked value="YesReceiveNews"><br><br>
+
+ <strong>Payment Plan:</strong>
+ <input type="radio" name="plan" id="oneYearPlan" value="OneYearPaymentPlan" checked>
+ <label for="oneYearPlan">One-Year</label>
+ <input type="radio" name="plan" id="twoYearPlan" value="TwoYearPaymentPlan">
+ <label for="twoYearPlan">Two-Year</label><br><br>
+
+ <strong>Location:</strong>
+ <select name="location">
+ <option value="In-State">In-State</option>
+ <option value="Out-of-State" selected="selected">Out-of-State</option>
+ </select>
+
+ <br><br>
+ <input type="reset">
+ <input type="submit" value="Submit Data">
+ </fieldset>
+ </form>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.js b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.js
new file mode 100755
index 0000000000000000000000000000000000000000..41060a6540d7acf6ef5566b494d3e2b95ec1de14
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.js
@@ -0,0 +1,34 @@
+/* IMPORTANT: Setting the function to call when submit is selected */
+window.onsubmit = validateForm;
+
+/* This function must return true or false
+ If true the data will be sent to the server.
+ If false the data will not be sent to the server */
+
+function validateForm() {
+ /* Retrieving the values */
+ let name = document.getElementById("name").value;
+ let account = document.getElementById("account").value;
+ let payment = document.getElementById("payment").value;
+
+ /* Validating numeric values */
+ let invalidMessages = "";
+ if (String(parseInt(account)) !== account) {
+ invalidMessages += "Invalid account number provided.\n";
+ }
+ if (Number(payment) <= 0) {
+ invalidMessages += "Invalid payment amount provided.";
+ }
+
+ if (invalidMessages !== "") {
+ alert(invalidMessages);
+ return false;
+ } else {
+ let valuesProvided = "Do you want to submit the following payment?\n";
+ valuesProvided += "Name: " + name + "\n";
+ valuesProvided += "Account: " + account + "\n";
+ valuesProvided += "Payment: " + payment + "\n";
+ /* We could write the following as return window.confirm(valuesProvided) */
+ return window.confirm(valuesProvided);
+ }
+}
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/paymentValidation.php b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/paymentValidation.php
new file mode 100755
index 0000000000000000000000000000000000000000..da9f10687715cabee4c5081e484aef4d994ced4b
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/paymentValidation.php
@@ -0,0 +1,9 @@
+<?php
+ print "<h1>Payment Confirmation for {$_GET['name']}</h1>";
+ print "<p>";
+ print "A payment of \${$_GET['payment']} has been received for account {$_GET['account']}";
+ print "</p>";
+ print "Receive news: {$_GET['news']} <br />";
+ print "Payment Plan: {$_GET['plan']} <br />";
+ print "Location: {$_GET['location']}";
+?>
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/IIFE.html b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/IIFE.html
new file mode 100755
index 0000000000000000000000000000000000000000..8b9da127edee937db372e84355d3515971594b06
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/IIFE.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>JS IIFE Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ /* myStar variable will be attached to the windows global object */
+ var myStar = "Albireo";
+ document.writeln(`myStar Value: ${window.myStar}<br>`);
+
+ /* communityStar variable will NOT be attached to windows global object */
+ let communityStar = "Algol";
+ document.writeln(`communityStar Value: ${window.communityStar}<br>`);
+
+ (function() {
+ var hiddenStar = "HiddenStar";
+ document.writeln("within the IIFE");
+ })();
+ document.writeln("Trying to print value of hiddenStar (see Console)<br>");
+ console.log(hiddenStar);
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Map.html b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Map.html
new file mode 100755
index 0000000000000000000000000000000000000000..b8b2e5875c62aebfac61a2dc67e03fc86d305874
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/Map.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>JS Map Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ function printMap(map) {
+ document.writeln("Map info<br>");
+ document.writeln("<strong>Map size: " + map.size + "</strong><br>");
+ document.writeln("<strong>Map Contents</strong><br>");
+ map.forEach(entry => document.writeln(entry + "<br>")); /* can use forEach with map */
+ document.writeln("End Map info<br>");
+ }
+
+ document.writeln(`<strong>***** Example #1</strong><br>`);
+ const map = new Map();
+ map.set("Mike", 88);
+ map.set("Rose", 90);
+ map.set("Kelly", 100);
+ printMap(map);
+ document.writeln(`<br>map.get("Rose"): ` + map.get("Rose") + "<br>");
+ document.writeln(`map.get("NotInMap"): ` + map.get("NotInMap") + "<br>");
+ document.writeln("map.has(\"Mike\"): " + map.has("Mike") + "<br>");
+
+
+ document.writeln(`<br><strong>***** Example #2</strong>`);
+ let firstDeletion = map.delete("Rose");
+ document.writeln("<br>First deletion (Rose): " + firstDeletion + "<br>");
+ let secondDeletion = map.delete("NotInMap");
+ document.writeln("Second deletion (NotInMap): " + secondDeletion + "<br>");
+ printMap(map);
+
+ document.writeln(`<br><strong>***** Example #3</strong>`);
+ document.writeln("<br>Using map.keys()<br>");
+ for (let key of map.keys()) {
+ document.writeln(key + "<br>");
+ }
+
+ document.writeln("<br>Using map.values()<br>");
+ for (let value of map.values()) {
+ document.writeln(value + "<br>");
+ }
+
+
+ document.writeln("<br>Using map.entries()<br>");
+ for (let entry of map.entries()) {
+ document.writeln(entry[0] + ", " + entry[1] + "<br>");
+ }
+
+ document.writeln("<br>Using map.entries() (with [key, value])<br>");
+ for (let [key, value] of map.entries()) {
+ document.writeln(key + ", " + value + "<br>");
+ }
+
+ document.writeln("<br>Another Iteration<br>");
+ for (let [key, value] of map) {
+ document.writeln(key + ", " + value + "<br>");
+ }
+
+ document.writeln("<br>Yet another Iteration<br>");
+ map.forEach((key, value) => document.writeln(`${key}, ${value}<br>`));
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week3/MapsFormValidationClassesCode/WeakMap.html b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/WeakMap.html
new file mode 100755
index 0000000000000000000000000000000000000000..d4fe2de494c8db7f041ff9699ea7bf25cd4beeee
--- /dev/null
+++ b/LectureCodeExamples/Week3/MapsFormValidationClassesCode/WeakMap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>JS WeakMap</title>
+</head>
+
+<body>
+ <h2>Check Console, Memory, Head Snapshot</h2>
+ <script>
+ "use strict";
+
+ function TerpObject() {
+ this.data = new Array(300000);
+ }
+
+ window.obj = new TerpObject();
+ let map = new Map(); /* Using Map. Change to WeakMap to see memory effect */
+ // let map = new WeakMap(); /* Using WeakMap */
+ map.set(window.obj, 1);
+ delete window.obj;
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/FormsSummary/formsSummary.html b/LectureCodeExamples/Week3/WebServersFormsCode/FormsSummary/formsSummary.html
new file mode 100755
index 0000000000000000000000000000000000000000..c9bba84f09c76e9878c5cc8de99fe59e90ac78a8
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/FormsSummary/formsSummary.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Form Example</title>
+</head>
+
+<body>
+ <form action="formsSummary.php" method="get">
+ <!-- Textboxes and Password entry -->
+ <p><strong>FirstName: </strong><input type="text" name="firstName" value="Mary" autofocus required><br><br>
+ <strong>LastName: </strong><input type="text" name="lastName" value="Smith" required><br><br>
+ <strong>Password: </strong><input type="password" name="password" required><br><br>
+ </p>
+
+ <p>
+ <!-- id and name are different attributes -->
+ <strong>Email Address: <input id="emailaddress" type="email" name="email" placeholder="example@notreal.notreal"></strong>
+ </p>
+
+ <p>
+ <strong>Personal Website: <input id="website" type="url" name="website" placeholder="http://www.notreal.not"></strong>
+ </p>
+
+ <!-- Checkboxes (Notice the one that is checked by default) -->
+ <p>
+ <input type="checkbox" name="ownsLaptop"><strong>Own a Laptop</strong>
+ <input type="checkbox" name="ownsDesktop"><strong>Own a Desktop</strong>
+ <input type="checkbox" name="atSchool" checked><strong>Computers Available at School</strong><br>
+ </p>
+
+ <!-- Radio (Notice all share the same name) -->
+ <p>
+ <strong>Gender:</strong>
+ <input type="radio" name="gender" value="male">Male
+ <input type="radio" name="gender" value="female">Female
+ </p>
+
+ <!-- Radio (default selection) -->
+ <p>
+ <strong>Course to take:</strong>
+ <input type="radio" name="course" value="beginner" checked>Beginner
+ <input type="radio" name="course" value="intermediate">Intermediate
+ <input type="radio" name="course" value="advanced">Advanced
+ </p>
+
+ <!-- File Upload -->
+ <p>
+ <strong>Upload your transcript file</strong>
+ <input type="file" name="transcript">
+ </p>
+
+ <!-- textarea (Notice it does not use input) -->
+ <p>
+ <strong>Brief description of why you want to participate</strong><br>
+ <textarea rows="5" cols="80" name="description">Text in box</textarea>
+ </p>
+
+
+ <!-- select (Notice it does not use input) -->
+ <!-- To set the default choice use selected rather than checked -->
+ <p>
+ <strong>Describe your level of expertise</strong>
+ <select name="expertise">
+ <option value="amateur">Amateur</option>
+ <option value="proficient" selected>Proficient</option>
+ </select>
+ </p>
+
+ <!-- select (Notice it does not use input) -->
+ <!-- Notice that the name has a [] set -->
+ <!-- multiple is required for multiple selection -->
+ <p>
+ <strong>Select which development environments you have used.</strong><br>
+ <select name="environments[]" multiple>
+ <option value="Eclipse">Eclipse</option>
+ <option value="Netbeans">Netbeans</option>
+ <option value="CommandLine">CommandLine</option>
+ <option value="VS Code">VS Code</option>
+ </select>
+ </p>
+
+ <p>
+ <input type="reset">
+ <input type="submit">
+ </p>
+ </form>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/FormsSummary/formsSummary.php b/LectureCodeExamples/Week3/WebServersFormsCode/FormsSummary/formsSummary.php
new file mode 100755
index 0000000000000000000000000000000000000000..a5ad607bb87a0d20d050e0a41f6a12907bdf544a
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/FormsSummary/formsSummary.php
@@ -0,0 +1,67 @@
+<?php
+
+ print "<strong>Full Name: </strong> ".$_GET["firstName"]." ".$_GET["lastName"]."<br />";
+ print "<strong>Password Provided was: </strong>".$_GET["password"]."<br />";
+ print "<strong>Email Address: </strong>".$_GET["email"]."<br />";
+ print "<strong>Personal website: </strong>".$_GET["website"]."<br />";
+
+ print "<strong>Owns a laptop: </strong>";
+ if (isset($_GET['ownsLaptop'])) {
+ print "Yes<br />";
+ } else {
+ print "No<br />";
+ }
+
+ print "<strong>Owns a desktop: </strong>";
+ if (isset($_GET['ownsDesktop'])) {
+ print "Yes<br />";
+ } else {
+ print "No<br />";
+ }
+
+ print "<strong>Computers available at school: </strong>";
+ if (isset($_GET['atSchool'])) {
+ print "Yes<br />";
+ } else {
+ print "No<br />";
+ }
+
+ print "<strong>Gender: </strong>";
+ if (isset($_GET['gender'])) {
+ print "{$_GET["gender"]}<br />";
+ } else {
+ print "Not specified<br />";
+ }
+
+ if (isset($_GET['course'])) {
+ print "<strong>Course selected is: {$_GET['course']}</strong><br />";
+ }
+
+ print "<strong>Transcript file: </strong>";
+ if (isset($_GET['transcript'])) {
+ print "{$_GET["transcript"]}<br />";
+ } else {
+ print "None<br />";
+ }
+
+ if (isset($_GET['description'])) {
+ echo "<strong>Description(Using nl2br)</strong><br />";
+ echo nl2br($_GET['description']); // notice use of nl2br
+ echo "<br />";
+ }
+
+ if (isset($_GET['expertise'])) {
+ echo "<strong>Expertise: {$_GET['expertise']}<strong><br />";
+ }
+
+ print "<strong>Environments: </strong><br />";
+ if (!isset($_GET["environments"]))
+ print "No environments selected<br />";
+ else {
+ foreach ($_GET["environments"] as $entry) {
+ print($entry."<br />");
+ }
+ }
+
+ print "</p>";
+?>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/GetExample/formGet.html b/LectureCodeExamples/Week3/WebServersFormsCode/GetExample/formGet.html
new file mode 100755
index 0000000000000000000000000000000000000000..3573ed98c52f1cef37569f2b3b5e1fc6abe71ced
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/GetExample/formGet.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Form Example (Using Get)</title>
+</head>
+
+<body>
+ <h1>Form Example (Using Get)</h1>
+ <form action="getProcessing.php" method="get">
+ <strong>Name: </strong><input type="text" name="name"><br><br>
+ <strong>Age: </strong><input type="text" name="age"><br><br>
+ <input type="submit" value="Submit Data Amiga/Amigo"><br><br>
+ </form>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/GetExample/getProcessing.php b/LectureCodeExamples/Week3/WebServersFormsCode/GetExample/getProcessing.php
new file mode 100755
index 0000000000000000000000000000000000000000..9012f49054bb2ab1c446722d9789926ee7c8958b
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/GetExample/getProcessing.php
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Get Example Processing</title>
+</head>
+
+<body>
+ <?php
+ echo "<h1>Look at the URL; you will see parameters</h1>";
+ echo "<h1>Change parameters and execute script by pressing enter</h1>";
+ $nameSubmitted = $_GET['name'];
+ $ageSubmitted = $_GET['age'];
+ if ($nameSubmitted === "Mary") {
+ echo "<strong>Welcome Mary, my friend!!</strong>";
+ } else {
+ echo "<strong>Welcome $nameSubmitted</strong>";
+ }
+ echo "<br><strong>Received age value is: $ageSubmitted</strong>";
+ ?>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/PostExample/formPost.html b/LectureCodeExamples/Week3/WebServersFormsCode/PostExample/formPost.html
new file mode 100755
index 0000000000000000000000000000000000000000..6dc4c40c9c0d22b2b374c44a0e95faf8075cd957
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/PostExample/formPost.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Form Example (Using Post)</title>
+ <style>
+ body {
+ background-color: silver;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>Form Example (Using Post)</h1>
+ <form action="postProcessing.php" method="post">
+ <strong>Name: </strong><input type="text" name="name"><br><br>
+ <strong>Age: </strong><input type="text" name="age"><br><br>
+ <input type="submit" value="Submit Data Amiga/Amigo"><br><br>
+ </form>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/PostExample/postProcessing.php b/LectureCodeExamples/Week3/WebServersFormsCode/PostExample/postProcessing.php
new file mode 100755
index 0000000000000000000000000000000000000000..e1705eafa4e1b2a535470515487dde4fb3aa27c0
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/PostExample/postProcessing.php
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Post Example Processing</title>
+</head>
+
+<body>
+ <?php
+ echo "<h1>Look at the URL; you will NOT see parameters</h1>";
+ echo "<h1>Execute the script again by reloading this page; what do you see?</h1>";
+ $nameSubmitted = $_POST['name'];
+ $ageSubmitted = $_POST['age'];
+ if ($nameSubmitted === "Mary") {
+ echo "<strong>Welcome Mary, my friend!!</strong>";
+ } else {
+ echo "<strong>Welcome $nameSubmitted</strong>";
+ }
+ echo "<br><strong>Received age value is: $ageSubmitted</strong>";
+ ?>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/SamplePage.html b/LectureCodeExamples/Week3/WebServersFormsCode/SamplePage.html
new file mode 100755
index 0000000000000000000000000000000000000000..c0c8828d4905088413de1619e9ac11b576a189b3
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/SamplePage.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <!-- For responsive page -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Sample Page for Web Server</title>
+</head>
+
+<body>
+ <h1>Sample Page for Web Server</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies purus
+ ut felis malesuada, ut tincidunt magna eleifend. Quisque a augue cursus, aliquet
+ orci a, sagittis turpis. In tempus, orci sodales viverra feugiat, mi lacus mollis enim,
+ a semper massa felis at tortor. Aliquam tincidunt pulvinar bibendum. Vestibulum
+ posuere purus eget dictum posuere. Pellentesque quis massa convallis, imperdiet
+ lorem eget, venenatis ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Quisque augue odio, ultrices quis ornare vitae, congue ut est. Praesent id venenatis arcu.
+ Morbi viverra tortor vel tincidunt dictum. Maecenas tristique sapien vitae dolor rutrum
+ viverra. Praesent eget placerat dui, in pulvinar dolor. Nulla sit amet iaculis eros.
+ </p>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/SearchGoogleYouTube.html b/LectureCodeExamples/Week3/WebServersFormsCode/SearchGoogleYouTube.html
new file mode 100755
index 0000000000000000000000000000000000000000..0cff3bc265c41478992d75c34947ef1d35871126
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/SearchGoogleYouTube.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Search App</title>
+ <style>
+ h1 {
+ text-decoration: underline;
+ }
+
+ h2 {
+ color: red;
+ text-decoration: underline;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>Search App</h1>
+
+ <h2>Search using Google</h2> <!-- https://www.google.com/search?q= -->
+ <form action="https://www.google.com/search" method="get">
+ Enter topic to search <input type="text" name="q">
+ <input type="submit" value="Search in Google">
+ </form>
+
+ <h2>Search using YouTube</h2> <!-- https://www.youtube.com/results?search_query=cat -->
+ <form action="https://www.youtube.com/results" method="get">
+ Enter topic to search <input type="text" name="search_query">
+ <input type="submit" value="Search in YouTube">
+ </form>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/commonHeader.html b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/commonHeader.html
new file mode 100755
index 0000000000000000000000000000000000000000..72642d6c74d374385f98157761a9af03ae7eb503
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/commonHeader.html
@@ -0,0 +1,5 @@
+<div id="headerOne">
+ <a href="http://www.umd.edu"><img id="globe1" src="images/UMDImages/globe1.png" width="10" height="10" alt="globe1 Image"></a>
+ <a href="http://www.cs.umd.edu"><img id="deptcs" src="images/deptcs.png" width="10" height="10" alt="dept Image"></a>
+ <img id="passportHeader" src="images/passportHeader.png" width="10" height="10" alt="passport header Image">
+</div>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/css/mainstylesheet.css b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/css/mainstylesheet.css
new file mode 100755
index 0000000000000000000000000000000000000000..831546ee1b01d3c054b6b78243fb095bde83d486
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/css/mainstylesheet.css
@@ -0,0 +1,74 @@
+/***** HTML Selectors *****/
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 75%;
+ width: 52em;
+}
+
+h1 {
+ text-decoration: underline;
+}
+
+/***** Layout Logic *****/
+#headerOne #globe1 {
+ width: 6em;
+ height: 6em;
+ margin-left: 1em;
+ border-style: none;
+}
+
+#headerOne #deptcs {
+ width: 437px;
+ /* 487px, 52 px */
+ height: 47px;
+ margin-left: 3em;
+ border-style: none;
+ vertical-align: 1em;
+ padding: 0em;
+ margin-bottom: 0em;
+}
+
+#headerOne #passportHeader {
+ width: 251px;
+ height: 46px;
+ margin-left: 18em;
+ padding: 0;
+ margin-top: -1em;
+}
+
+
+#footer {
+ margin-top: 1em;
+ clear: both;
+ font-size: 1.25em;
+ border-style: double;
+ border-color: silver;
+ border-width: .25em;
+ height: 4.5em;
+ padding-top: .35em;
+ background-image: url(../images/background.jpg);
+}
+
+#footer ul {
+ list-style: none;
+}
+
+#footer p {
+ font-size: .85em;
+ font-style: italic;
+ text-align: center;
+}
+
+#footer li {
+ display: inline;
+ border-right-style: solid;
+ border-right-width: .05em;
+ border-right-color: gray;
+ padding-right: .3em;
+ padding-left: .25em;
+}
+
+#footerLastLi li {
+ display: inline;
+ border: none;
+}
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/footer.html b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/footer.html
new file mode 100755
index 0000000000000000000000000000000000000000..4d0a76465e266a9913e12aa3495edc7169951934
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/footer.html
@@ -0,0 +1,11 @@
+ <div id="footer">
+ <ul>
+ <li><a href="index.shtml">Home</a></li>
+ <li><a href="http://www.umd.edu/">University of Maryland College Park</a></li>
+ <li><a href="http://www.cs.umd.edu/">Department of Computer Science</a></li>
+ </ul>
+ <p>
+ <br><br>
+ © University of Maryland
+ </p>
+ </div>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/UMDImages/globe1.png b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/UMDImages/globe1.png
new file mode 100755
index 0000000000000000000000000000000000000000..a520570b976a737215ed91c0e4787aa50b5e4163
Binary files /dev/null and b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/UMDImages/globe1.png differ
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/background.jpg b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/background.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..dca29af4a60852fca1fa0c6124a1e8d2110e06b4
Binary files /dev/null and b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/background.jpg differ
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/deptcs.png b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/deptcs.png
new file mode 100755
index 0000000000000000000000000000000000000000..0b5c6cbf5405dc21533210be4a9097f439f0531a
Binary files /dev/null and b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/deptcs.png differ
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/passportHeader.png b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/passportHeader.png
new file mode 100755
index 0000000000000000000000000000000000000000..c3f10375b71edf391d013be8f2a3ad845fdf1306
Binary files /dev/null and b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/images/passportHeader.png differ
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/index.shtml b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/index.shtml
new file mode 100755
index 0000000000000000000000000000000000000000..d59b070331df49cef6ccc1f7e6b89e7f9f916de1
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/index.shtml
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Server Side Includes Example</title>
+ <link rel="stylesheet" href="css/mainstylesheet.css" title="MainStyle">
+ </head>
+
+ <body>
+ <!--#include virtual="commonHeader.html" -->
+
+ <h1>Passport Program</h1>
+ <p>Summer program offered by the Department of Computer Science.</p>
+
+ <!--#include virtual="footer.html" -->
+
+ <br><br>
+ <hr>
+ <strong>Last Modified: </strong><!--#echo var="LAST_MODIFIED" --><br>
+ <strong>Date: </strong><!--#echo var="DATE_LOCAL" -->
+
+ </body>
+</html>
diff --git a/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/modifiedExtension.html b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/modifiedExtension.html
new file mode 100755
index 0000000000000000000000000000000000000000..d59b070331df49cef6ccc1f7e6b89e7f9f916de1
--- /dev/null
+++ b/LectureCodeExamples/Week3/WebServersFormsCode/ServerSidesIncludesExample/modifiedExtension.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Server Side Includes Example</title>
+ <link rel="stylesheet" href="css/mainstylesheet.css" title="MainStyle">
+ </head>
+
+ <body>
+ <!--#include virtual="commonHeader.html" -->
+
+ <h1>Passport Program</h1>
+ <p>Summer program offered by the Department of Computer Science.</p>
+
+ <!--#include virtual="footer.html" -->
+
+ <br><br>
+ <hr>
+ <strong>Last Modified: </strong><!--#echo var="LAST_MODIFIED" --><br>
+ <strong>Date: </strong><!--#echo var="DATE_LOCAL" -->
+
+ </body>
+</html>
diff --git a/LectureSlides/Week3/AccessFormDataUsingJS.pdf b/LectureSlides/Week3/AccessFormDataUsingJS.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..7d83ac455d586c07431af3e635e979b0110c0ef4
Binary files /dev/null and b/LectureSlides/Week3/AccessFormDataUsingJS.pdf differ
diff --git a/LectureSlides/Week3/Forms.pdf b/LectureSlides/Week3/Forms.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..513ec64ef398608c8119752115c38b8407b289a0
Binary files /dev/null and b/LectureSlides/Week3/Forms.pdf differ
diff --git a/LectureSlides/Week3/MapsFormValidationClasses.pdf b/LectureSlides/Week3/MapsFormValidationClasses.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..374512d153df25fa139c55da1f96ecea68dc5105
Binary files /dev/null and b/LectureSlides/Week3/MapsFormValidationClasses.pdf differ
diff --git a/LectureSlides/Week3/WebServersForms.pdf b/LectureSlides/Week3/WebServersForms.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..3415a6c3c245da867ac4dee4cf810b855f3adbd5
Binary files /dev/null and b/LectureSlides/Week3/WebServersForms.pdf differ