01302024

README.md

@@ -1,4 +1,4 @@
 # learn-js
 JavaScript tutorial repo
 
-### REPLACE WITH YOUR FULL NAME
+### MUHAMMAD MEHDI ALI

quiz/arrow.html

@@ -12,7 +12,7 @@
     <script>
         const obj = {
             msg: 'Hello World',
-            hello:  () => {
+            hello:  function() {
                 document.getElementById('demo').innerHTML += this.msg;
             }
         };

quiz/scripts/addEvent.js

@@ -1,18 +1,18 @@
 window.onload = function() {
     let x = document.getElementById('myBtn');
-    x.addEventListener('mouseover', myFunction('Moused over!'));
-    x.addEventListener('click', mySecondFunction('Clicked!'));
-    x.addEventListener('mouseout', myThirdFunction('Moused out!'));
+    x.addEventListener('mouseover', myFunction);
+    x.addEventListener('click', mySecondFunction);
+    x.addEventListener('mouseout', myThirdFunction);
 }
 
-function myFunction(msg) {
-    document.getElementById('demo').textContent = msg;
+function myFunction() {
+    document.getElementById('demo').textContent = "Moused over!";
 }
 
-function mySecondFunction(msg) {
-    document.getElementById('demo').textContent = msg;
+function mySecondFunction() {
+    document.getElementById('demo').textContent = "Clicked!";
 }
 
-function myThirdFunction(msg) {
-    document.getElementById('demo').textContent = msg;
+function myThirdFunction() {
+    document.getElementById('demo').textContent = 'Moused out!';
 }

quiz/scripts/closure.js

@@ -9,5 +9,5 @@ function setColor(set) {
 
 window.onload = function() {
     let toggle = true;
-    document.getElementById('btn').onclick = setColor(toggle);
+    document.getElementById('btn').onclick = ()=>setColor(toggle);
 }

quiz/scripts/logger.js

@@ -1 +1,20 @@
 // Define a JavaScript function called logMsg() that can be used to log an error message for any object that contains the property errMsg. 
+function logMsg() {
+    if (this && this.errMsg) {
+        console.error(this.errMsg);
+    } else {
+        console.log("No error message found.");
+    }
+}
+
+
+const objectWithErrorMessage = {
+    errMsg: "This is an error message."
+};
+
+const objectWithoutErrorMessage = {
+    someData: "No error message here."
+};
+
+logMsg.call(objectWithErrorMessage);     // Logs the error message
+logMsg.call(objectWithoutErrorMessage);

quiz/scripts/manipulatedom.js

@@ -10,7 +10,14 @@ function createTRNode(colNodes) {
   return trNode;
 }
 
-function createTDNode(childNode) {
+function createTDNode(childNode,i) {
+  let tdNode = document.createElement("td");
+  tdNode.appendChild(childNode);
+  tdNode.id=i
+  return tdNode;
+}
+
+function createTDNodeWithoutId(childNode,i) {
   let tdNode = document.createElement("td");
   tdNode.appendChild(childNode);
   return tdNode;
@@ -23,9 +30,32 @@ function createTxtNode(txt) {
 
 function addTable() {
   const tableNode = document.createElement("table");
+  var timestamp = new Date().getTime(); 
   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)"),timestamp+i);
+	let edit = document.createElement('button')
+	edit.appendChild(createTxtNode("Edit Text"))
+	edit.addEventListener('click', function() {
+    myButtonClickHandler(timestamp+i);
+});
+	let col2 = createTDNodeWithoutId(edit,i)
+    tableNode.appendChild(createTRNode([col1,col2]));	
   }
   document.getElementById("root").appendChild(tableNode);
 }
+
+
+function myButtonClickHandler(parameter) {
+    td=document.getElementById(parameter)
+	td.removeChild(td.firstChild)
+	var inputField = document.createElement('input');
+
+	// Set the type attribute to 'text' for a text input field
+	inputField.type = 'text';
+
+	// Set other attributes as needed (e.g., id, name, placeholder)
+	inputField.placeholder = 'Enter Cell(x,y)...';
+	td.appendChild(inputField)
+}
+
+// Add an event listener to the button, passing the parameter using a wrapper function

quiz/vars1.html

@@ -7,7 +7,7 @@
             {
                 y = y + 1;
                 console.log(x+y);
-                let y = 2;
+                var y = 2;
             }
             console.log(x);
             console.log(y);

quiz/vars2.html

@@ -3,11 +3,14 @@
         <script>
             // change the script such that i=0,1,2,3,4 is logged in the console
             for (var i = 0; i < 5; i++) {
-                // setTimeout executes the function after 5 ms
-                setTimeout(function() {
-                    console.log(i);
-                }, 0);
+                // Using an IIFE (Immediately Invoked Function Expression) to capture the current value of i
+                (function(index) {
+                    setTimeout(function() {
+                        console.log(index);
+                    }, 0);
+                })(i);
             }
+
         </script>
     </head>
     <body>

quiz/vars3.html

@@ -5,8 +5,8 @@
             const PI = 3.14159;
             {
                 let radius = 5;
-                let area = PI * radius * radius;
-                PI = 3.0;
+                var area = PI * radius * radius;
+                //PI = 3.0;
             }
             console.log(area);
 

quiz/where2putjs.html

@@ -4,19 +4,19 @@
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="../css/index.css">
-    <script>
-        document.getElementById("demo").textContent = "A paragraph";
-        function myFunction() {
-            document.getElementById("demo").textContent = "Paragraph changed after click.";
-        }
-    </script>
+
 </head>
 <body>
 <div id="root">
     <h2>Demo JavaScript in Body</h2>
     <p id="demo"> Placeholder ... </p>
     <button type="button" onclick="myFunction()">Try it</button>
 </div>
-
+    <script>
+        document.getElementById("demo").textContent = "A paragraph";
+        function myFunction() {
+            document.getElementById("demo").textContent = "Paragraph changed after click.";
+        }
+    </script>
 </body>
 </html>

scripts/whatisthis.js

@@ -9,4 +9,5 @@ const person = {
     }
 }
 
-console.log(person.fullName());
+console.log(person.fullName());
+console.log(window.lastName);