monday-u-com · DanMenahem · May 14, 2022 · May 15, 2022 · May 15, 2022 · May 17, 2022
diff --git a/src/ex1/README.md b/src/ex1/README.md
@@ -13,24 +13,24 @@ A todo app!
 Almost as cool as our boards, but with a bit less functionality.  
 The requirements:
 - [x] Import the relevant CSS (style.css) and JS (script.js) files - already done for you
-- [ ] Choose a name for your app and update the title to your app name
-- [ ] Add your app name in the top of the screen (see mock)
-- [ ] Build the layout according to the mock. (background, centered white box, etc...)
-- [ ] Add a textbox to be used for adding tasks
-- [ ] Add a button ("Add task")
-- [ ] When "Add task" button is clicked, add a task to the task list
-- [ ] Change the background and cursor type of an item when hovered on
-- [ ] When a list item is clicked, show 'alert' (**Hint**: check the [alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) method) with the item name
-- [ ] Delete an item when "Delete" button is clicked
+- [x] Choose a name for your app and update the title to your app name
+- [x] Add your app name in the top of the screen (see mock)
+- [x] Build the layout according to the mock. (background, centered white box, etc...)
+- [x] Add a textbox to be used for adding tasks
+- [x] Add a button ("Add task")
+- [x] When "Add task" button is clicked, add a task to the task list
+- [x] Change the background and cursor type of an item when hovered on
+- [x] When a list item is clicked, show 'alert' (**Hint**: check the [alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) method) with the item name
+- [x] Delete an item when "Delete" button is clicked
 
 
 Bonus
-- [ ] Clear the input when a new item is added
-- [ ] Add input validation. e.g when the text input is empty, show a message with an error
-- [ ] Add "empty state" - when there are no items on the list, show some nice and inviting UI to encourage the user to add items
-- [ ] Add ability to sort the list by name
-- [ ] Add task when enter key is pressed
-- [ ] Add animation when a new item is added
+- [x] Clear the input when a new item is added
+- [x] Add input validation. e.g when the text input is empty, show a message with an error
+- [x] Add "empty state" - when there are no items on the list, show some nice and inviting UI to encourage the user to add items
+- [x] Add ability to sort the list by name
+- [x] Add task when enter key is pressed
+- [x] Add animation when a new item is added
 - [ ] have another cool idea? Go wild! 
 
 When you finish, it should look like this:

diff --git a/src/ex1/index.html b/src/ex1/index.html
@@ -1,14 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <title>Exercise 1</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Todo List</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="icon" href="../images/todo-icon.png">
     <link rel="stylesheet" href="style.css" />
 </head>
-<body>
-
-<h1>Todo list</h1>
 
+<body onload="init()">
+    <div class="container">
+        <h1>My Todo list</h1>
+        <div id="add-task">
+            <input type="text" id="taskInput" placeholder="Add your new todo task">
+            <button class="btn" id="addBtn" disabled>+</button>
+        </div>
+        <ul id="taskList">
+        </ul>
+        <div class="placeHolder hidden">
+            <i class="fa fa-plus"></i>
+            <p>Time to add your first task</p>
+        </div>
+        <div id="info">
+            <span id="peding-task-text">You have 0 pending tasks</span>
+            <button class="btn" id="clearAllBtn" disabled>Clear All</button>
+            <button class="btn" id="sortAllBtn" disabled>Sort All</button>
+        </div>
+    </div>
 
 </body>
 <script src="script.js"></script>
