From 7b4dfe92239422945c259e0c832c0d7c24d05b13 Mon Sep 17 00:00:00 2001 From: chezlinbenson Date: Wed, 21 Sep 2022 16:21:57 +0200 Subject: [PATCH 1/4] Completed javascript debugging, exercises and errors exercise 3. --- debugging/demo/demo1/demo1.js | 2 +- debugging/demo/demo2/index.html | 2 +- debugging/demo/demo2/script.js | 88 +++++++++++----------- debugging/exercises/exercise1/exercise1.js | 10 +-- debugging/exercises/exercise2/index.html | 2 +- debugging/exercises/exercise2/main.js | 23 +++--- errors/exercise1.js | 4 +- errors/exercise2.js | 12 +-- errors/exercise3.js | 4 +- errors/exercise4.js | 3 +- 10 files changed, 83 insertions(+), 67 deletions(-) diff --git a/debugging/demo/demo1/demo1.js b/debugging/demo/demo1/demo1.js index 0d8e695..3f13dc1 100644 --- a/debugging/demo/demo1/demo1.js +++ b/debugging/demo/demo1/demo1.js @@ -1,5 +1,5 @@ const tomatoes = 'tomatoes'; -const chocolate= 'chocolate'yummy'; +const chocolate= 'chocolate'; const yogurt = 'yogurt'; const rice = "rice"; diff --git a/debugging/demo/demo2/index.html b/debugging/demo/demo2/index.html index 8cc1a42..1821f6e 100644 --- a/debugging/demo/demo2/index.html +++ b/debugging/demo/demo2/index.html @@ -1,6 +1,5 @@ - Javascript Demo Exercise 2
+ diff --git a/debugging/demo/demo2/script.js b/debugging/demo/demo2/script.js index 1c7bec9..bb17b4c 100644 --- a/debugging/demo/demo2/script.js +++ b/debugging/demo/demo2/script.js @@ -1,43 +1,47 @@ -document.addEventListener("DOMContentLoaded", ( ) => { - var data = [ - { - text: 'Overshadowing #UNGA is the big question: Will Obama and Rouhani meet?', - href: 'https://twitter.com/cnnbrk/status/382528782738800641' - }, - { - text: "Marine's family hopes visiting Iranian president will help free their son", - href: 'https://twitter.com/cnnbrk/status/382519683053649920' - }, - { - text: 'Obama addresses United Nations.', - href: 'https://twitter.com/cnnbrk/status/382507500903202817' - }, - { - text: '', - href: 'https://twitter.com/CNNMoney/status/382497891723804672' - }, - { - text: "If you're seeing this as a button, congratulations!", - href: 'http://twitter.com' - } - ]; - for (var i = 0; i { +var data = [ + { + text: "Overshadowing #UNGA is the big question: Will Obama and Rouhani meet?", + href: "https://twitter.com/cnnbrk/status/382528782738800641", + }, + { + text: "Marine's family hopes visiting Iranian president will help free their son", + href: "https://twitter.com/cnnbrk/status/382519683053649920", + }, + { + text: "Obama addresses United Nations.", + href: "https://twitter.com/cnnbrk/status/382507500903202817", + }, + { + text: "", + href: "https://twitter.com/CNNMoney/status/382497891723804672", + }, + { + text: "If you're seeing this as a button, congratulations!", + href: "http://twitter.com", + }, +]; +for (var i = 0; i < data.length; i++) { + if (data.text) { + const pElement = document.createElement("p"); + const button = document.createElement("button"); + button.type = "button"; + button.classList.add(["btn", "btn-default"]); + button.setAttribute("data-href", data.href); + button.innerText = data.text; + pElement.appendChild(button); + newsEl = document.querySelector("#news"); + newsEl.appendChild(pElement); + } +} +const buttons = document.querySelectorAll("button"); - buttons.forEach(el => el.addEventListener('click', evt => { - const ctrl = evt.target; - if (!ctrl.getAttribute('data-href')) { - document.location = ctrl.getAttribute('data-href'); - }})) - }) +buttons.forEach((el) => + el.addEventListener("click", (evt) => { + const ctrl = evt.target; + if (!ctrl.getAttribute("data-href")) { + document.location = ctrl.getAttribute("data-href"); + } + }) +); diff --git a/debugging/exercises/exercise1/exercise1.js b/debugging/exercises/exercise1/exercise1.js index 9878e8c..4f05be4 100644 --- a/debugging/exercises/exercise1/exercise1.js +++ b/debugging/exercises/exercise1/exercise1.js @@ -1,14 +1,14 @@ let launchReady = false; let fuelLevel = 22000; let thrustOn = false; -let secondsTolaunch = 10; +let secondsToLaunch = 10; let interval; const countDown = () => { - console.log(secondsTolaunch--); - switch (secondsTolaunch) { + console.log(secondsToLaunch--); + switch (secondsToLaunch) { case 7: - console.log('Close Davy Jones' Locker..'); + console.log('Close Davy Jones Locker..'); break; case 3: console.log('Ignition...'); @@ -25,7 +25,7 @@ const countDown = () => { if (fuelLevel >= 20000) { - console.log(('Fuel level cleared.'); + console.log(('Fuel level cleared.')); launchReady = true; } else { console.log('WARNING: Insufficient fuel!'); diff --git a/debugging/exercises/exercise2/index.html b/debugging/exercises/exercise2/index.html index 3ab2800..4255bdd 100644 --- a/debugging/exercises/exercise2/index.html +++ b/debugging/exercises/exercise2/index.html @@ -77,6 +77,6 @@

Odin's Library

- + diff --git a/debugging/exercises/exercise2/main.js b/debugging/exercises/exercise2/main.js index dc6b8ee..c6cc9b1 100644 --- a/debugging/exercises/exercise2/main.js +++ b/debugging/exercises/exercise2/main.js @@ -19,7 +19,8 @@ const book2 = { read: "No", }; -myLibrary.push(book1; +// Syntax error line 23 - Missing a closing bracket ")". And fixed +myLibrary.push(book1); myLibrary.push(book2); render(); @@ -28,7 +29,8 @@ addButtons.forEach((button) => { button.addEventListener("click", () => { formContainer.style.display = "block"; }); -}; +}); +// Syntax error in line 32- Missing a closing bracket ")". function addDeleteButtons() { let deleteButtons = document.querySelectorAll(".delete"); @@ -36,7 +38,7 @@ function addDeleteButtons() { deleteButtons.forEach((button) => { if (button.getAttribute("data-book") == bookNumber) { //Only add eventListeners to new books - button.addEventListener("clicksss", () => { + button.addEventListener("click", () => { deleteBook(button.getAttribute("data-book")); }); } @@ -91,9 +93,10 @@ function render() { row.setAttribute("data-book", bookNumber); + // Reference error in line 99 - titleCella is not defined. let titleCell = document.createElement("td"); titleCell.append(myLibrary[i].title); - row.append(titleCella); + row.append(titleCell); let authorCell = document.createElement("td"); authorCell.append(myLibrary[i].author); @@ -119,8 +122,10 @@ function render() { readCell.append(button); row.append(readCell); + // Reference error in lines 130, 131, 132 - deleteButton is not defined. + // Origin of error is in line 127 Type error -let deleteB. let deleteCell = document.createElement("td"); - let deleteB = document.createElement("button"); + let deleteButton = document.createElement("button"); let icon = document.createElement("ion-icon"); icon.setAttribute("name", "trash-outline"); deleteButton.classList.add("delete"); @@ -132,8 +137,8 @@ function render() { row.append(deleteCell); tableBody.insertBefore(row, tableBody.firstChild); - - addDeletedButtons(); + // Reference error in line 141 - addDeletedButton is undefined. + addDeleteButtons(); addReadButtons(); bookNumber++; @@ -141,7 +146,7 @@ function render() { } } -document.getElementById("submit").addEventListener("click", (e) => { +submit.addEventListener("click", (e) => { e.preventDefault(); let form = document.querySelector("form"); @@ -149,7 +154,7 @@ document.getElementById("submit").addEventListener("click", (e) => { for (let element of form.elements) { if (element.id === "read") { - element.checked ? bookArgs.push("No") : bookArgs.push("Yes"); + element.checked ? bookArgs.push("Yes") : bookArgs.push("No"); element.checked = false; } else { bookArgs.push(element.value); diff --git a/errors/exercise1.js b/errors/exercise1.js index 6adfa43..217fa25 100644 --- a/errors/exercise1.js +++ b/errors/exercise1.js @@ -1,3 +1,5 @@ -if (3 > Math.PI { + +// Syntax error line 3.Missing ")" after condition. +if (3 > Math.PI) { console.log("wait what?"); } diff --git a/errors/exercise2.js b/errors/exercise2.js index da8708f..c3b6aa0 100644 --- a/errors/exercise2.js +++ b/errors/exercise2.js @@ -1,6 +1,8 @@ -let charge = function() { - if (sunny) { - useSolarCells(); - } else { - promptBikeRide(); +// Syntax error in line 8. Missing a "}" after function body. +let charge = function () { + if (sunny) { + useSolarCells(); + } else { + promptBikeRide(); + } }; diff --git a/errors/exercise3.js b/errors/exercise3.js index d100040..0767d96 100644 --- a/errors/exercise3.js +++ b/errors/exercise3.js @@ -1,2 +1,4 @@ -let ward = "hello"; +// `ReferenceError: "word" is not defined line 3. +// Line 2 variable "ward" referencing variable word. Made the changes`; +let word = "hello"; word.substring(1); diff --git a/errors/exercise4.js b/errors/exercise4.js index c59741a..3e22de6 100644 --- a/errors/exercise4.js +++ b/errors/exercise4.js @@ -1,5 +1,6 @@ +// `TypeError: numbers.map is not a function`; let numbers = { a: 13, b: 37, c: 42 }; numbers.map(function (num) { - return num * 2; + return num * 2; }); From e1b1db605d02c675b4b1dd0c94950f8ffce3f505 Mon Sep 17 00:00:00 2001 From: chezlinbenson Date: Thu, 22 Sep 2022 00:17:04 +0200 Subject: [PATCH 2/4] Completed Javascript Debugging, Exercises and Errors. --- errors/exercise3.js | 7 ++++--- errors/exercise4.js | 8 ++++++-- errors/exercise5.js | 5 +++-- errors/exercise6.js | 6 +++--- errors/exercise7.js | 37 ++++++++++++++++++------------------- 5 files changed, 34 insertions(+), 29 deletions(-) diff --git a/errors/exercise3.js b/errors/exercise3.js index 0767d96..e720495 100644 --- a/errors/exercise3.js +++ b/errors/exercise3.js @@ -1,4 +1,5 @@ -// `ReferenceError: "word" is not defined line 3. +// `ReferenceError: "word" is not defined line 3. // Line 2 variable "ward" referencing variable word. Made the changes`; -let word = "hello"; -word.substring(1); +let word = "helloWorld!"; +console.log(word.substring(0, 5)); +console.log(word.substring(5, word.length)); diff --git a/errors/exercise4.js b/errors/exercise4.js index 3e22de6..b353653 100644 --- a/errors/exercise4.js +++ b/errors/exercise4.js @@ -1,6 +1,10 @@ // `TypeError: numbers.map is not a function`; let numbers = { a: 13, b: 37, c: 42 }; -numbers.map(function (num) { +function double(num) { return num * 2; -}); +} +let totalArr = []; +totalArr.push(Object.values(numbers)); + +console.log(totalArr); diff --git a/errors/exercise5.js b/errors/exercise5.js index db8a957..d368638 100644 --- a/errors/exercise5.js +++ b/errors/exercise5.js @@ -1,2 +1,3 @@ -let name; -name.substring(1); +// `TypeError: Cannot read property 'substring' of undefined`; +let name = "MrJerry"; +console.log(name.substring(2, name.length)); diff --git a/errors/exercise6.js b/errors/exercise6.js index 8ef8108..99ba17d 100644 --- a/errors/exercise6.js +++ b/errors/exercise6.js @@ -3,8 +3,8 @@ // Item #2 on the list is eggs // Item #3 on the list is milk -let arr ["bread", eggs", "milk"]; +let arr = ["bread", "eggs", "milk"]; -items.forEach(item, index -> { +arr.forEach((item, index) => { console.log(`Item #${index + 1} on the list is ${item}`); -}; +}); diff --git a/errors/exercise7.js b/errors/exercise7.js index 40633fd..7bfd1fa 100644 --- a/errors/exercise7.js +++ b/errors/exercise7.js @@ -5,28 +5,27 @@ // 'The temperature in São Paulo is 23 degrees' // ] -function getTemperatureReport(cities) { - let report = []; - for(let i = 0; i < cities.length(); i++) { - let temperature = temperatureService(city[i]); - report.push(`The temperature in ${city[i]} is ${temperature} degrees`); - } - return report; -} + let cities = { + London: 10, + Paris: 12, + Barcelona: 17, + Dubai: 27, + Mumbai: 29, + "São Paulo": 23, + Lagos: 33, + }; + -function temperatureService() { - let temparatureMap = { - 'London': 10, - 'Paris': 12, - 'Barcelona': 17, - 'Dubai' 27, - 'Mumbai': 29, - 'São Paulo': 23 - 'Lagos': 33 - - return temparatureMap[city]; +function getTemperatureReport(cities) { + let report = []; + + for (let i = 0; i < cities.length; i++) { + let temperature = cities[i].values; + report.push(`The temperature in ${cities[i]} is ${cities[i].values} degrees`); + } + return report; } let report = getTemperatureReport(["London", "Paris", "São Paulo"]); From ae50898879c3ae2279dae7cdfe38e0768aca7216 Mon Sep 17 00:00:00 2001 From: chezlinbenson Date: Thu, 22 Sep 2022 10:59:39 +0200 Subject: [PATCH 3/4] Completed Javascript Debugging, Demo2. --- debugging/demo/demo2/script.js | 89 +++++++++++++++++----------------- 1 file changed, 44 insertions(+), 45 deletions(-) diff --git a/debugging/demo/demo2/script.js b/debugging/demo/demo2/script.js index bb17b4c..941c103 100644 --- a/debugging/demo/demo2/script.js +++ b/debugging/demo/demo2/script.js @@ -1,47 +1,46 @@ -// const newsEl = document.querySelector("#news"); -// newsEl.addEventListener("DOMContentLoaded", ( ) => { -var data = [ - { - text: "Overshadowing #UNGA is the big question: Will Obama and Rouhani meet?", - href: "https://twitter.com/cnnbrk/status/382528782738800641", - }, - { - text: "Marine's family hopes visiting Iranian president will help free their son", - href: "https://twitter.com/cnnbrk/status/382519683053649920", - }, - { - text: "Obama addresses United Nations.", - href: "https://twitter.com/cnnbrk/status/382507500903202817", - }, - { - text: "", - href: "https://twitter.com/CNNMoney/status/382497891723804672", - }, - { - text: "If you're seeing this as a button, congratulations!", - href: "http://twitter.com", - }, -]; -for (var i = 0; i < data.length; i++) { - if (data.text) { - const pElement = document.createElement("p"); - const button = document.createElement("button"); - button.type = "button"; - button.classList.add(["btn", "btn-default"]); - button.setAttribute("data-href", data.href); - button.innerText = data.text; - pElement.appendChild(button); - newsEl = document.querySelector("#news"); - newsEl.appendChild(pElement); +document.addEventListener("DOMContentLoaded", () => { + var data = [ + { + text: "Overshadowing #UNGA is the big question: Will Obama and Rouhani meet?", + href: "https://twitter.com/cnnbrk/status/382528782738800641", + }, + { + text: "Marine's family hopes visiting Iranian president will help free their son", + href: "https://twitter.com/cnnbrk/status/382519683053649920", + }, + { + text: "Obama addresses United Nations.", + href: "https://twitter.com/cnnbrk/status/382507500903202817", + }, + { + text: "", + href: "https://twitter.com/CNNMoney/status/382497891723804672", + }, + { + text: "If you're seeing this as a button, congratulations!", + href: "http://twitter.com", + }, + ]; + for (var i = 0; i < data.length; i++) { + if (data[i].text) { + const pElement = document.createElement("p"); + const button = document.createElement("button"); + button.type = "button"; + button.classList.add(["btn", "btn-default"]); + button.setAttribute("data-href", data[i].href); + button.innerText = data[i].text; + pElement.appendChild(button); + document.querySelector("#news").appendChild(pElement); + } } -} -const buttons = document.querySelectorAll("button"); + const buttons = document.querySelectorAll("button"); -buttons.forEach((el) => - el.addEventListener("click", (evt) => { - const ctrl = evt.target; - if (!ctrl.getAttribute("data-href")) { - document.location = ctrl.getAttribute("data-href"); - } - }) -); + buttons.forEach((el) => + el.addEventListener("click", (evt) => { + const ctrl = evt.target; + if (ctrl.getAttribute("data-href")) { + document.location = ctrl.getAttribute("data-href"); + } + }) + ); +}); From 259dbe5d19ab050cd75166c6cb998b63fd0e9875 Mon Sep 17 00:00:00 2001 From: chezlinbenson Date: Thu, 22 Sep 2022 14:18:58 +0200 Subject: [PATCH 4/4] Completed the javascript error exercise 7. --- errors/exercise7.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/errors/exercise7.js b/errors/exercise7.js index 7bfd1fa..5c4388b 100644 --- a/errors/exercise7.js +++ b/errors/exercise7.js @@ -5,8 +5,18 @@ // 'The temperature in São Paulo is 23 degrees' // ] +function getTemperatureReport(cities) { + let report = []; + + for (let i = 0; i < cities.length; i++) { + let temperature = temperatureService(cities[i]); + report.push(`The temperature in ${cities[i]} is ${temperature} degrees`); + } + return report; +} - let cities = { +function temperatureService(city) { + let temparatureMap = { London: 10, Paris: 12, Barcelona: 17, @@ -15,17 +25,7 @@ "São Paulo": 23, Lagos: 33, }; - - - -function getTemperatureReport(cities) { - let report = []; - - for (let i = 0; i < cities.length; i++) { - let temperature = cities[i].values; - report.push(`The temperature in ${cities[i]} is ${cities[i].values} degrees`); - } - return report; + return temparatureMap[city]; } let report = getTemperatureReport(["London", "Paris", "São Paulo"]);