monday-u-com · epent · May 14, 2022 · May 14, 2022 · May 14, 2022 · May 14, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "monday-u-exercises",
+  "description": "Welcome to monday-u official github repository! We are very excited to have you here!   This is going to be so much fun! Here are a few general details:",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epent/monday-u-exercises.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/epent/monday-u-exercises/issues"
+  },
+  "homepage": "https://github.com/epent/monday-u-exercises#readme"
+}
diff --git a/src/ex1/index.html b/src/ex1/index.html
diff --git a/src/ex1/index_ex1.html b/src/ex1/index_ex1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Task Manager</title>
+    <link rel="stylesheet" href="style_ex1.css" />
+    <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=Dosis:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="white-box">
+      <h1 class="main-header">Task Manager</h1>
+      <div class="task-input-wrapper">
+        <input class="task-input" type="text" placeholder="Add your new task" />
+        <button id="add-task-button" class="task-button hithere">
+          Add task
+        </button>
+      </div>
+      <ul class="task-list">
+        <div id="triangle" class="triangle"></div>
+        <div id="box" class="box"></div>
+        <h2 id="welcome-sentence" class="welcome">
+          Can't wait when you add your first task!
+        </h2>
+      </ul>
+      <button id="sort-by-name-button" class="task-button hidden">
+        Sort by name
+      </button>
+      <button id="clear-all-button" class="task-button hidden">
+        Clear All
+      </button>
+    </div>
+  </body>
+  <script src="script_ex1.js"></script>
+</html>
diff --git a/src/ex1/script.js b/src/ex1/script.js
diff --git a/src/ex1/script_ex1.js b/src/ex1/script_ex1.js
@@ -0,0 +1,141 @@
+const addButton = document.querySelector("#add-task-button");
+const triangle = document.querySelector("#triangle");
+const box = document.querySelector("#box");
+const welcome = document.querySelector("#welcome-sentence");
+const addTaskButton = document.querySelector(".task-button");
+const addTaskInput = document.querySelector(".task-input");
+const clearAllButton = document.querySelector("#clear-all-button");
+const sortByNameButton = document.querySelector("#sort-by-name-button");
+const listOfTasks = [];
+
+addTaskButton.addEventListener("click", addTask);
+clearAllButton.addEventListener("click", clearAll);
+sortByNameButton.addEventListener("click", sortByName);
+
+addTaskInput.addEventListener("keypress", (event) => {
+  if (event.key === "Enter") {
+    addTask();
+  }
+});
+
+function addTask() {
+  const task = document.querySelector(".task-input").value;
+  const text = capitalize(task);
+
+  if (text === "") {
+    alert("Input cannot be empty");
+  } else {
+    if (listOfTasks.length === 0) {
+      hideWelcomePart();
+    }
+    listOfTasks.push(text);
+    createTask(text);
+  }
+}
+
+function hideWelcomePart() {
+  addButton.classList.remove("hithere");
+  clearAllButton.classList.remove("hidden");
+  sortByNameButton.classList.remove("hidden");
+
+  triangle.classList.add("hidden");
+  box.classList.add("hidden");
+  welcome.classList.add("hidden");
+}
+
+function showWelcomePart() {
+  addButton.classList.add("hithere");
+  clearAllButton.classList.add("hidden");
+  sortByNameButton.classList.add("hidden");
+
+  triangle.classList.remove("hidden");
+  box.classList.remove("hidden");
+  welcome.classList.remove("hidden");
+}
+
+function createTask(text) {
+  //create elements
+  const divElm = document.createElement("div");
+  const liElm = document.createElement("li");
+  const deleteButton = document.createElement("button");
+
+  // style  elements
+  divElm.classList.add("task");
+  divElm.classList.add("grow");
+  liElm.classList.add("task-item");
+  deleteButton.classList.add("delete-button");
+
+  //add textNodes
+  liElm.appendChild(document.createTextNode(text));
+  deleteButton.appendChild(document.createTextNode("X"));
+
+  //add ids
+  const idText = text.split(" ").join("-");
+  divElm.setAttribute("id", `${idText}`);
+  deleteButton.setAttribute("id", `${idText}-button`);
+
+  //append <li> and <button> to <div>
+  divElm.appendChild(liElm);
+  divElm.appendChild(deleteButton);
+
+  //append <div> to <ul>
+  const taskList = document.querySelector(".task-list");
+  taskList.appendChild(divElm);
+
+  //add clickListener to button
+  deleteButton.addEventListener("click", deleteTask);
+  liElm.addEventListener("click", () => alert(`Task: ${text}`));
+
+  //clear input
+  document.querySelector(".task-input").value = "";
+}
+
+function deleteTask({ target }) {
+  const buttonId = target.id.split("-");
+  buttonId.pop();
+
+  //remove <div> with task
+  const divElementId = buttonId.join("-");
+  document.querySelector(`#${divElementId}`).remove();
+
+  // remove task from list
+  const taskText = buttonId.join(" ");
+  const elementIndex = listOfTasks.findIndex((task) => {
+    return task === taskText;
+  });
+  listOfTasks.splice(elementIndex, 1);
+
+  //show weolcome if list is empty
+  if (listOfTasks.length === 0) {
+    showWelcomePart();
+  }
+}
+
+function clearAll() {
+  listOfTasks.forEach((task) => {
+    const taskId = task.split(" ").join("-");
+    document.querySelector(`#${taskId}`).remove();
+  });
+  listOfTasks.splice(0);
+
+  showWelcomePart();
+}
+
+function sortByName() {
+  listOfTasks.forEach((task) => {
+    const taskId = task.split(" ").join("-");
+    document.querySelector(`#${taskId}`).remove();
+  });
+
+  listOfTasks.sort();
+  console.log(listOfTasks);
+
+  listOfTasks.forEach((task) => {
+    createTask(task);
+  });
+}
+
+function capitalize(string) {
+  const updatedString = string.charAt(0).toUpperCase() + string.slice(1);
+  return updatedString;
+}
diff --git a/src/ex1/style.css b/src/ex1/style.css