DEMO
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/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..7f2b89d5 100644 --- 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 = ''; +} + 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); -} +} \ No newline at end of file diff --git a/quiz/scripts/map-deep.js b/quiz/scripts/map-deep.js index e97665e5..128d1ac6 100644 --- 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 index 6b7707b6..95e17403 100644 --- 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; } \ No newline at end of file diff --git a/scripts/arrow.js b/scripts/arrow.js index 6a1c7a8b..8c08c5da 100644 --- 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 index a8ebc462..cbae347f 100644 --- a/scripts/manipulatedom.js +++ b/scripts/manipulatedom.js @@ -29,4 +29,4 @@ function addTable() { tableNode.appendChild(createTRNode([col1])); } document.getElementById("root").appendChild(tableNode); -} +} \ No newline at end of file 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();