Js core 3/week 2/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-2/Homework/mandatory/2-fetch-exercise/exercise.js

@@ -16,11 +16,12 @@ Expected result
 Open index.html in your browser. Every time you refresh the page,
 a different greeting should be displayed in the box.
 */
-
-fetch('*** Write the API address here ***')
-    .then(function(response) {
-        return response.text();
-    })
-    .then(function(greeting) {
-        // Write the code to display the greeting text here
-    });
+const greetings = document.querySelector("#greeting-text")
+fetch("https://codeyourfuture.herokuapp.com/api/greetings")
+  .then(function (response) {
+    return response.text();
+  })
+  .then(function (greeting) {
+    // Write the code to display the greeting text here
+    greetings.innerHTML = greeting
+  });

week-2/Homework/mandatory/3-dog-photo-gallery/index.html

@@ -0,0 +1,28 @@
+<!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>Dog Gallery</title>
+</head>
+<body>
+<div class="container">
+    <div class="nav">
+        <h1>Dog Gallery</h1>
+    </div>
+    <div class="pic">
+        <ul>
+            <li>
+                <img id="dogImage" src="">
+            </li>
+        </ul>
+    </div>
+    <div class="buttons">
+        <button id="buttonOne">Next</button>
+        <button id="buttonTwo">Previous</button>
+    </div>
+</div>
+    <script src="script.js"></script>
+</body>
+</html>

week-2/Homework/mandatory/3-dog-photo-gallery/script.js

@@ -0,0 +1,25 @@
+let btnOne = document.getElementById("buttonOne");
+let btnTwo = document.getElementById("buttonTwo");
+let dogImage = document.getElementById("dogImage");
+
+//EVENT LISTENERS
+btnOne.addEventListener("click", () => {
+  getDogImages();
+});
+btnTwo.addEventListener("click", getDogImages);
+
+//FUNCTION TO GET DOG PICTURES(API)
+function getDogImages() {
+  fetch("https://dog.ceo/api/breeds/image/random")
+    .then((response) => {
+      return response.json();
+    })
+    .then((data) => {
+
+      document.getElementById("dogImage").src = data.message;
+    })
+    .catch((err) => {
+      console.log("error!!!!");
+      console.error(err);
+    });
+}

week-2/Homework/mandatory/3-dog-photo-gallery/style.css

@@ -0,0 +1,47 @@
+body{
+    background-color: #3A84C5;
+}
+.container{
+    background-color:  #619CD1;
+    width: 60%;
+    margin: auto;
+    border-radius: 10px;
+}
+h1{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 30px;
+}
+.pic{
+
+    width: 40%;
+    height: 400px;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+li{
+    list-style: none;
+}
+
+.buttons{
+    text-align: center;   
+}
+#buttonOne, #buttonTwo{
+    background-color: chocolate;
+    border-radius: 5px;
+    width: 100px;
+
+}
+#buttonOne:hover, #buttonTwo:hover{
+    color: white;
+}
+img{
+    border-radius: 10px;
+    width: 400px;
+    height: 350px;
+} 

week-2/Homework/mandatory/4-programmer-humour/index.html

@@ -0,0 +1,13 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+</head>
+
+<body>
+    <script src="script.js"></script>
+</body>
+
+</html>

week-2/Homework/mandatory/4-programmer-humour/script.js

@@ -0,0 +1,11 @@
+fetch("https://xkcd.now.sh/?comic=latest")
+  .then((data) => data.json())
+  .then((joke) => {
+    let jokeDiv = document.createElement("div");
+    jokeDiv.innerHTML = `<img src = ${joke.img}>`;
+    document.body.appendChild(jokeDiv);
+  })
+  .catch((err) => console.log(err));
+document.body.style.display = "flex";
+document.body.style.justifyContent = "center";
+document.body.style.paddingTop = "50px";