From 94517a3b00ba81dc1b8cf8d7ba3858bf5db93a6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=90=AA?= Date: Fri, 26 Jan 2024 17:18:00 -0500 Subject: [PATCH 01/15] update readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a3a32bc2..3eb86b55 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ # learn-js JavaScript tutorial repo -### REPLACE WITH YOUR FULL NAME +### Qi Zhang From b4dd0a34eb029789a0bcf9daba5fade9b4bc8acb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=90=AA?= Date: Fri, 2 Feb 2024 17:15:12 -0500 Subject: [PATCH 02/15] new changes --- .vscode/launch.json | 15 +++++++++++++++ learn-js | 1 + quiz/arrow.html | 7 +++++-- quiz/scripts/closure.js | 4 +++- quiz/scripts/logger.js | 21 +++++++++++++++++++++ quiz/scripts/manipulatedom.js | 22 ++++++++++++++++++++-- scripts/addEvent.js | 5 +++++ scripts/arrow.js | 4 +++- scripts/manipulatedom.js | 8 ++++++-- scripts/simple-closure.js | 2 +- 10 files changed, 80 insertions(+), 9 deletions(-) create mode 100644 .vscode/launch.json create mode 160000 learn-js diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..2ba986f6 --- /dev/null +++ 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}" + } + ] +} \ No newline at end of file diff --git a/learn-js b/learn-js new file mode 160000 index 00000000..4f079a9d --- /dev/null +++ b/learn-js @@ -0,0 +1 @@ +Subproject commit 4f079a9d40f5c0587a2645258ec149210d9da3ca diff --git a/quiz/arrow.html b/quiz/arrow.html index d877db1a..793a4454 100644 --- a/quiz/arrow.html +++ b/quiz/arrow.html @@ -10,16 +10,19 @@

DEMO

