├── README.md ├── index.html ├── main.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # TODO App in javascript html and css 2 | 3 | This is a simple todo application made with HTML, CSS and Javascript 4 | 5 | ### How to run the App 6 | running the todo app is very simple - just open the `index.html` file in your browser. 7 | 8 | ## Preview of the TODO App 9 | 10 |

11 | 12 |

Live Demo of the TODO App

13 | 14 | ## Contribute to this project 15 | 16 | Thank you for browsing this repo. Any contributions you make are **greatly 17 | appreciated**. 18 | 19 | If you have a suggestion that would make this better, please fork the repo and 20 | create a pull request. You can also simply open an issue with the tag 21 | "enhancement". Don't forget to give the project a star! Thanks again! 22 | 23 | 1. Fork the Project 24 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 25 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 26 | 4. Push to the Branch (`git push origin feature/AmazingFeature`) 27 | 5. Open a Pull Request 28 | 29 | ## Raise An Issue 30 |

31 | Request Feature
32 | Report Bug 33 |

34 | 35 |
36 | Made with :heart: by Aklilu Mandefro 37 | 38 | ## Please give this repo a ⭐ if you found it helpful. 39 | 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | TODO App 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

TODO App

21 | 22 | 23 |
24 | Add New Task 25 | 26 |
27 | 28 | 29 | 54 | 55 |
Tasks
56 | 57 |
58 | 59 |
60 |
61 | 62 | 63 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | let form = document.getElementById("form"); 2 | let textInput = document.getElementById("textInput"); 3 | let dateInput = document.getElementById("dateInput"); 4 | let textarea = document.getElementById("textarea"); 5 | let msg = document.getElementById("msg"); 6 | let tasks = document.getElementById("tasks"); 7 | let add = document.getElementById("add"); 8 | 9 | form.addEventListener("submit", (e) => { 10 | e.preventDefault(); 11 | formValidation(); 12 | }); 13 | 14 | let formValidation = () => { 15 | if (textInput.value === "") { 16 | console.log("failure"); 17 | msg.innerHTML = "Task cannot be blank"; 18 | } else { 19 | console.log("success"); 20 | msg.innerHTML = ""; 21 | acceptData(); 22 | add.setAttribute("data-bs-dismiss", "modal"); 23 | add.click(); 24 | 25 | (() => { 26 | add.setAttribute("data-bs-dismiss", ""); 27 | })(); 28 | } 29 | }; 30 | 31 | let data = [{}]; 32 | 33 | let acceptData = () => { 34 | data.push({ 35 | text: textInput.value, 36 | date: dateInput.value, 37 | description: textarea.value, 38 | }); 39 | 40 | localStorage.setItem("data", JSON.stringify(data)); 41 | 42 | console.log(data); 43 | createTasks(); 44 | }; 45 | 46 | let createTasks = () => { 47 | tasks.innerHTML = ""; 48 | data.map((x, y) => { 49 | return (tasks.innerHTML += ` 50 |
51 | ${x.text} 52 | ${x.date} 53 |

${x.description}

54 | 55 | 56 | 57 | 58 | 59 |
60 | `); 61 | }); 62 | 63 | resetForm(); 64 | }; 65 | 66 | let deleteTask = (e) => { 67 | e.parentElement.parentElement.remove(); 68 | data.splice(e.parentElement.parentElement.id, 1); 69 | localStorage.setItem("data", JSON.stringify(data)); 70 | console.log(data); 71 | 72 | }; 73 | 74 | let editTask = (e) => { 75 | let selectedTask = e.parentElement.parentElement; 76 | 77 | textInput.value = selectedTask.children[0].innerHTML; 78 | dateInput.value = selectedTask.children[1].innerHTML; 79 | textarea.value = selectedTask.children[2].innerHTML; 80 | 81 | deleteTask(e); 82 | }; 83 | 84 | let resetForm = () => { 85 | textInput.value = ""; 86 | dateInput.value = ""; 87 | textarea.value = ""; 88 | }; 89 | 90 | (() => { 91 | data = JSON.parse(localStorage.getItem("data")) || [] 92 | console.log(data); 93 | createTasks(); 94 | })(); 95 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | margin: 0 50px; 4 | background-color: #e5e5e5; 5 | overflow: hidden; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 100vh; 10 | } 11 | 12 | .app { 13 | background-color: #fff; 14 | width: 300px; 15 | height: 500px; 16 | border: 5px solid #abcea1; 17 | border-radius: 8px; 18 | padding: 15px; 19 | overflow-y: scroll; 20 | } 21 | 22 | .app::-webkit-scrollbar { 23 | width: 0 !important; 24 | } 25 | 26 | #addNew { 27 | display: flex; 28 | justify-content: space-between; 29 | align-items: center; 30 | background-color: rgba(171, 206, 161, 0.35); 31 | padding: 5px 10px; 32 | border-radius: 5px; 33 | cursor: pointer; 34 | } 35 | 36 | .fa-plus { 37 | background-color: #abcea1; 38 | padding: 3px; 39 | border-radius: 3px; 40 | } 41 | 42 | #tasks { 43 | display: grid; 44 | grid-template-columns: 1fr; 45 | gap: 14px; 46 | } 47 | 48 | #tasks div { 49 | border: 3px solid #abcea1; 50 | background-color: #e2eede; 51 | border-radius: 6px; 52 | padding: 5px; 53 | display: grid; 54 | gap: 4px; 55 | } 56 | 57 | #tasks div .options { 58 | justify-self: center; 59 | display: flex; 60 | gap: 20px; 61 | } 62 | 63 | #tasks div .options i { 64 | cursor: pointer; 65 | } 66 | 67 | #msg { 68 | color: red; 69 | } 70 | 71 | .todo-footer{ 72 | position: fixed; 73 | bottom: 0; 74 | left: 0; 75 | right: 0; 76 | background-color: rgb(25, 25, 25); 77 | color: white; 78 | font-family: Arial; 79 | height: 30px; 80 | padding-top: 30px; 81 | padding-bottom: 45px; 82 | text-align: center; 83 | } 84 | 85 | a{ 86 | text-decoration: none; 87 | color: #fff; 88 | } 89 | 90 | a:hover{ 91 | text-decoration: underline; 92 | color: #abcea1; 93 | } 94 | --------------------------------------------------------------------------------