monday-u-com · Stavush · May 18, 2022 · May 19, 2022 · May 19, 2022 · May 19, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/src/ex1/README.md b/src/ex1/README.md
@@ -2,6 +2,9 @@
 Welcome to your first monday-u task! Hope you are excited as we are!  
 This is going to be an ongoing task, so don't worry, we are going to build this awesome project step by step, from zero to hero :)
 
+## Screenshot
+![](https://github.com/Stavush/monday-u-exercises/blob/exercise1/src/ex1/Screenshot.png?raw=true)
+
 
 ## In this section you will practice
 **HTML** - Basic level, tags.  
@@ -35,4 +38,4 @@ Bonus
 
 When you finish, it should look like this:
 
-![](https://res.cloudinary.com/practicaldev/image/fetch/s--pyyuGSZ9--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/o96lsrld21tk232kidu4.png)
+![](https://res.cloudinary.com/practicaldev/image/fetch/s--pyyuGSZ9--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/o96lsrld21tk232kidu4.png)
diff --git a/src/ex1/Screenshot.png b/src/ex1/Screenshot.png
diff --git a/src/ex1/img/Screenshot.png b/src/ex1/img/Screenshot.png
diff --git a/src/ex1/index.html b/src/ex1/index.html
@@ -1,12 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Exercise 1</title>
+    <title>Achievement Assistant</title>
     <link rel="stylesheet" href="style.css" />
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cabin&display=swap" rel="stylesheet"> 
+    <!-- Font Awsome -->
+    <script src="https://kit.fontawesome.com/27f05d0dc4.js" crossorigin="anonymous"></script>
+    <link rel="shortcut icon" href="#">
 </head>
 <body>
 
-<h1>Todo list</h1>
+<div id="container">
+    <h1>Achievement Assistant</h1>
+    <div id="tabs">
+        <button class="tab" id="all-tasks">All Tasks</button>
+        <button class="tab" id="done">Done</button>
+        <button class="tab" id="not-done">Not Done</button>
+    </div>
+    <form>
+        <input type="text" class="new-task-text" placeholder="Add a new task">
+        <button type="submit" class="add-task">
+            <i class="fa-solid fa-plus"></i>
+        </button>
+    </form>
+
+    <div class="todo-list"></div>
+        <div class="bottom-container">
+            <div id="pending"></div>
+            <button id="clear-all">Clear all</button>
+        </div>
+    </div>
 
 
 </body>

diff --git a/src/ex1/script.js b/src/ex1/script.js
@@ -0,0 +1,166 @@
+//selectors
+const todoList = document.querySelector('.todo-list');
+const newTaskText = document.querySelector('.new-task-text');
+const addTodoTask = document.querySelector('.add-task');
+const tabs = document.querySelector('#tabs');
+const allTasksButton = document.querySelector('#all-tasks'); 
+const doneButton = document.querySelector('#done'); 
+const notDoneButton = document.querySelector('#not-done'); 
+const clearAllButton = document.querySelector('#clear-all');
+const pending = document.querySelector('#pending');
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    //event listeners
+    addTodoTask.addEventListener('click', addTask);
+    todoList.addEventListener('click', (e) => {
+        deleteTask(e);
+        checkTask(e);
+        if(e.target.classList[0] === 'todo-text'){
+            const taskText = e.target.childNodes[0].nodeValue;
+            if(taskText){
+                window.alert( taskText + " was chosen");
+            } else{
+                window.alert( "Empty task was chosen");
+            }
+        }
+
+    });
+    tabs.addEventListener('click', handleTabs);
+    clearAllButton.addEventListener('click', clearAll);
+
+    calculatePending();
+
+    function createTaskDiv(){
+        const taskDiv = document.createElement('div');
+        taskDiv.classList.add('task');
+        taskDiv.setAttribute('done', 'false');
+        // add checkbox to task
+        taskDiv.appendChild(addCheckbox());
+        // add task's text
+        taskDiv.appendChild(addDivText());
+        // add delete button
+        taskDiv.appendChild(addDeleteButton());
+        return taskDiv;
+    }
+
+    function addCheckbox (){
+        const check = document.createElement('button');
+        check.classList.add('checkbox');
+        check.innerHTML = '<i class="fa-solid fa-square"></i>';
+        return check;
+    }
+
+    function addDivText (){
+        const todoTask = document.createElement('div');
+        todoTask.classList.add('todo-text');
+        todoTask.innerText = newTaskText.value;
+        return todoTask;
+    }
+
+    function addDeleteButton(){
+        const deleteButton = document.createElement('button');
+        deleteButton.classList.add('delete-btn');
+        deleteButton.innerHTML = '<i class="fa-solid fa-trash"></i>';
+        return deleteButton;
+    }
+
+    function addTask (e){
+        // prevents refreshing of the page
+        e.preventDefault(); 
+        // create task div and add the todo div to the list
+        todoList.appendChild(createTaskDiv());
+        // erases text input
+        newTaskText.value = "";
+        calculatePending();
+    }
+
+    function checkTask(e){
+        // function that contains the logic of checking tasks
+        const checkbox = e.target;
+        const task = checkbox.parentElement.parentElement;
+
+        if (checkbox.classList[1] === 'fa-square' || checkbox.classList[1] === 'fa-square-check'){
+            if (task.getAttribute('done') === 'false'){
+                checkbox.parentElement.innerHTML = '<i class="fa-solid fa-square-check"></i>';
+                task.style.color = "grey";
+                task.style.textDecoration = "line-through";
+                task.setAttribute("done", "true");
+            } else if (task.getAttribute('done') === 'true'){
+                checkbox.parentElement.innerHTML = '<i class="fa-solid fa-square"></i>';
+                task.style.color = "#FFF";
+                task.style.textDecoration = "none";
+                task.setAttribute("done", "false");
+            }
+            calculatePending();
+        }
+    }
+
+    function deleteTask (e){
+        // function that deletes a task
+        const task = e.target.parentElement;
+        if (task.classList[0] === "delete-btn"){
+            task.parentElement.remove();
+        }
+        calculatePending();
+    }
+
+    function handleTabs(e){
+        const button = e.target.id;
+        const tasks = todoList.childNodes;
+        switch(button){
+            case 'all-tasks':
+                notDoneButton.style.opacity = '0.5';
+                allTasksButton.style.opacity ='1';
+                doneButton.style.opacity = '0.5';
+                tasks.forEach(task => {
+                    task.style.display = 'flex';
+                });
+                break;
+            case 'done':
+                notDoneButton.style.opacity = '0.5';
+                allTasksButton.style.opacity ='0.5';
+                doneButton.style.opacity = '1';
+                tasks.forEach(task => {
+                    if (task.getAttribute('done') === 'true'){
+                        task.style.display = 'flex';
+                    } else {
+                        task.style.display = 'none';
+                    }
+                });
+                break;
+            case 'not-done':
+                notDoneButton.style.opacity = '1';
+                allTasksButton.style.opacity ='0.5';
+                doneButton.style.opacity = '0.5';
+                tasks.forEach(task => {
+                    if (task.getAttribute('done') === 'false'){
+                        task.style.display = 'flex';
+                    } else {
+                        task.style.display = 'none';
+                    }
+                });
+                break;
+        }
+    }
+
+    function calculatePending (){
+        // function that calculates how many pending tasks there are
+        const tasks = todoList.childNodes;
+        const total = tasks.length;
+        let numberOfPending = 0;
+        tasks.forEach( task => {
+            if(task.getAttribute('done') === 'false'){
+                numberOfPending++;
+            }
+        })
+        pending.innerText = `There are ${numberOfPending} / ${total} pending tasks`;
+
+    }
+
+    function clearAll (){
+        // function that clears all the tasks
+        todoList.innerHTML="";
+        calculatePending();
+    }
+});
diff --git a/src/ex1/style.css b/src/ex1/style.css
@@ -0,0 +1,164 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border-radius: 5px;
+    font-family: 'Cabin', sans-serif;
+}
+
+body{
+    background: #9796f0;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #fbc7d4, #9796f0);
+    background: linear-gradient(to right, #fbc7d4, #9796f0);
+    color: #FFF;
+}
+
+#container{
+    margin: auto;
+    border-radius: 10px;
+    background-color: #FFF;
+    width: 50vw;
+    height:70vh;
+    min-height: 420px;
+    min-width: 350px;
+    max-width: 500px;
+    padding: 15px;
+    margin-top: 5%;
+}
+
+h1{
+    font-size: 2rem;
+    color: #8c7ae6;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+form{
+    display: flex;
+    flex: 1;
+    padding: 0;
+    margin-bottom: 5px;
+}
+
+
+input{
+    font-family: 'Cabin', sans-serif;
+    width: 100%;
+    border: none;
+    background-color: #fff;
+    color: #8c7ae6;
+    border: 2px solid;
+    outline: none;
+    font-size: 1rem;
+}
+
+button{
+    cursor: pointer;
+    border: none;
+    font-size: 1rem;
+    background-color: #fbc7d4;
+    color: #FFF;
+    padding: 5px;
+}
+
+button:active{
+    transform: translateY(2px);
+}
+
+#tabs{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+    width: 100%;
+}
+
+.tab{
+    width:32%;
+    background-image: linear-gradient(to right, #9796f0 0%, #D6A4A4  51%, #DAE2F8  100%);
+    text-transform: uppercase;
+    transition: 0.5s;
+    background-size: 200% auto;
+    color: white;            
+    box-shadow: 0 0 20px #eee;
+}
+
+.tab:hover{
+    background-position: right center; /* change the direction of the change here */
+    color: #fff;
+    text-decoration: none;
+}
+
+
+#done, #not-done{
+    opacity: 0.5;
+}
+
+.add-task{
+    border: 0;
+    font-size:1rem;
+    background-color: #8c7ae6;
+}
+
+.todo-list{
+    overflow: auto;
+    height: 70%;
+}
+
+.task{
+    display: flex;
+    flex: 0;
+    font-size: 1rem;
+    background-color: #fbc7d4;
+    color: #FFF;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+    height: fit-content;
+    padding: 3px;
+    margin-bottom: 10px;
+    /* adding task animation */
+    animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+    opacity: 0;
+    transform: rotateX(-90deg);
+    transform-origin: top center;
+}
+
+@keyframes show {
+    100% {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+.task:hover, button:hover{
+    background-color: #f9bbcb;
+    cursor: pointer;
+}
+
+.todo-text{
+    width: 100%;
+    margin-left: 10px;
+}
+
+.bottom-container{
+    margin-top: 5px;
+    position: relative;
+    display: flex;
+    text-align: center;
+    justify-content: space-between;
+}
+
+#pending{
+    background-color: #8c7ae6;
+    width: fit-content;
+    margin-right: 5px;
+    padding: 5px;
+}
+
+#clear-all{
+    padding: 5px;
+    background-color: #8c7ae6;
+}
+
+#clear-all:hover{
+    background-color: red;
+}
+