diff --git a/quiz/scripts/closure.js b/quiz/scripts/closure.js index 627414d2..03ded5d8 100644 --- 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 index 5d03eb67..a2b57d1c 100644 --- 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); \ No newline at end of file diff --git a/quiz/scripts/manipulatedom.js b/quiz/scripts/manipulatedom.js index 32e731e1..bb7ae127 100644 --- a/quiz/scripts/manipulatedom.js +++ b/quiz/scripts/manipulatedom.js @@ -12,6 +12,8 @@ function createTRNode(colNodes) { function createTDNode(childNode) { let tdNode = document.createElement("td"); + tdNode.id = id; + tdNode.classList.add('tdNode'); tdNode.appendChild(childNode); return tdNode; } @@ -21,11 +23,27 @@ function createTxtNode(txt) { return txtNode; } +function createButtonNode(txt, index='') { + let btnNode = document.createElement('button'); + btnNode.innerText = txt; + btnNode.onClick = () => { + handleEditTextClick(index); + } + return btnNode; +} + +function handleEditTextClick(index) { + let cell = document.getElementById(`col - ${index}`); + // replace input with text + cell.innerHTML = ' { 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 index 32e731e1..1afcab66 100644 --- a/scripts/manipulatedom.js +++ b/scripts/manipulatedom.js @@ -2,9 +2,10 @@ window.onload = function() { document.getElementById('addTableBtn').addEventListener('click', addTable); } +// assume it is a list of code with columns function createTRNode(colNodes) { let trNode = document.createElement("tr"); - colNodes.forEach(function(colNode) { + colNodes.forEach(function(colNode) { // in each TR, there is a list of TD trNode.appendChild(colNode); }) return trNode; @@ -12,15 +13,18 @@ function createTRNode(colNodes) { function createTDNode(childNode) { let tdNode = document.createElement("td"); - tdNode.appendChild(childNode); + tdNode.classList.add(tdNode); // add css style to this node + tdNode.appendChild(childNode); // anything return tdNode; } +// pre-defined function createTxtNode(txt) { let txtNode = document.createTextNode(txt); return txtNode; } +// want three nodes, so iterate function addTable() { const tableNode = document.createElement("table"); for(let i = 0; i < 3; i++) { diff --git a/scripts/simple-closure.js b/scripts/simple-closure.js index 243fa55b..6fed2afb 100644 --- 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(); From a9f46064250b8dac0d077e0a92f37aff67143d94 Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Mon, 29 Jan 2024 10:21:40 -0500 Subject: [PATCH 03/15] td style --- css/index.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/index.css b/css/index.css index 4730b436..883e51e1 100644 --- a/css/index.css +++ b/css/index.css @@ -10,6 +10,10 @@ button { font-size: 1.2em; } +table, .tdNode { + border: 1px solid red; +} + input { font-size: 1.2em; } From 5aa18e498573a6b3cfee07346011276e75da80eb Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Mon, 29 Jan 2024 11:56:35 -0500 Subject: [PATCH 04/15] strings quiz --- quiz/hideEmail-q.html | 14 ++++++++++++++ quiz/scripts/hideEmail-q.js | 11 +++++++++++ 2 files changed, 25 insertions(+) create mode 100644 quiz/hideEmail-q.html create mode 100644 quiz/scripts/hideEmail-q.js diff --git a/quiz/hideEmail-q.html b/quiz/hideEmail-q.html new file mode 100644 index 00000000..f0e42d70 --- /dev/null +++ b/quiz/hideEmail-q.html @@ -0,0 +1,14 @@ + + + + + Hide Email + + + + +
+
    +
    + + \ No newline at end of file diff --git a/quiz/scripts/hideEmail-q.js b/quiz/scripts/hideEmail-q.js new file mode 100644 index 00000000..ba41173b --- /dev/null +++ b/quiz/scripts/hideEmail-q.js @@ -0,0 +1,11 @@ +/* anonymizes the username(local part) of an email ID, that is, +replace the username part with * characters. +*/ +const emails = ['mary@northeastern.edu', 'ari@khoury.northeastern.edu', 'jk_neu.edu', 'jk@neu.edu', 'jsned@', 'ai_me@mugar.northeastern.edu']; +window.onload = function hideEmail() { + const list = document.getElementById('emails') + list.innerHTML = ''; + for (const email of emails) { + // complete the loop + } +} \ No newline at end of file From 369bbc38d70f8a3cafffcdca55045290905094d3 Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Mon, 29 Jan 2024 13:52:01 -0500 Subject: [PATCH 05/15] arrays --- quiz/array1-q.html | 16 ++++++++++++++++ quiz/scripts/array1-q.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 quiz/array1-q.html create mode 100644 quiz/scripts/array1-q.js diff --git a/quiz/array1-q.html b/quiz/array1-q.html new file mode 100644 index 00000000..3ac806b1 --- /dev/null +++ b/quiz/array1-q.html @@ -0,0 +1,16 @@ + + + + + Add Event + + + + +
    + + +
      +
      + + \ No newline at end of file diff --git a/quiz/scripts/array1-q.js b/quiz/scripts/array1-q.js new file mode 100644 index 00000000..a5b8e944 --- /dev/null +++ b/quiz/scripts/array1-q.js @@ -0,0 +1,32 @@ +window.onload = function() { + const list = document.getElementById('Top5'); + const inp = document.getElementById('inp'); + const btn = document.getElementById('btn'); + list.innerHTML = ''; + + const myHistory = []; + const MAX_HISTORY = 5; + + btn.onclick = () => { + // we will only allow a term to be entered if the search input isn't empty + if (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 = ''; + + // loop through the sorted array, and display all the search terms in the list + for (const itemText of myHistoryCopy) { + + } + + // If the array length is 5 or more, remove the oldest search term + if (myHistory.length >= MAX_HISTORY) { + + } + + // empty the search input and focus it, ready for the next term to be entered + inp.value = ''; + btn.focus(); + } + } +} \ No newline at end of file From f543dab7ae01edb16825af41daa2b01d4492e409 Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Wed, 31 Jan 2024 12:23:51 -0500 Subject: [PATCH 06/15] for iter --- scripts/forEach.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 scripts/forEach.js diff --git a/scripts/forEach.js b/scripts/forEach.js new file mode 100644 index 00000000..36ae81f8 --- /dev/null +++ b/scripts/forEach.js @@ -0,0 +1,21 @@ +// Array of transactions +const transactions = [ + { description: 'Groceries', amount: 50 }, + { description: 'Clothing', amount: 100 }, + { description: 'Dining out', amount: 30 }, + { description: 'Electronics', amount: 200 } + ]; + + // Initializing total amount + let totalAmount = 0; + + // Using forEach to calculate the total amount spent and show the original array + transactions.forEach((transaction, index, originalArray) => { + totalAmount += transaction.amount; + console.log(`Transaction ${index + 1}: ${transaction.description} - $${transaction.amount}`); + console.log('Original Array:', originalArray); + }); + + // Displaying the total amount spent + console.log('Total Amount Spent:', totalAmount); + \ No newline at end of file From 2620894636833e7a7b566bc7825e213df772e46f Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Wed, 31 Jan 2024 12:55:06 -0500 Subject: [PATCH 07/15] maps --- quiz/scripts/map-deep.js | 18 ++++++++++++++++++ scripts/map.js | 19 +++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 quiz/scripts/map-deep.js create mode 100644 scripts/map.js diff --git a/quiz/scripts/map-deep.js b/quiz/scripts/map-deep.js new file mode 100644 index 00000000..e97665e5 --- /dev/null +++ b/quiz/scripts/map-deep.js @@ -0,0 +1,18 @@ +// Original matrix (list of lists) +const originalMatrix = [ + [3, 2, 1], + [4, 5, 6], + [7, 9, 8] + ]; + + const newMatrix = originalMatrix.map((row) => { + return row.sort(); + }); + + // Modifying the original matrix (changing the last element of the first row) + originalMatrix[0][2] = 99; + + // Displaying the original and new matrices + console.log('Original Matrix (modified):', originalMatrix); + console.log('New Matrix (unaffected):', newMatrix); + \ No newline at end of file diff --git a/scripts/map.js b/scripts/map.js new file mode 100644 index 00000000..ad9e4a97 --- /dev/null +++ b/scripts/map.js @@ -0,0 +1,19 @@ +// Original array of objects +const originalArray = [ + { id: 1, name: 'Alice', age:24 }, + { id: 2, name: 'Bob', age: 56 }, + { id: 3, name: 'Charlie', age:35 } + ]; + + // Using map to create a new array (shallow copy) with modified names + const newArray = originalArray.map((item) => { + // Creating a new object with the same properties + // return { id: item.id, name: item.name.toUpperCase(), age: item.age }; + // spread syntax creates a shallow copy + return { ...item, name: item.name.toUpperCase() }; + }); + + // Displaying the original and new arrays + console.log('Original Array:', originalArray); + console.log('New Array (shallow copy with modified names):', newArray); + \ No newline at end of file From 3b329dc2f87c47340f7db6bc2f30a95c6c84386a Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Wed, 31 Jan 2024 13:04:59 -0500 Subject: [PATCH 08/15] filter --- scripts/filter.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 scripts/filter.js diff --git a/scripts/filter.js b/scripts/filter.js new file mode 100644 index 00000000..89125ac2 --- /dev/null +++ b/scripts/filter.js @@ -0,0 +1,19 @@ +// Original array of objects +const people = [ + { id: 1, name: 'Alice' }, + { id: 2, name: 'Miriam' }, + { id: 3, name: 'Aditya' }, + { id: 4, name: 'Malcolm' }, + { id: 5, name: 'Zhi' } + ]; + + // Character or substring to search for at the beginning of the name + const startsWithChar = 'A'; + + // Using filter to create a new array with objects where the name starts with the specified character + const filteredPeople = people.filter(person => person.name.startsWith(startsWithChar)); + + // Displaying the original and filtered arrays + console.log('Original People Array:', people); + console.log(`Filtered People Array (names starting with "${startsWithChar}"):`, filteredPeople); + \ No newline at end of file From 389e0354513b4b16bee36eb7b94327b13e279022 Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Wed, 31 Jan 2024 13:23:16 -0500 Subject: [PATCH 09/15] error handle --- quiz/exception.html | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 quiz/exception.html diff --git a/quiz/exception.html b/quiz/exception.html new file mode 100644 index 00000000..c154b213 --- /dev/null +++ b/quiz/exception.html @@ -0,0 +1,37 @@ + + + + + + Error Handling with Array Map + + + +

      Error Handling with Array Map

      + + + + + + + + + + From 837f3ba9a6860b2e6ec5aeb56c6dc0a389528160 Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Wed, 31 Jan 2024 14:18:48 -0500 Subject: [PATCH 10/15] stack --- quiz/scripts/stack-q1.js | 33 +++++++++++++++++++++++++++++++++ scripts/stack-q.js | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 quiz/scripts/stack-q1.js create mode 100644 scripts/stack-q.js diff --git a/quiz/scripts/stack-q1.js b/quiz/scripts/stack-q1.js new file mode 100644 index 00000000..0d719223 --- /dev/null +++ b/quiz/scripts/stack-q1.js @@ -0,0 +1,33 @@ +class PStack { + #id; + constructor() { + this.#id = 1; + this._persons = []; + } + + showId() { + return this.#id; + } + +} + +class PStackImpl extends PStack { + constructor() { + super(); + } + + push(p) { + return this._persons.push(p) + } + + pop() { + return this._persons.pop().age + } +} + +let pstack = new PStackImpl(); +pstack.persons = [{name: 'Jojo', age: 21}, {name: 'Gabi', age: 29}] +pstack.push({name: 'Dein', age: 19}); +console.log(pstack.pop()); +console.log(pstack.pop()); +console.log(pstack.persons); diff --git a/scripts/stack-q.js b/scripts/stack-q.js new file mode 100644 index 00000000..dedb6431 --- /dev/null +++ b/scripts/stack-q.js @@ -0,0 +1,40 @@ +class PStack { + #id; + constructor() { + this.#id = 1; + this.persons = []; + } + + showId() { + return this.#id; + } + +} + +class PStackImpl extends PStack { + constructor() { + super(); + this.persons = []; + } + push(p) { + return this.persons.push(p) + } + + pop() { + return this.persons.pop().age + } + + show() { + return this.persons + } + +} + +let pstack = new PStackImpl(); +pstack.push({name: 'Jojo', age: 21}); +pstack.push({name: 'Gabi', age: 29}); +pstack.push({name: 'Dein', age: 19}); +console.log(pstack.pop()); +console.log(pstack.pop()); +console.log(pstack.show()); +console.log(pstack.persons); From 03c13435bca3e7717f78d3d4500600777b974ff5 Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Wed, 31 Jan 2024 14:22:41 -0500 Subject: [PATCH 11/15] error --- exception-eg.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 exception-eg.html diff --git a/exception-eg.html b/exception-eg.html new file mode 100644 index 00000000..9a0937f9 --- /dev/null +++ b/exception-eg.html @@ -0,0 +1,15 @@ + + + + + Exception + + + +
      +

      Please input a number between 5 and 10:

      + + +

      + + \ No newline at end of file From 7245c6349181a11d38d9f6f39bec7002b2351bdf Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Wed, 31 Jan 2024 14:23:34 -0500 Subject: [PATCH 12/15] minor --- scripts/exception.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 scripts/exception.js diff --git a/scripts/exception.js b/scripts/exception.js new file mode 100644 index 00000000..c5e554fa --- /dev/null +++ b/scripts/exception.js @@ -0,0 +1,26 @@ +window.onload = function() { + const btn = document.getElementById('btn') + btn.onclick = () => { + const message = document.getElementById("p01"); + message.textContent = ""; + let x = document.getElementById("demo").value; + try { + if(x == "") throw 'empty'; + if(isNan(x)) throw 'not a number'; + x = Number(x); + if(x < 5) throw 'too low'; + if(x > 10) throw 'too high'; + } + catch(err) { + if(err instanceof ReferenceError) { + message.textContent = err.message; + } + else { + message.textContent = "Input " + err; + } + } + finally { + document.getElementById("demo").value = ''; + } + } +} \ No newline at end of file From 31c30cad66c76b13d7e2b859eefa2e1b4b919e50 Mon Sep 17 00:00:00 2001 From: Joydeep Mitra Date: Thu, 1 Feb 2024 14:17:22 -0500 Subject: [PATCH 13/15] minor --- scripts/stack-q.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/scripts/stack-q.js b/scripts/stack-q.js index dedb6431..e86cb834 100644 --- a/scripts/stack-q.js +++ b/scripts/stack-q.js @@ -2,7 +2,6 @@ class PStack { #id; constructor() { this.#id = 1; - this.persons = []; } showId() { @@ -37,4 +36,3 @@ pstack.push({name: 'Dein', age: 19}); console.log(pstack.pop()); console.log(pstack.pop()); console.log(pstack.show()); -console.log(pstack.persons); From e5fd22e6246e139a3a1b27818c264359433e0100 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=90=AA?= Date: Mon, 5 Feb 2024 14:18:04 -0500 Subject: [PATCH 14/15] new --- learn-js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn-js b/learn-js index 4f079a9d..ed4d15b5 160000 --- a/learn-js +++ b/learn-js @@ -1 +1 @@ -Subproject commit 4f079a9d40f5c0587a2645258ec149210d9da3ca +Subproject commit ed4d15b551b9cda6c9f215f92192793bb30138ff From a982acd3daf42d3e1cdf246e6e0b8cb94c338763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=90=AA?= Date: Mon, 5 Feb 2024 16:25:07 -0500 Subject: [PATCH 15/15] Feb 02 Quiz --- navigatedom.html | 2 +- quiz/manipulatedom.html | 2 +- quiz/scripts/array1-q.js | 13 +++++++++++-- quiz/scripts/manipulatedom.js | 17 ++++++++--------- quiz/scripts/map-deep.js | 2 +- scripts/manipulatedom.js | 7 ++----- 6 files changed, 24 insertions(+), 19 deletions(-) diff --git a/navigatedom.html b/navigatedom.html index 150cda41..1e3caedc 100644 --- a/navigatedom.html +++ b/navigatedom.html @@ -1,7 +1,7 @@ Navigate DOM - + diff --git a/quiz/manipulatedom.html b/quiz/manipulatedom.html index 653842f6..63097e93 100644 --- a/quiz/manipulatedom.html +++ b/quiz/manipulatedom.html @@ -8,4 +8,4 @@

      This is a paragraph

      - + \ No newline at end of file diff --git a/quiz/scripts/array1-q.js b/quiz/scripts/array1-q.js index a5b8e944..63fb7994 100644 --- 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/manipulatedom.js b/quiz/scripts/manipulatedom.js index bb7ae127..7f2b89d5 100644 --- a/quiz/scripts/manipulatedom.js +++ b/quiz/scripts/manipulatedom.js @@ -10,7 +10,7 @@ function createTRNode(colNodes) { return trNode; } -function createTDNode(childNode) { +function createTDNode(childNode, id) { let tdNode = document.createElement("td"); tdNode.id = id; tdNode.classList.add('tdNode'); @@ -24,9 +24,9 @@ function createTxtNode(txt) { } function createButtonNode(txt, index='') { - let btnNode = document.createElement('button'); + const btnNode = document.createElement('button'); btnNode.innerText = txt; - btnNode.onClick = () => { + btnNode.onclick = () => { handleEditTextClick(index); } return btnNode; @@ -34,16 +34,15 @@ function createButtonNode(txt, index='') { function handleEditTextClick(index) { let cell = document.getElementById(`col - ${index}`); - // replace input with text - cell.innerHTML = ' { - return row.sort(); + return row.slice().sort(); }); // Modifying the original matrix (changing the last element of the first row) diff --git a/scripts/manipulatedom.js b/scripts/manipulatedom.js index 6fe40220..cbae347f 100644 --- a/scripts/manipulatedom.js +++ b/scripts/manipulatedom.js @@ -2,10 +2,9 @@ window.onload = function() { document.getElementById('addTableBtn').addEventListener('click', addTable); } -// assume it is a list of code with columns function createTRNode(colNodes) { let trNode = document.createElement("tr"); - colNodes.forEach(function(colNode) { // in each TR, there is a list of TD + colNodes.forEach(function(colNode) { trNode.appendChild(colNode); }) return trNode; @@ -18,13 +17,11 @@ function createTDNode(childNode) { return tdNode; } -// pre-defined function createTxtNode(txt) { let txtNode = document.createTextNode(txt); return txtNode; } -// want three nodes, so iterate function addTable() { const tableNode = document.createElement("table"); for(let i = 0; i < 3; i++) { @@ -32,4 +29,4 @@ function addTable() { tableNode.appendChild(createTRNode([col1])); } document.getElementById("root").appendChild(tableNode); -} +} \ No newline at end of file