CodeYourFuture · DelroyGayle · Mar 13, 2022
diff --git a/CYF-SOLUTION/index.html b/CYF-SOLUTION/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title> </title>
+    <meta
+      charset="utf-8"
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+    />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+
+  <body>
+    <div class="jumbotron text-center">
+      <h1>Library</h1>
+      <p>Add books to your virtual library</p>
+    </div>
+
+    <button data-toggle="collapse" data-target="#demo" class="btn btn-info">
+      Add new book
+    </button>
+
+    <div id="demo" class="collapse">
+      <div class="form-group">
+        <label for="title">Title:</label>
+        <input
+          type="title"
+          class="form-control"
+          id="title"
+          name="title"
+          required
+        />
+        <label for="author">Author: </label>
+        <input
+          type="author"
+          class="form-control"
+          id="author"
+          name="author"
+          required
+        />
+        <label for="pages">Pages:</label>
+        <input
+          type="number"
+          class="form-control"
+          id="pages"
+          name="pages"
+          required
+        />
+        <label class="form-check-label">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="check"
+            value=""
+          />Read
+        </label>
+        <input
+          type="submit"
+          value="Submit"
+          class="btn btn-primary"
+          onclick="submit();"
+        />
+      </div>
+    </div>
+
+    <table class="table" id="display">
+      <thead class="thead-dark">
+        <tr>
+          <th>Title</th>
+          <th>Author</th>
+          <th>Number of Pages</th>
+          <th>Read</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/CYF-SOLUTION/script.js b/CYF-SOLUTION/script.js
@@ -0,0 +1,106 @@
+let myLibrary = [];
+
+window.addEventListener("load", function (e) {
+  populateStorage();
+  render();
+});
+
+function populateStorage() {
+  if (myLibrary.length === 0) {
+    let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
+    let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", "127", true);
+    myLibrary.push(book1);
+    myLibrary.push(book2);
+    render();
+  }
+}
+
+const title = document.getElementById("title");
+const author = document.getElementById("author");
+const pages = document.getElementById("pages");
+const check = document.getElementById("check");
+
+//check the right input from forms and if its ok -> add the new book (object in array)
+//via Book function and start render function
+function submit() {
+  if (
+    title.value.trim() === null ||
+    title.value.trim() === "" ||
+    author.value.trim() === "" ||
+    author.value === null ||
+    pages.value === null ||
+    pages.value === ""
+  ) {
+    alert("Please fill all fields!");
+    return false;
+  } else if (Number(pages.value) <= 0) {
+    alert("Pages must be a number bigger than 0");
+  } else {
+    let book = new Book(title.value, author.value, pages.value, check.checked);
+    myLibrary.push(book);
+    render();
+    // Reset fields
+    title.value = author.value = pages.value = "";
+    check.checked = false;
+  }
+}
+
+function Book(title, author, pages, check) {
+  this.title = title;
+  this.author = author;
+  this.pages = pages;
+  this.check = check;
+}
+
+function render() {
+  let table = document.getElementById("display");
+  let rowsNumber = table.rows.length;
+  //delete old table
+  for (let n = rowsNumber - 1; n > 0; n--) {
+    table.deleteRow(n);
+  }
+  //insert updated row and cells
+  let length = myLibrary.length;
+  for (let i = 0; i < length; i++) {
+    let row = table.insertRow(1);
+    let cell1 = row.insertCell(0);
+    let cell2 = row.insertCell(1);
+    let cell3 = row.insertCell(2);
+    let cell4 = row.insertCell(3);
+    let cell5 = row.insertCell(4);
+    cell1.innerHTML = myLibrary[i].title;
+    cell2.innerHTML = myLibrary[i].author;
+    cell3.innerHTML = myLibrary[i].pages;
+
+    //add and wait for action for read/unread button
+    let changeBut = document.createElement("button");
+    changeBut.id = i;
+    changeBut.className = "btn btn-success";
+    cell4.appendChild(changeBut);
+    let readStatus = "";
+    if (myLibrary[i].check === true) {
+      readStatus = "Yes";
+    } else {
+      readStatus = "No";
+    }
+    changeBut.innerHTML = readStatus;
+
+    changeBut.addEventListener("click", function () {
+      myLibrary[i].check = !myLibrary[i].check;
+      render();
+    });
+
+    //add delete button to every row and render again
+    let delButton = document.createElement("button");
+    delButton.id = i + 5;
+    cell5.appendChild(delButton);
+    delButton.className = "btn btn-warning";
+    delButton.innerHTML = "Delete";
+    delButton.addEventListener("click", function () {
+      alert(`You've deleted title: ${myLibrary[i].title}`);
+      console.log(myLibrary);
+      myLibrary.splice(i, 1);
+      render();
+    });
+  }
+}
diff --git a/CYF-SOLUTION/style.css b/CYF-SOLUTION/style.css
@@ -0,0 +1,20 @@
+
+.form-group{
+    width:400px;
+    height:300px; 
+    align-self:left;
+    padding-left: 20px;
+}
+
+.btn {
+    display: block;
+}
+
+.form-check-label {
+    padding-left: 20px;
+    margin: 5px 0px 5px 0px;
+}
+
+button.btn-info {
+    margin: 20px;
+}
diff --git a/debugging/demo/demo2/index.html b/debugging/demo/demo2/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <script type="text/javascript" src="mainScript.js"></script>
+    <script type="text/javascript" src="script.js"></script>
     <link
       rel="stylesheet"
       type="text/css"

