ZA2 - Chandre De Wet - JS3 Wk 1 Classwork + prev work attached

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";
 

debugging/demo/demo2/index.html

@@ -19,5 +19,7 @@ <h1>Javascript Demo Exercise 2</h1>
       </div>
       <div id="news"></div>
     </div>
+
+  <script src="script.js"></script>
   </body>
 </html>

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<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);
-			document.querySelector('#news').appendChild(pElement);		
-		}
-	}
-	const buttons = document.querySelectorAll("button");
+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",
+    },
+  ];
 
-	buttons.forEach(el => el.addEventListener('click', evt => {		
-		const ctrl = evt.target;
-		if (!ctrl.getAttribute('data-href')) {
-			document.location = ctrl.getAttribute('data-href');
-		}}))
-	})
+  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");
+
+  buttons.forEach((el) =>
+    el.addEventListener("click", (evt) => {
+      const ctrl = evt.target;
+      if (ctrl.getAttribute("data-href")) {
+        document.location = ctrl.getAttribute("data-href");
+      }
+    })
+  );
+});

debugging/exercises/exercise1/exercise1.js

@@ -8,7 +8,7 @@ const countDown = () => {
   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!');

debugging/exercises/exercise2/index.html

@@ -77,6 +77,6 @@ <h1>Odin's Library</h1>
         </button>
       </div>
     </div>
-    <script src="mainscript.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

debugging/exercises/exercise2/main.js

@@ -19,7 +19,7 @@ const book2 = {
   read: "No",
 };
 
-myLibrary.push(book1;
+myLibrary.push(book1);
 myLibrary.push(book2);
 
 render();
@@ -28,15 +28,15 @@ addButtons.forEach((button) => {
   button.addEventListener("click", () => {
     formContainer.style.display = "block";
   });
-};
+});
 
 function addDeleteButtons() {
   let deleteButtons = document.querySelectorAll(".delete");
 
   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"));
       });
     }
@@ -93,7 +93,8 @@ function render() {
 
       let titleCell = document.createElement("td");
       titleCell.append(myLibrary[i].title);
-      row.append(titleCella);
+      row.append(titleCell);
+      //reference error.
 
       let authorCell = document.createElement("td");
       authorCell.append(myLibrary[i].author);
@@ -120,7 +121,7 @@ function render() {
       row.append(readCell);
 
       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");
@@ -133,23 +134,23 @@ function render() {
 
       tableBody.insertBefore(row, tableBody.firstChild);
 
-      addDeletedButtons();
+      addDeleteButtons();
       addReadButtons();
 
       bookNumber++;
     }
   }
 }
 
-document.getElementById("submit").addEventListener("click", (e) => {
+submit.addEventListener("click", (e) => {
   e.preventDefault();
 
   let form = document.querySelector("form");
   let bookArgs = [];
 
   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);

errors/exercise1.js

@@ -1,3 +1,4 @@
-if (3 > Math.PI {
-    console.log("wait what?");
+if (3 > Math.PI) {
+  console.log("wait what?");
 }
+//syntax error - exercise was missing bracket after PI

errors/exercise2.js

@@ -1,6 +1,8 @@
-let charge = function() {
-    if (sunny) {
-        useSolarCells();
-    } else {
-        promptBikeRide();
+let charge = function () {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+  }
 };
+//syntax error - closing curly bracket after promptBikeRide(); was missing

errors/exercise3.js

@@ -1,2 +1,4 @@
 let ward = "hello";
-word.substring(1);
+ward.substring(1);
+
+//reference error - declared variable ward, not word.replaced word with ward, as rather want to be careful using words that may be built in concepts

errors/exercise4.js

@@ -1,5 +1,7 @@
 let numbers = { a: 13, b: 37, c: 42 };
 
 numbers.map(function (num) {
-    return num * 2;
+  return num * 2;
 });
+
+//type error, .map is a array method and cannot be performed on an object

errors/exercise5.js

@@ -1,2 +1,4 @@
 let name;
 name.substring(1);
+
+//TypeError - undefined - because name was declared but no value was ever assigned to it before using it

errors/exercise6.js

@@ -3,8 +3,10 @@
 //      Item #2 on the list is eggs
 //      Item #3 on the list is milk
 
-let arr  ["bread", eggs", "milk"];
-
-items.forEach(item, index -> {
-    console.log(`Item #${index + 1} on the list is ${item}`);
-};
+let arr = ["bread", "eggs", "milk"];
+//syntax error assignment operator was missing, eggs missing semicolon
+arr.forEach((item, index) => {
+  //reference and programmer error. should be on arr, not items
+  //syntax error arrow function incorrect changed it. Also if 2 parameters, requires a brackets around it
+  console.log(`Item #${index + 1} on the list is ${item}`);
+}); //syntax error closing curly bracket missing

errors/exercise7.js

@@ -6,29 +6,37 @@
 //      ]
 
 function getTemperatureReport(cities) {
-    let report = [];
+  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;
+  for (let i = 0; i < cities.length; i++) {
+    //syntax and user error, .length is a property not a method
+    let temperature = temperatureService(cities[i]);
+    //user and reference error, no array called city, just cities
+    report.push(`The temperature in ${cities[i]} is ${temperature} degrees`);
+  }
+  return report;
 }
 
-function temperatureService() {
-    let temparatureMap  = {
-        'London': 10,
-        'Paris': 12,
-        'Barcelona': 17,
-        'Dubai' 27,
-        'Mumbai': 29,
-        'São Paulo': 23
-        'Lagos': 33
-
+function temperatureService(city) {
+  //missing a parameter user error
+  let temparatureMap = {
+    London: 10,
+    Paris: 12,
+    Barcelona: 17,
+    Dubai: 27,
+    //syntax error colon missing
+    Mumbai: 29,
+    "São Paulo": 23,
+    //missing comma after Sao Paulo - syntax error
+    Lagos: 33,
+  };
+  //missing closing bracket of object - syntax error
 
-    return temparatureMap[city];
+  return temparatureMap[city];
 }
 
 let report = getTemperatureReport(["London", "Paris", "São Paulo"]);
 
 console.log(report);
+
+//test