CSE-316-Software-Development · qizhang64 · Jan 26, 2024 · Feb 2, 2024 · Jan 29, 2024 · Jan 29, 2024
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
 # learn-js
 JavaScript tutorial repo
 
-### REPLACE WITH YOUR FULL NAME
+### Qi Zhang
diff --git a/learn-js b/learn-js
diff --git a/navigatedom.html b/navigatedom.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <title> Navigate DOM </title>
-    <!-- <link rel="stylesheet" href="css/index.css"> -->
+    <link rel="stylesheet" href="css/index.css">
     <script src="scripts/navigatedom.js"></script>
   </head>
   <body>

diff --git a/quiz/arrow.html b/quiz/arrow.html
@@ -10,16 +10,19 @@
         <p id="demo"> DEMO </p>
     </div>
     <script>
+        window.msg = 'hello cs';
         const obj = {
             msg: 'Hello World',
-            hello:  () => {
+            hello:  () => { // function()
                 document.getElementById('demo').innerHTML += this.msg;
             }
         };
-        window.addEventListener('load', () => {
+        window.addEventListener('load', () => { // change to normal function to avoid window again
+            console.log(this);
             obj.hello();
         });
         document.getElementById('btn').addEventListener('click', () => {
+            console.log(this);
             obj.hello();
         });
     </script>

diff --git a/quiz/manipulatedom.html b/quiz/manipulatedom.html
@@ -8,4 +8,4 @@
     <p> This is a paragraph </p>
     <button id="addTableBtn">Add Table </button>
   </div>
-</body>
+</body>
diff --git a/quiz/scripts/array1-q.js b/quiz/scripts/array1-q.js
@@ -10,18 +10,27 @@ window.onload = function() {
     btn.onclick = () => {
     // we will only allow a term to be entered if the search input isn't empty
       if (inp.value !== '') {
+              myHistory.unshift(inp.value);
+
               // empty the list so that we don't display duplicate entries
               // the display is regenerated every time a search term is entered.
               list.innerHTML = '';
 
+              let myHistoryCopy = Array.from(myHistory);
+              myHistoryCopy.sort(function(a,b) {
+                return a.length - b.length;
+              });
+
               // loop through the sorted array, and display all the search terms in the list
               for (const itemText of myHistoryCopy) {
-
+                const listItem = document.createElement('li');
+                listItem.textContent = itemText;
+                list.appendChild(listItem);
               }
 
               // If the array length is 5 or more, remove the oldest search term
               if (myHistory.length >= MAX_HISTORY) {
-
+                myHistory.pop();
               }
 
               // empty the search input and focus it, ready for the next term to be entered

diff --git a/quiz/scripts/closure.js b/quiz/scripts/closure.js
@@ -9,5 +9,7 @@ function setColor(set) {
 
 window.onload = function() {
     let toggle = true;
-    document.getElementById('btn').onclick = setColor(toggle);
+    document.getElementById('btn').onclick = () => {
+        setColor(toggle);
+    }
 }
diff --git a/quiz/scripts/logger.js b/quiz/scripts/logger.js
@@ -1 +1,22 @@
 // Define a JavaScript function called logMsg() that can be used to log an error message for any object that contains the property errMsg. 
+// logMsg.call(o1);
+// logMsg.call(o2);
+
+const logger = {
+    logMsg: function() {
+        if (this.errMsg) {
+            console.log('Error Message from : ${this.errMsg}');
+        }
+    }
+}
+
+const obj1 = {
+    errMsg: "Error in obj1"
+}
+
+const obj2 = {
+    errMsg: "Error in obj1"
+}
+
+logger.logMsg.call(obj1);
+logger.logMsg.call(obj2);
diff --git a/quiz/scripts/manipulatedom.js b/quiz/scripts/manipulatedom.js
@@ -10,8 +10,10 @@ function createTRNode(colNodes) {
   return trNode;
 }
 
-function createTDNode(childNode) {
+function createTDNode(childNode, id) {
   let tdNode = document.createElement("td");
+  tdNode.id = id;
+  tdNode.classList.add('tdNode');
   tdNode.appendChild(childNode);
   return tdNode;
 }
@@ -21,11 +23,26 @@ function createTxtNode(txt) {
   return txtNode;
 }
 
+function createButtonNode(txt, index='') {
+  const btnNode = document.createElement('button');
+  btnNode.innerText = txt;
+  btnNode.onclick = () => {
+    handleEditTextClick(index);
+  }
+  return btnNode;
+}
+
+function handleEditTextClick(index) {
+  let cell = document.getElementById(`col - ${index}`);
+  cell.innerHTML = '<input type="text" placeholder = "Enter Cell(x,y)">';
+}
+
 function addTable() {
   const tableNode = document.createElement("table");
   for(let i = 0; i < 3; i++) {
-    let col1 = createTDNode(createTxtNode("Cell (" + i + ", 0)"));
-    tableNode.appendChild(createTRNode([col1]));
+    let col1 = createTDNode(createTxtNode("Cell (" + i + ", 0)"), `col - ${i}`);
+    let col2 = createTDNode(createButtonNode('Edit text', i))
+    tableNode.appendChild(createTRNode([col1, col2]));
   }
   document.getElementById("root").appendChild(tableNode);
-}
+}
diff --git a/quiz/scripts/map-deep.js b/quiz/scripts/map-deep.js
@@ -6,7 +6,7 @@ const originalMatrix = [
   ];
 
   const newMatrix = originalMatrix.map((row) => {
-    return row.sort();
+    return row.slice().sort();
   });
 
   // Modifying the original matrix (changing the last element of the first row)

diff --git a/scripts/addEvent.js b/scripts/addEvent.js
@@ -3,6 +3,7 @@ window.onload = function() {
     x.addEventListener('mouseover', myFunction);
     x.addEventListener('click', mySecondFunction);
     x.addEventListener('mouseout', myThirdFunction);
+    x.addEventListener('click', myFourthFunction);
 }
 
 function myFunction() {
@@ -15,4 +16,8 @@ function mySecondFunction() {
 
 function myThirdFunction() {
     document.getElementById('demo').textContent = 'Moused out!';
+}
+
+function myFourthFunction() {
+    document.getElementById('demo').logout;
 }
diff --git a/scripts/arrow.js b/scripts/arrow.js
@@ -1,10 +1,12 @@
+// this.firstname = 'Jane', then return: Jane undefined
 const o = {
     msg: 'An object',
     person: {
         firstName: 'Grace',
         lastName: 'Hopper',
         age: 89,
-        fullName: () => { return this.firstName + ' ' + this.lastName }
+        fullName: () => { return this.firstName + ' ' + this.lastName } // undefined undefined
+        // if changed to original function(), return: Grace Hopper
     }
 }
 

diff --git a/scripts/manipulatedom.js b/scripts/manipulatedom.js
@@ -29,4 +29,4 @@ function addTable() {
     tableNode.appendChild(createTRNode([col1]));
   }
   document.getElementById("root").appendChild(tableNode);
-}
+}
diff --git a/scripts/simple-closure.js b/scripts/simple-closure.js
@@ -3,7 +3,7 @@ function makeFunc() {
     function dispName() {
         console.log(name);
     }
-    return dispName;
+    return dispName; // a closure
 }
 
 const f = makeFunc();
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,4 +8,4 @@ @@
         <p> This is a paragraph </p>
         <button id="addTableBtn">Add Table </button>
       </div>
-    </body>
+    </body>