-</html>
+
+</html>
diff --git a/src/ex1/script.js b/src/ex1/script.js
@@ -0,0 +1,100 @@
+const taskInput = document.querySelector(" #taskInput ");
+const addBtn = document.querySelector(" #addBtn ");
+const clearAllBtn = document.querySelector(" #clearAllBtn ");
+const sortAllBtn = document.querySelector(" #sortAllBtn ");
+const taskList = document.querySelector(" #taskList ");
+const placeHolder = document.querySelector(" .placeHolder ")
+const pedingTaskText = document.querySelector(" #peding-task-text ")
+
+const taskArr = JSON.parse(localStorage.getItem("tasks")) || [];
+
+
+//waiting for user input before enable the add button
+taskInput.addEventListener('keyup', () => addBtn.disabled = !taskInput.value)
+
+// add a task when user press Enter key
+taskInput.addEventListener("keypress", (e) => { if (e.key === 'Enter') addNewTask(taskInput.value) });
+
+//add click event listener to add button
+addBtn.addEventListener("click", () => addNewTask(taskInput.value));
+
+//sort the tasks list add them to html list element and save them to the LocalStorage
+sortAllBtn.addEventListener("click", () => {
+    taskArr.sort();
+    taskList.innerHTML = '';
+    insertAllTasks();
+    localStorage.setItem("tasks", JSON.stringify(taskArr)); //add the updated task array to the localStorage
+})
+
+//Clear the tasks list
+clearAllBtn.addEventListener("click", () => {
+    taskArr.length = 0;
+    taskList.innerHTML = ''; //Clear the list of tasks element
+    localStorage.setItem("tasks", JSON.stringify(taskArr)); //add the updated task array to the localStorage
+    updateForm();
+})
+
+//function to add task and update the list and the localStorage
+function addNewTask(taskValue) {
+    taskArr.push(taskValue); //add the user value to the task array
+    taskList.appendChild(createLi(taskValue));
+    taskInput.value = ''; //clear the input after added
+    addBtn.disabled = true;
+    localStorage.setItem("tasks", JSON.stringify(taskArr)); //add the updated task array to the localStorage
+    updateForm();
+}
+
+// function to remove task that have been clicked
+function removeTask(li, taskValue) {
+    taskArr.splice(taskArr.indexOf(taskValue), 1);
+    taskList.removeChild(li);
+    localStorage.setItem("tasks", JSON.stringify(taskArr)); //add the updated task array to the localStorage
+    updateForm();
+}
+
+//update the button and the placeHolder if necessary
+function updateForm() {
+    pedingTaskText.innerHTML = "You have " + taskArr.length + " pending tasks"
+    if (taskArr.length === 0) { //if there are no task any more disable the clear and sort button
+        clearAllBtn.disabled = true;
+        sortAllBtn.disabled = true;
+        placeHolder.classList.remove("hidden");
+    }
+    else {
+        clearAllBtn.disabled = false;
+        sortAllBtn.disabled = false;
+        placeHolder.classList.add("hidden");
+    }
+}
+
+//function to insert the all tasks from the localStorage to the html list element
+function insertAllTasks() {
+    taskArr.forEach((taskValue) => {
+        taskList.appendChild(createLi(taskValue));
+    });
+    updateForm();
+}
+
+//Function to create the li element and its childs and assign a click event to them
+function createLi(taskValue) {
+    const li = document.createElement("li");
+    const span = document.createElement("span");
+    const i = document.createElement("i");
+    li.innerHTML = taskValue;
+    i.classList.add("fa", "fa-trash-o");
+    span.appendChild(i);
+    li.appendChild(span);
+    span.onclick = (e) => {
+        e.stopPropagation(); //stop the parent elemnt to listen to click event
+        removeTask(li, taskValue);
+    };
+    li.onclick = () => alert(taskValue);
+    li.classList.add('new-li');
+    return li;
+}
+
+//if there are some task in the localStorage insert them
+function init() {
+    if (taskArr.length != 0) insertAllTasks();
+    else placeHolder.classList.remove("hidden");
+}
diff --git a/src/ex1/style.css b/src/ex1/style.css
@@ -0,0 +1,163 @@
+* {
+    font-family: Alef, Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100%;
+    background: linear-gradient(to top, rgb(47, 255, 102) 0%, rgb(0, 200, 255) 100%);
+}
+
+h1 {
+    font-size: 35px;
+}
+
+
+.container {
+    background-color: white;
+    border-radius: 10px;
+    width: 100%;
+    max-width: 500px;
+    padding: 25px;
+}
+
+.btn[disabled] {
+    opacity: 0.3;
+    box-shadow: none;
+    border: none;
+}
+
+.btn[disabled]:hover {
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+.btn {
+    height: 100%;
+    text-align: center;
+    color: white;
+    border: none;
+    margin-left: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: rgb(30, 75, 254);
+}
+
+.btn:hover {
+    background-color: rgb(0, 51, 255);
+    box-shadow: 0.5px 0.5px 10px 0.5px grey;
+}
+
+
+.placeHolder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: greenyellow;
+    font-size: 100px;
+    opacity: 0.3;
+    padding: 60px;
+    border: 1px solid rgb(99, 99, 99);
+    border-radius: 8px;
+}
+
+.hidden {
+    display: none;
+}
+
+.placeHolder p {
+    margin-top: 5px;
+    color: black;
+}
+
+#addBtn {
+    width: 60px;
+    font-size: 30px;
+}
+
+#add-task {
+    display: flex;
+    width: 100%;
+    height: 50px;
+    margin: 30px 0;
+}
+
+#add-task input {
+    width: 90%;
+    height: 100%;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding-left: 15px;
+    outline: none;
+}
+
+
+#taskList {
+    max-height: 260px;
+    overflow-y: auto;
+}
+
+
+#taskList li {
+    list-style: none;
+    line-height: 45px;
+    margin-bottom: 8px;
+    background-color: rgb(237, 237, 237);
+    border-radius: 8px;
+    padding-left: 15px;
+    position: relative;
+    overflow: hidden;
+}
+
+#taskList li span {
+    position: absolute;
+    right: -45px;
+    background-color: red;
+    color: white;
+    width: 40px;
+    text-align: center;
+    border-radius: 0 8px 8px 0;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+#taskList li:hover span {
+    right: 0;
+}
+
+#info {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    margin-top: 20px;
+    align-items: center;
+}
+
+#clearAllBtn,
+#sortAllBtn {
+    padding: 10px;
+}
+
+@keyframes append-animate {
+    from {
+        transform: translateX(-100%);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(0%);
+        opacity: 1;
+    }
+}
+
+/* animate new box */
+.new-li {
+    animation: append-animate .4s linear;
+}
diff --git a/src/ex2/ItemManager.js b/src/ex2/ItemManager.js
@@ -0,0 +1,29 @@
+class ItemManager {
+    constructor() {
+        this.taskArr = JSON.parse(localStorage.getItem("tasks")) || [];
+    }
+
+    addNewTask(taskValue) {
+        this.taskArr.push(taskValue); //add the user value to the task array
+        this.updateLocalStorage(this.taskArr);
+    }
+
+    removeTask(taskValue) {
+        this.taskArr = this.taskArr.filter(task => task !== taskValue);
+        this.updateLocalStorage(this.taskArr);
+    }
+
+    sortArr() {
+        this.taskArr.sort();
+        this.updateLocalStorage(this.taskArr);
+    }
+
+    clearArr() {
+        this.taskArr.length = 0;
+        this.updateLocalStorage(this.taskArr);
+    }
+
+    updateLocalStorage(valueToUpdate) {
+        localStorage.setItem("tasks", JSON.stringify(valueToUpdate)); //add the updated task array to the localStorage
+    }
+}