diff --git a/Todo.html b/Todo.html new file mode 100644 index 0000000..cca444d --- /dev/null +++ b/Todo.html @@ -0,0 +1,105 @@ + + + + + + TODO List + + + + + + +
+
Todo App
+
+ + +
+ +
+ You have pending tasks + +
+ +
+ + + + + diff --git a/css/todo-style.css b/css/todo-style.css new file mode 100644 index 0000000..21ee5f3 --- /dev/null +++ b/css/todo-style.css @@ -0,0 +1,131 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;0,900;1,900&display=swap"); +/*To do list style */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +::selection{ + color: #ffff; + background: rgb(142, 73, 232); +} +body{ + width: 100%; + height: 100vh; + /* overflow: hidden; */ + padding: 10px; + background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%); +} +.wrapper{ + background: #fff; + max-width: 400px; + width: 100%; + margin: 120px auto; + padding: 25px; + border-radius: 5px; + box-shadow: 0px 10px 15px rgba(0,0,0,0.1); +} +.wrapper header{ + font-size: 30px; + font-weight: 600; +} +.wrapper .inputField{ + margin: 20px 0; + width: 100%; + display: flex; + height: 45px; +} +.inputField input{ + width: 85%; + height: 100%; + outline: none; + border-radius: 3px; + border: 1px solid #ccc; + font-size: 17px; + padding-left: 15px; + transition: all 0.3s ease; +} +.inputField input:focus{ + border-color: #8E49E8; +} +.inputField button{ + width: 50px; + height: 100%; + border: none; + color: #fff; + margin-left: 5px; + font-size: 21px; + outline: none; + background: #8E49E8; + cursor: pointer; + border-radius: 3px; + opacity: 0.6; + pointer-events: none; + transition: all 0.3s ease; +} +.inputField button:hover, +.footer button:hover{ + background: #721ce3; +} +.inputField button.active{ + opacity: 1; + pointer-events: auto; +} +.wrapper .todoList{ + max-height: 250px; + overflow-y: auto; +} +.todoList li{ + position: relative; + list-style: none; + height: 45px; + line-height: 45px; + margin-bottom: 8px; + background: #f2f2f2; + border-radius: 3px; + padding: 0 15px; + cursor: default; + overflow: hidden; +} +.todoList li .icon{ + position: absolute; + right: -45px; + background: #e74c3c; + width: 45px; + text-align: center; + color: #fff; + border-radius: 0 3px 3px 0; + cursor: pointer; + transition: all 0.2s ease; +} +.todoList li:hover .icon{ + right: 0px; +} +.wrapper .footer{ + display: flex; + width: 100%; + margin-top: 20px; + align-items: center; + justify-content: space-between; +} +.footer button{ + padding: 6px 10px; + border-radius: 3px; + border: none; + outline: none; + color: #fff; + font-weight: 400; + font-size: 16px; + margin-left: 5px; + background: #8E49E8; + cursor: pointer; + user-select: none; + opacity: 0.6; + pointer-events: none; + transition: all 0.3s ease; +} +.footer button.active{ + opacity: 1; + pointer-events: auto; +} diff --git a/js/todo.js b/js/todo.js new file mode 100644 index 0000000..463fc85 --- /dev/null +++ b/js/todo.js @@ -0,0 +1,75 @@ +//to-do + +// getting all required elements +const inputBox = document.querySelector(".inputField input"); +const addBtn = document.querySelector(".inputField button"); +const todoList = document.querySelector(".todoList"); +const deleteAllBtn = document.querySelector(".footer button"); + +// onkeyup event +inputBox.onkeyup = () => { + let userEnteredValue = inputBox.value; //getting user entered value + if (userEnteredValue.trim() != 0) { + //if the user value isn't only spaces + addBtn.classList.add("active"); //active the add button + } else { + addBtn.classList.remove("active"); //unactive the add button + } +}; + +showTasks(); //calling showTask function + +addBtn.onclick = () => { + //when user click on plus icon button + let userEnteredValue = inputBox.value; //getting input field value + let getLocalStorageData = localStorage.getItem("algo-phantoms-todo-list"); //getting localstorage + if (getLocalStorageData == null) { + //if localstorage has no data + listArray = []; //create a blank array + } else { + listArray = JSON.parse(getLocalStorageData); //transforming json string into a js object + } + listArray.push(userEnteredValue); //pushing or adding new value in array + localStorage.setItem("New Todo", JSON.stringify(listArray)); //transforming js object into a json string + showTasks(); //calling showTask function + addBtn.classList.remove("active"); //unactive the add button once the task added +}; + +function showTasks() { + let getLocalStorageData = localStorage.getItem("New Todo"); + if (getLocalStorageData == null) { + listArray = []; + } else { + listArray = JSON.parse(getLocalStorageData); + } + const pendingTasksNumb = document.querySelector(".pendingTasks"); + pendingTasksNumb.textContent = listArray.length; //passing the array length in pendingtask + if (listArray.length > 0) { + //if array length is greater than 0 + deleteAllBtn.classList.add("active"); //active the delete button + } else { + deleteAllBtn.classList.remove("active"); //unactive the delete button + } + let newLiTag = ""; + listArray.forEach((element, index) => { + newLiTag += `
  • ${element}
    • `; + }); + todoList.innerHTML = newLiTag; //adding new li tag inside ul tag + inputBox.value = ""; //once task added leave the input field blank +} + +// delete task function +function deleteTask(index) { + let getLocalStorageData = localStorage.getItem("New Todo"); + listArray = JSON.parse(getLocalStorageData); + listArray.splice(index, 1); //delete or remove the li + localStorage.setItem("New Todo", JSON.stringify(listArray)); + showTasks(); //call the showTasks function +} + +// delete all tasks function +deleteAllBtn.onclick = () => { + listArray = []; //empty the array + localStorage.setItem("New Todo", JSON.stringify(listArray)); //set the item in localstorage + showTasks(); //call the showTasks function +};