Js core 3/week 3/berhane

week-1/Homework/mandatory/0-thinking-like-a-programmer/task.md

@@ -28,10 +28,18 @@ After you've watched these videos I'd like you to answer these questions
 
 <!-- Write your answer here -->
 
+Effective way of problem solving skill is the most important quality of a programmer.
+
 ## 2. When trying to solve a challenge, what should you do first?
 
 <!-- Write your answer here -->
 
+try to understand what exactly the problem is. try to draw a diagram or try to explain the problem to someone else or talk to rubber duck as if considering it is someone else to better understand what the problem is.
+
 ## 3. What should you do if you get stuck?
 
 <!-- Write your answer here -->
+
+If you’re stuck, you should reduce the problem to something simpler.
+-Debug: Go step by step through your solution trying to find where you went wrong. Programmers call this debugging (in fact, this is all a debugger does).
+-Reassess: Take a step back. Look at the problem from another perspective. Is there anything that can be abstracted to a more general approach?

week-1/Homework/mandatory/1-debugging-practice/index.html

@@ -65,7 +65,7 @@ <h1>Library</h1>
           type="submit"
           value="Submit"
           class="btn btn-primary"
-          onclick="submit();"
+
         />
       </div>
     </div>

week-1/Homework/mandatory/1-debugging-practice/script.js

@@ -1,5 +1,7 @@
 let myLibrary = [];
 
+let n=0;
+
 window.addEventListener("load", function (e) {
   populateStorage();
   render();
@@ -28,20 +30,36 @@ 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() {
+  //let library = [];
   if (
+
     title.value == null ||
     title.value == "" ||
+    author.value == null ||
+    author.value == "" ||
     pages.value == null ||
     pages.value == ""
   ) {
     alert("Please fill all fields!");
-    return false;
+      return false;
   } else {
-    let book = new Book(title.value, title.value, pages.value, check.checked);
-    library.push(book);
-    render();
+    // let book = new Book(title.value, title.value, pages.value, check.checked);
+    // myLibrary.push(book);
+    let book = new Book(title.value, author.value, pages.value, check.checked);
+    n = n + myLibrary.indexOf(book);
+    if (n === -1) {
+      myLibrary.push(book);
+      n--;
+    render();}
+    else {
+        alert("You already read this book")
+      }
   }
 }
+let submitNewBook = document.querySelector(".btn-primary");
+submitNewBook.addEventListener("click", function () {
+  submit();
+});
 
 function Book(title, author, pages, check) {
   this.title = title;
@@ -54,7 +72,7 @@ function render() {
   let table = document.getElementById("display");
   let rowsNumber = table.rows.length;
   //delete old table
-  for (let n = rowsNumber - 1; n > 0; n-- {
+  for (let n = rowsNumber - 1; n > 0; n--) {
     table.deleteRow(n);
   }
   //insert updated row and cells
@@ -66,8 +84,8 @@ function render() {
     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;
+    cell1.innerHTML = myLibrary[i].author;
+    cell2.innerHTML = myLibrary[i].title;
     cell3.innerHTML = myLibrary[i].pages;
 
     //add and wait for action for read/unread button
@@ -76,7 +94,7 @@ function render() {
     changeBut.className = "btn btn-success";
     cell4.appendChild(changeBut);
     let readStatus = "";
-    if (myLibrary[i].check == false) {
+    if (myLibrary[i].check == true) {
       readStatus = "Yes";
     } else {
       readStatus = "No";
@@ -89,12 +107,12 @@ function render() {
     });
 
     //add delete button to every row and render again
-    let delButton = document.createElement("button");
+    let delBut = document.createElement("button");
     delBut.id = i + 5;
     cell5.appendChild(delBut);
     delBut.className = "btn btn-warning";
     delBut.innerHTML = "Delete";
-    delBut.addEventListener("clicks", function () {
+    delBut.addEventListener("click", function () {
       alert(`You've deleted title: ${myLibrary[i].title}`);
       myLibrary.splice(i, 1);
       render();

week-2/Homework/mandatory/1-practice/1-practice.md

@@ -26,6 +26,10 @@ The following endpoint is publicly available from Github
 
 <!-- Write your answer here -->
 
+repo owner's github username, name of the repository and pull request number
+
 2. Describe in a sentence what this API endpoint returns when all of the fields are completed?
 
 <!-- Write your answer here -->
+
+Return an array of comments as objects

week-3/Homework/mandatory/1-practice/2-code-reading.md

@@ -14,6 +14,7 @@ Take a look at the following code:
 ```
 
 Explain why line 4 and line 6 output different numbers.
+// line 4 prints 2 because the console is within the same block of x=2, whereas line 6 prints the global variable x= 1.
 
 ## Question 2
 
@@ -34,6 +35,8 @@ console.log(y)
 
 What will be the output of this code. Explain your answer in 50 words or less.
 
+// console.log(x) will print the value of the global variable x = 10, console.log(f1()) output is undefined because the function doesn't return a value but the last console outputs reference error because y is a local variable for the function f1 block only.
+
 ## Question 3
 
 Take a look at the following code:
@@ -61,3 +64,5 @@ console.log(y);
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+
+//the code will work fine. the first console will print 9 because x is a global variable with value 9. the second console prints the object {x:10}

week-3/Homework/mandatory/1-practice/app.js

@@ -0,0 +1,45 @@
+window.addEventListener("load", () => {
+  let long;
+  let lat;
+  let temperatureDescription = document.querySelector(
+    ".temperature-description"
+  );
+  let temperatureDegree = document.querySelector(".temperature-degree");
+  let locationTimezone = document.querySelector(".location-timezone");
+  let temperatureSection = document.querySelector(".temperature-section")
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition((position) => {
+      //console.log(position)
+      long = position.coords.longitude;
+      lat = position.coords.latitude;
+
+      const proxy = `https://cors-anywhere.herokuapp.com/`;
+
+      const api = `${proxy}
+      https://api.darksky.net/forecast/fd9d9c6418c23d94745b836767721ad1/${lat},${long}`;
+
+      fetch(api)
+        .then((response) => {
+          return response.json();
+        })
+        .then(data => {
+          //console.log(data);
+          const { temperature, summary, icon } = data.currently;
+          // set DOM elements from Api
+
+          temperatureDegree.textContent = temperature;
+          temperatureDescription.textContent = summary;
+          locationTimezone.textContent = data.timezone;
+
+          //set Icons
+          setIcons(icon, document.querySelector(".icon"));
+        });
+    });
+  }
+  function setIcons(icon, iconID) {
+    const skycons = new Skycons({ color: "white" });
+    const currentIcon = icon.replace(/-/g, "_").toUpperCase();
+    skycons.play();
+    return skycons.set(iconID, Skycons[currentIcon]);
+  }
+});

week-3/Homework/mandatory/1-practice/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Weather</title>
+  </head>
+  <body>
+    <div class="location">
+      <h1 class="location-timezone">TimeZone</h1>
+      <canvas class="icon" width="128" height="128"></canvas>
+      <p>Icon</p>
+    </div>
+    <div class="temperature">
+      <div class="degree-section">
+        <h2 class="temperature-degree">34</h2>
+        <span>F</span>
+      </div>
+
+      <div class="temperature-description">Its freezing cold</div>
+    </div>
+    <script src="skycons.js"></script>
+    <script src="app.js"></script>
+  </body>
+</html>