Ex4

README.md

@@ -7,11 +7,9 @@ This is going to be so much fun! Here are a few general details:
 
 ## Exercises list
 
-**Exercise 1** - [HTML, CSS, JS.](https://github.com/monday-u-com/monday-u-exercises/tree/main/src/ex1)
+**Exercise 1** - [HTML, CSS, JS.](https://github.com/monday-u-com/monday-u-exercises/tree/master/src/ex1)
 
-**Exercise 2** - [In depth JS, Async JS, MVC](https://github.com/monday-u-com/monday-u-exercises/tree/main/src/ex2)
-
-**Exercise 3** - [Advance Node.js, CLI](https://github.com/monday-u-com/monday-u-exercises/tree/main/src/ex3)
+**Exercise 2** - [In depth JS, Async JS, MVC](https://github.com/monday-u-com/monday-u-exercises/tree/master/src/ex2)
 
 # Submitting your tasks
 Create a pull request in your forked repository and send to your mentor when it's ready.

ex4/README.md

@@ -0,0 +1,38 @@
+# Exercise 4 - Express.js
+
+You know what they say about #4: you'll remember it *for*ever (ha)
+
+## In this section you will practice
+
+**Express** - One of the most popular server frameworks for node.js
+**APIs** - We've already worked with an external API (the Pokemon one) - now we're going to build our own!
+**CRUD** - Create, Read, Update, Delete - the four fundamental operations of any API. We aren't updating yet, but the principles are the same
+
+## What you are going to build
+
+So far our whole app has been 100% local, and if you refreshed the page - that's it, all your todos were gone. No persistency. So sad.
+
+But that changes today! We're going to create a server that will handle all our todo items, _and_ our Pokemon fetching, and finally take our first step in becoming real #fullstack developers #hashtag
+
+You can use your existing project (copy+paste then refactor), or use the boilerplate we've set up for you in this `ex4` directory
+
+### The requirements:
+
+- [ ] Create your express backend (include separate `dist` and `server` folders)
+- [ ] Your `server.js` file should have all the express boilerplate and host your `dist` directory to any client that requests it (hint: you'll need to `.use` the `express.static` method)
+- [ ] Create an `api.js` file that acts as the 'controller' of your backend, handling all the routes (endpoints)
+- [ ] Create separate endpoints for (1) fetching all the todo items, (2) creating a new one, and (3) deleting an existing one (hint: don't forget `bodyParser`)
+- [ ] Move the pokemon fetching code to the backend - use `axios` instead of `fetch` for your requests
+- [ ] On app load (i.e. when a user enters the page) it should fetch all the todo items and render them
+
+In terms of the front end, it will look the same as before:
+![](../assets/hw-2.gif)
+
+But now when you refresh the page **the data should still be there**
+
+### Bonus
+
+- [ ] Create a [middleware](https://expressjs.com/en/guide/using-middleware.html) that makes a log each time a user accesses any of the routes (you can just do a `console.log`)
+- [ ] Handle server errors elegantly. Specifically, if anything goes wrong the user should see an error message (ideally, not an alert) with an explanation of what went wrong instead of crashing the page
+- [ ] Add a loder/spinner to the page that indicates the client is waiting for an async operation (e.g. a call to the server) to finish
+- [ ] Add simple caching to your server. If a user requests for the same pokemon ID three times in the same minute, for example, it should only make a request to the Pokemon API once. You can use a simple in-memory data structure for your cache

ex4/dist/clients/itemClient.js

@@ -0,0 +1,60 @@
+class ItemClinet {
+  constructor() {}
+
+  async createItem(item) {
+    const response = await fetch("/item", {
+      method: "post",
+      body: JSON.stringify({ item }),
+      headers: { "Content-Type": "application/json" },
+    });
+    if (response.status == 201) {
+      return await response.json();
+    }
+  }
+
+  async fetchItems() {
+    const response = await fetch("/item", {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    });
+
+    if (response.status != 200) {
+      throw new Error(" Error fetching items");
+    }
+
+    const data = await response.json();
+
+    return data;
+  }
+
+  async deleteItem(itemId) {
+    try {
+       await fetch(`/item/${itemId}`, {
+        method: "delete",
+        headers: { "Content-Type": "application/json" },
+      });
+    } catch (err) {
+      throw new Error("failed to delete item");
+    }
+  }
+
+async deleteAll()
+{
+    try {
+        await fetch('/item' ,{
+         method: "delete",
+         headers: { "Content-Type": "application/json" },
+       });
+     } catch (err) {
+       throw new Error("failed to delete all items ");
+     }
+   }
+
+}
+
+
+
+
+
+
+export default new ItemClinet();

ex4/dist/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Todo List</title>
+    <link rel="stylesheet" href="style.css" />
+    <script
+      src="https://kit.fontawesome.com/434f764404.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+
+  <body>
+    <section class="main-section">
+      <div class="app-container" id="app-container">
+        <h1 class="header">ToDo App</h1>
+        <h2>Let's work on some Todos</h2>
+        <span id="newtask" class="newTask">
+          <input id="taskInput" type="text" placeholder="Enter your Tasks" />
+          <button id="addButton" class="add">🔥
+          </button>
+          <div id="load-container"></div>
+          <button id="sortBtn">Alphabetical Sort</button>
+          <ul id="tasks"></ul>
+          <footer>
+            <span id="count" class="count"></span>
+            <button id="clearAllBtn">Clear 🆑</button>
+          </footer>
+        </span>
+      </div>
+    </section>
+    <footer class="footer">Kupers 2022</footer>
+  </body>
+  <script type="module" src="main.js"></script>
+</html>

ex4/dist/main.js

@@ -0,0 +1,182 @@
+import itemClient from "./clients/itemClient.js";
+
+class Main {
+  constructor() {
+    this.input = document.getElementById("taskInput");
+    this.addButton = document.getElementById("addButton");
+    this.todoListH1Elem = document.querySelector("h1");
+    this.sortBtn = document.getElementById("sortBtn");
+    this.clearAllBtn = document.getElementById("clearAllBtn");
+    this.taskElement = document.getElementById("tasks");
+    this.counterElement = document.getElementById("count");
+    this.loader = document.querySelector("#load-container");
+  }
+  async init() {
+    const itemsArr = await itemClient.fetchItems();
+
+    if (itemsArr.length != 0) {
+      this.addItem(itemsArr);
+    }
+    this.whenPressEnter();
+    this.sortBtn.addEventListener("click", () => this.sortTaskByName());
+    this.clearAllBtn.addEventListener("click", () => this.deleteAllTasks());
+    this.addButton.addEventListener("click", async () => {
+      if (!this.input.value.trim()) {
+        const invalidMsg = "Cannot insert Empty Input";
+        this.addAlert(invalidMsg);
+        return;
+      }
+
+      try {
+        this.loader.classList.add("display");
+        const itemsArr = await itemClient.createItem(this.input.value);
+        this.loader.classList.remove("display");
+        this.input.value =""
+        this.addItem(itemsArr);
+      } catch (err) {
+        this.addItem([err], false);
+      }
+
+    });
+  }
+
+ async  deleteAllTasks() {
+   await  itemClient.deleteAll();
+    this.taskElement.classList.toggle("removed-item");
+    setTimeout(() => {
+
+      this.taskElement.innerHTML = ""; 
+      this.taskElement.classList.remove("removed-item");
+      this.countTasks();
+    }, 500);
+
+  }
+
+  addAlert(invalidMsg, miilis) {
+    this.addErorrAlert(invalidMsg, miilis);
+  }
+
+  addErorrAlert(invalidMsg, miilis = 4000) {
+    const div = document.createElement("div");
+    const i = document.createElement("i");
+    div.classList = "error-msg";
+    div.appendChild(i);
+    this.todoListH1Elem.appendChild(div);
+    div.innerText = invalidMsg;
+    setTimeout(() => {
+      div.remove();
+      i.remove();
+    }, miilis);
+  }
+
+  whenPressEnter() {
+    this.input.addEventListener("keypress", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        this.addButton.click();
+      }
+    });
+  }
+  countTasks() {
+    const tasksCounter = this.taskElement.childElementCount;
+    if (tasksCounter === 0) {
+      this.counterElement.style.visibility = "hidden";
+      this.clearAllBtn.style.visibility = "hidden";
+    }
+    if (tasksCounter > 0) {
+      this.counterElement.innerText = `${tasksCounter} Pending Tasks`;
+      this.counterElement.style.visibility = "visible";
+      this.clearAllBtn.style.visibility = "visible";
+    }
+    if (tasksCounter < 2) {
+      this.sortBtn.style.visibility = "hidden";
+    } else {
+      this.sortBtn.style.visibility = "visible";
+    }
+  }
+
+  sortTaskByName() {
+    const taksElements = [...this.taskElement.childNodes];
+    taksElements.sort((task1, task2) => {
+      const text1 = task1.querySelector("span").innerHTML;
+      const text2 = task2.querySelector("span").innerHTML;
+      return text1.toLowerCase().localeCompare(text2.toLowerCase());
+    });
+
+    taksElements.forEach((task) => task.remove());
+    taksElements.forEach((task) => this.taskElement.appendChild(task));
+  }
+
+  addItem(renderNewTask) {
+    for (const value of renderNewTask) {
+      this.renderItem(value);
+    }
+    this.countTasks();
+  }
+  renderItem(value) {
+    const taskListElem = document.createElement("li");
+    const inputText = document.createElement("span");
+    inputText.classList = "tasks_spans";
+    taskListElem.appendChild(inputText);
+    if (value.isPokemon) {
+      inputText.innerText = `Cool you got ${value.item}`;
+      const img = this.getPokemonImage(value);
+      taskListElem.appendChild(img);
+    } else {
+      inputText.innerText = value.item;
+    }
+    taskListElem.setAttribute("id", `${value.itemId}`);
+    taskListElem.classList = "new-item";
+    this.taskElement.appendChild(taskListElem);
+    this.createDeleteButton(taskListElem);
+    this.clickOnItem(taskListElem, inputText);
+  }
+
+  getPokemonImage(pokemonObj) {
+    const url = pokemonObj.imageUrl;
+    const img = document.createElement("img");
+    img.setAttribute("src", url);
+    return img;
+  }
+
+  async createDeleteBtn(taskListElem, deleteButton) {
+    deleteButton.addEventListener("click", async () => {
+      taskListElem.classList.toggle("removed-item");
+      const itemId = taskListElem.id;
+       await itemClient.deleteItem(itemId);
+      setTimeout(() => {
+        taskListElem.remove();
+        this.countTasks();
+      }, 400);
+    });
+    return;
+  }
+
+  clickOnItem(taskListElem, inputText) {
+    taskListElem.addEventListener(
+      "click",
+      (e) => {
+        if (e.target !== taskListElem) return;
+        alert(inputText.innerText);
+        taskListElem.classList.toggle("checked");
+      },
+      false
+    );
+  }
+
+  createDeleteButton(taskListElem) {
+    const deleteButton = document.createElement("button");
+    deleteButton.className = "delete";
+    deleteButton.innerHTML = "🗑️";
+    taskListElem.appendChild(deleteButton);
+    this.createDeleteBtn(taskListElem, deleteButton);
+  }
+
+}
+const main = new Main();
+
+document.addEventListener("DOMContentLoaded", function () {
+  // you should create an `init` method in your class
+  // the method should add the event listener to your "add" button
+  main.init();
+});