diff --git a/debugging/demo/demo2/script.js b/debugging/demo/demo2/script.js
@@ -1,43 +1,52 @@
 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: "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'
+			href: "https://twitter.com/cnnbrk/status/382519683053649920"
 		},
 		{
-			text: 'Obama addresses United Nations.',
-			href: 'https://twitter.com/cnnbrk/status/382507500903202817'
+			text: "Obama addresses United Nations.",
+			href: "https://twitter.com/cnnbrk/status/382507500903202817"
 		},
 		{
-			text: '',
-			href: 'https://twitter.com/CNNMoney/status/382497891723804672'
+			text: "",
+			href: "https://twitter.com/CNNMoney/status/382497891723804672"
 		},
 		{
 			text: "If you're seeing this as a button, congratulations!",
-			href: 'http://twitter.com'
+			href: "http://twitter.com"
 		}
 	];
 	for (var i = 0; i<data.length; i++) {
-		if (data.text) {
+
+		if (data[i].text) {
 			const pElement = document.createElement("p");
 			const button = document.createElement("button");
-			button.type = "button"
+			button.type = "button";
 			button.classList.add(["btn", "btn-default"]);
-			button.setAttribute('data-href', data.href);
-			button.innerText = data.text;
+			button.setAttribute("data-href", data[i].href);
+			button.innerText = data[i].text;
 			pElement.appendChild(button);
-			document.querySelector('#news').appendChild(pElement);		
+			document.querySelector("#news").appendChild(pElement);		
 		}
 	}
 	const buttons = document.querySelectorAll("button");
+	console.log(buttons)
 
-	buttons.forEach(el => el.addEventListener('click', evt => {		
+	buttons.forEach(el => el.addEventListener("click", evt => {		
 		const ctrl = evt.target;
-		if (!ctrl.getAttribute('data-href')) {
-			document.location = ctrl.getAttribute('data-href');
-		}}))
-	})
+		// console.log(10,ctrl.getAttribute("data-href"))
+		console.log(15,document.location)
+		document.location = ctrl.getAttribute("data-href");
+		/*
+		if (!ctrl.getAttribute("data-href")) {
+			document.location = ctrl.getAttribute("data-href");
+			console.log(20,document.location);
+		}
+		*/
+	}));
+	});
diff --git 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 thrustOn = false;
 let secondsTolaunch = 10;
 let interval;
 
 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,12 +25,13 @@ const countDown = () => {
 
 
 if (fuelLevel >= 20000) {
-   console.log(('Fuel level cleared.');
-   launchReady = true;
+   console.log("Fuel level cleared.");
+   launchReady = true
 } else {
    console.log('WARNING: Insufficient fuel!');
    launchReady = false;
 }
+
 if (launchReady){
-  interval = setInterval(countDown, 1000)
+  interval = setInterval(countDown, 1000);
 }
diff --git a/errors/exercise1.js b/errors/exercise1.js
@@ -1,3 +1,3 @@
-if (3 > Math.PI {
+if (3 > Math.PI) {
     console.log("wait what?");
 }
diff --git a/errors/exercise2.js b/errors/exercise2.js
@@ -3,4 +3,5 @@ let charge = function() {
         useSolarCells();
     } else {
         promptBikeRide();
+    }
 };
diff --git a/errors/exercise3.js b/errors/exercise3.js
@@ -1,2 +1,2 @@
-let ward = "hello";
+let word = "hello";
 word.substring(1);
diff --git a/errors/exercise4.js b/errors/exercise4.js
@@ -1,5 +1,5 @@
 let numbers = { a: 13, b: 37, c: 42 };
 
-numbers.map(function (num) {
+Object.values(numbers).map(function (num) {
     return num * 2;
 });
diff --git a/errors/exercise5.js b/errors/exercise5.js
@@ -1,2 +1,2 @@
-let name;
+let name=" ";
 name.substring(1);
diff --git 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}`);
-};
+});