├── assets ├── demo1.png ├── demo2.png ├── demo3.png ├── demo4.png └── favicon.png ├── JS ├── time.js └── main.js ├── .github └── ISSUE_TEMPLATE │ └── bug.md ├── CONTRIBUTORS.md ├── CSS ├── corner.css └── main.css ├── LICENSE ├── CONTRIBUTING.md ├── README.md ├── CODE_OF_CONDUCT.md └── index.html /assets/demo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tusharnankani/ToDoList/HEAD/assets/demo1.png -------------------------------------------------------------------------------- /assets/demo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tusharnankani/ToDoList/HEAD/assets/demo2.png -------------------------------------------------------------------------------- /assets/demo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tusharnankani/ToDoList/HEAD/assets/demo3.png -------------------------------------------------------------------------------- /assets/demo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tusharnankani/ToDoList/HEAD/assets/demo4.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tusharnankani/ToDoList/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /JS/time.js: -------------------------------------------------------------------------------- 1 | var dt = new Date(); 2 | document.getElementById("datetime").innerHTML = dt.toLocaleString(); -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug 3 | about: Create a bug-report to help address errors in the repo. 4 | title: '' 5 | labels: bug 6 | assignees: 'tusharnankani' 7 | 8 | --- 9 | 10 | **Description** 11 | 12 | 13 | 14 | **Screenshots** 15 | 16 | 17 | 18 | **Additional Context** 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /CONTRIBUTORS.md: -------------------------------------------------------------------------------- 1 | # Contributors! 2 | The following people have contributed to this *repository*! 3 | 4 | * Kartik Soneji (KartikSoneji, kartiksoneji@rocketmail.com) 5 | * Geoffroy Vie (dr0geo, geoffroy.vie@gmail.com) 6 | * Siddhant Pandey (siddhant094, pandeysiddhant21@gmail.com) 7 | 8 | ###### Add your names a, along with your comma-separated GitHub ID and e-mail ID in parentheses. 9 | 10 | ## Author 11 | * Tushar Nankani (tusharnankani, tusharnankani3@gmail.com) 12 | - [LinkedIn](https://www.linkedin.com/in/tusharnankani) 13 | -------------------------------------------------------------------------------- /CSS/corner.css: -------------------------------------------------------------------------------- 1 | .github-corner:hover .octo-arm { 2 | animation: octocat-wave 560ms ease-in-out; 3 | } 4 | 5 | @keyframes octocat-wave { 6 | 0% { 7 | transform: rotate(0deg); 8 | } 9 | 10 | 20% { 11 | transform: rotate(-25deg); 12 | } 13 | 14 | 40% { 15 | transform: rotate(10deg); 16 | } 17 | 18 | 60% { 19 | transform: rotate(-25deg); 20 | } 21 | 22 | 80% { 23 | transform: rotate(10deg); 24 | } 25 | 26 | 100% { 27 | transform: rotate(0deg); 28 | } 29 | } 30 | 31 | @media (max-width: 500px) { 32 | .github-corner:hover .octo-arm { 33 | animation: none; 34 | } 35 | 36 | .github-corner .octo-arm { 37 | animation: octocat-wave 560ms ease-in-out; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Tushar Nankani 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Greetings, contributors! 2 | 3 | - Have a look at the [Issues](https://github.com/tusharnankani/ToDoList/issues) section for issues that need to be solved! 4 | - If you make a contribution, please do not forget to add your personal details to the [CONTRIBUTORS.md](CONTRIBUTORS.md) file! 5 | 6 | ## *Technologies used* 7 | 8 | - HTML5 9 | - CSS3 (with Flexbox) 10 | - Vanilla Javascript 11 | 12 | ## Local setup 13 | 14 | - Select an issue and ask to be *assigned* to it. 15 | - **Star** the repository. 16 | - On the GitHub page of this repository, click on the Button "**Fork**". 17 | ![fork image](https://help.github.com/assets/images/help/repository/fork_button.jpg) 18 | - Clone ***your forked repository*** on your local machine. 19 | ![code ui](https://docs.github.com/assets/images/help/repository/code-button.png) 20 | 21 | For example, run this command inside your terminal: 22 | 23 | ```bash 24 | git clone https://github.com//ToDoList.git 25 | ``` 26 | 27 | **Replace \!** 28 | 29 | Learn more about [forking](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) and [cloning a repo](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository). 30 | - Before you make any changes, [keep your fork in sync](https://www.freecodecamp.org/news/how-to-sync-your-fork-with-the-original-git-repository/) to avoid merge conflicts: 31 | 32 | ```bash 33 | git remote add upstream https://github.com/tusharnankani/ToDoList.git 34 | git fetch upstream 35 | git pull upstream master 36 | git push 37 | ``` 38 | 39 | - If you run into a **merge conflict**, you have to resolve the conflict. There are a lot of guides online, or you can try this one by [opensource.com](https://opensource.com/article/20/4/git-merge-conflict). 40 | 41 | - Checkout to development branch (*name your branch according to the issue name*). 42 | 43 | ```bash 44 | git checkout -b 45 | ``` 46 | 47 | - Create a folder in 48 | [projects directory](https://github.com/Python-World/python-mini-projects/tree/master/projects) 49 | according to issue name. 50 | - Write your code, locally. 51 | - Add the changes with `git add`, `git commit` ([write a good commit message](https://chris.beams.io/posts/git-commit/), if possible). 52 | - I try to follow [this](https://harshkapadia2.github.io/git_basics/#_git_commit) commit structure: 53 | 54 | ```bash 55 | git add -A 56 | git commit -m "" 57 | ``` 58 | 59 | - Push the code *to your repository*. 60 | 61 | ```bash 62 | git push origin 63 | ``` 64 | 65 | - Go to the GitHub page of _your fork_, and **make a pull request**: 66 | 67 | ![pull request image](https://help.github.com/assets/images/help/pull_requests/choose-base-and-compare-branches.png) 68 | 69 | Read more about pull requests on the [GitHub help pages](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request). 70 | - Now wait, until one of us *reviews your Pull Request*! If there are any conflicts, you will get a notification. 71 | 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # To-Do-List 3 | 4 | ## A Simple To - Do Website! 5 | 6 | # To Do List 7 | 8 | ![ToDoList](https://socialify.git.ci/tusharnankani/ToDoList/image?description=1&forks=1&issues=1&language=1&owner=1&pattern=Brick%20Wall&pulls=1&stargazers=1&theme=Dark) 9 | 10 | #### This web page is hosted [here!](https://tusharjustdoit.netlify.app/) 11 | 12 | - View the local installation in the [CONTRUBUTING.md](https://github.com/tusharnankani/ToDoList/blob/master/CONTRIBUTING.md). 13 | 14 | ### *Features*: 15 | 16 | * User-friendly 17 | * Local Storage Supported 18 | * Displays current Date and Time 19 | * Responsive, on all devices 20 | * Themes: Users can choose among different themes. 21 | 22 | ### *Features to be added*: 23 | 24 | Check [Issues](https://github.com/tusharnankani/ToDoList/issues) for contributing to this repository. 25 | 26 | * SubTasks: Adding subtasks to the enlisted tasks, could be an option. 27 | * Neumorphic Interface: For the to-do's so, it looks more appealing, Can use SASS (.scss file) 28 | * ScratchPad: Adding an option of a Scratch pad and it can be locally saved. 29 | * Login Features (use APIs) & Database: So the website can be opened on any device, users can log in, and the To-Dos can be viewed anywhere, anytime. 30 | * Reminder/Alerts: Sending automated mails once logged in, and due date/time set. 31 | 32 | # *References* 33 | 34 | * For Fonts: [Google Fonts](https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap) 35 | * For Basic Icons (like Trash and Check buttons): [font-awesome](https://fontawesome.com) 36 | * For Favicon: [icons8](https://icons8.com/icons/) 37 | * For Color Coordination: [w3schools](https://www.w3schools.com/colors/colors_mixer.asp?colorbottom=000000&colortop=FFFFFF) 38 | * For JavaScript (Tutorial): [The Net Ninja](https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET) 39 | * For help with CSS: [CSS Tricks](https://css-tricks.com/) 40 | * For more CSS effects: [text-effects](https://speckyboy.com/underline-text-effects-css/) 41 | * For Type Writing effects: [Type-effects](https://usefulangle.com/post/85/css-typewriter-animation) 42 | * For Local Storage: [Web Dev Simplified Blog](https://blog.webdevsimplified.com/2020-08/cookies-localStorage-sessionStorage/) 43 | 44 | # *Contributions* 45 | 46 | - All contributors are most welcome! This is definitely open source! 47 | - View the [`CONTRIBUTING.md`](https://github.com/tusharnankani/ToDoList/blob/master/CONTRIBUTING.md) for further instructions, requirements/dependencies & local project setup instructions! 48 | - All the contributors to this repository can be found in the [`CONTRIBUTORS.md`](https://github.com/tusharnankani/ToDoList/blob/master/CONTRIBUTORS.md) file! 49 | 50 | ## *WEBSITE DEMO* 51 | 52 | ![Screenshot (771)](https://user-images.githubusercontent.com/61280281/99399713-0844b900-290c-11eb-8d7c-1199319b4a9e.png) 53 | 54 | ![Screenshot (772)](https://user-images.githubusercontent.com/61280281/99399731-0da20380-290c-11eb-8a59-e0a2e5f9b19f.png) 55 | 56 | ![Screenshot (773)](https://user-images.githubusercontent.com/61280281/99399728-0d096d00-290c-11eb-9ee5-59cc8358676c.png) 57 | 58 | ![Screenshot (774)](https://user-images.githubusercontent.com/61280281/99399723-0b3fa980-290c-11eb-8728-03d974be548d.png) 59 | 60 | # *Author* 61 | 62 | * Tushar Nankani (tusharnankani, tusharnankani3@gmail.com) 63 | - [LinkedIn](https://www.linkedin.com/in/tusharnankani) 64 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at tusharnankani3@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | JUST DO IT 19 | 20 | 21 | 22 | 23 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 |
48 |
49 |

50 | 51 |
52 | 53 |
54 |
    55 | 62 |
63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /JS/main.js: -------------------------------------------------------------------------------- 1 | // Selectors 2 | 3 | const toDoInput = document.querySelector('.todo-input'); 4 | const toDoBtn = document.querySelector('.todo-btn'); 5 | const toDoList = document.querySelector('.todo-list'); 6 | const standardTheme = document.querySelector('.standard-theme'); 7 | const lightTheme = document.querySelector('.light-theme'); 8 | const darkerTheme = document.querySelector('.darker-theme'); 9 | 10 | 11 | // Event Listeners 12 | 13 | toDoBtn.addEventListener('click', addToDo); 14 | toDoList.addEventListener('click', deletecheck); 15 | document.addEventListener("DOMContentLoaded", getTodos); 16 | standardTheme.addEventListener('click', () => changeTheme('standard')); 17 | lightTheme.addEventListener('click', () => changeTheme('light')); 18 | darkerTheme.addEventListener('click', () => changeTheme('darker')); 19 | 20 | // Check if one theme has been set previously and apply it (or std theme if not found): 21 | let savedTheme = localStorage.getItem('savedTheme'); 22 | savedTheme === null ? 23 | changeTheme('standard') 24 | : changeTheme(localStorage.getItem('savedTheme')); 25 | 26 | // Functions; 27 | function addToDo(event) { 28 | // Prevents form from submitting / Prevents form from relaoding; 29 | event.preventDefault(); 30 | 31 | // toDo DIV; 32 | const toDoDiv = document.createElement("div"); 33 | toDoDiv.classList.add('todo', `${savedTheme}-todo`); 34 | 35 | // Create LI 36 | const newToDo = document.createElement('li'); 37 | if (toDoInput.value === '') { 38 | alert("You must write something!"); 39 | } 40 | else { 41 | // newToDo.innerText = "hey"; 42 | newToDo.innerText = toDoInput.value; 43 | newToDo.classList.add('todo-item'); 44 | toDoDiv.appendChild(newToDo); 45 | 46 | // Adding to local storage; 47 | savelocal(toDoInput.value); 48 | 49 | // check btn; 50 | const checked = document.createElement('button'); 51 | checked.innerHTML = ''; 52 | checked.classList.add('check-btn', `${savedTheme}-button`); 53 | toDoDiv.appendChild(checked); 54 | // delete btn; 55 | const deleted = document.createElement('button'); 56 | deleted.innerHTML = ''; 57 | deleted.classList.add('delete-btn', `${savedTheme}-button`); 58 | toDoDiv.appendChild(deleted); 59 | 60 | // Append to list; 61 | toDoList.appendChild(toDoDiv); 62 | 63 | // CLearing the input; 64 | toDoInput.value = ''; 65 | } 66 | 67 | } 68 | 69 | 70 | function deletecheck(event){ 71 | 72 | // console.log(event.target); 73 | const item = event.target; 74 | 75 | // delete 76 | if(item.classList[0] === 'delete-btn') 77 | { 78 | // item.parentElement.remove(); 79 | // animation 80 | item.parentElement.classList.add("fall"); 81 | 82 | //removing local todos; 83 | removeLocalTodos(item.parentElement); 84 | 85 | item.parentElement.addEventListener('transitionend', function(){ 86 | item.parentElement.remove(); 87 | }) 88 | } 89 | 90 | // check 91 | if(item.classList[0] === 'check-btn') 92 | { 93 | item.parentElement.classList.toggle("completed"); 94 | } 95 | 96 | 97 | } 98 | 99 | 100 | // Saving to local storage: 101 | function savelocal(todo){ 102 | //Check: if item/s are there; 103 | let todos; 104 | if(localStorage.getItem('todos') === null) { 105 | todos = []; 106 | } 107 | else { 108 | todos = JSON.parse(localStorage.getItem('todos')); 109 | } 110 | 111 | todos.push(todo); 112 | localStorage.setItem('todos', JSON.stringify(todos)); 113 | } 114 | 115 | 116 | 117 | function getTodos() { 118 | //Check: if item/s are there; 119 | let todos; 120 | if(localStorage.getItem('todos') === null) { 121 | todos = []; 122 | } 123 | else { 124 | todos = JSON.parse(localStorage.getItem('todos')); 125 | } 126 | 127 | todos.forEach(function(todo) { 128 | // toDo DIV; 129 | const toDoDiv = document.createElement("div"); 130 | toDoDiv.classList.add("todo", `${savedTheme}-todo`); 131 | 132 | // Create LI 133 | const newToDo = document.createElement('li'); 134 | 135 | newToDo.innerText = todo; 136 | newToDo.classList.add('todo-item'); 137 | toDoDiv.appendChild(newToDo); 138 | 139 | // check btn; 140 | const checked = document.createElement('button'); 141 | checked.innerHTML = ''; 142 | checked.classList.add("check-btn", `${savedTheme}-button`); 143 | toDoDiv.appendChild(checked); 144 | // delete btn; 145 | const deleted = document.createElement('button'); 146 | deleted.innerHTML = ''; 147 | deleted.classList.add("delete-btn", `${savedTheme}-button`); 148 | toDoDiv.appendChild(deleted); 149 | 150 | // Append to list; 151 | toDoList.appendChild(toDoDiv); 152 | }); 153 | } 154 | 155 | 156 | function removeLocalTodos(todo){ 157 | //Check: if item/s are there; 158 | let todos; 159 | if(localStorage.getItem('todos') === null) { 160 | todos = []; 161 | } 162 | else { 163 | todos = JSON.parse(localStorage.getItem('todos')); 164 | } 165 | 166 | const todoIndex = todos.indexOf(todo.children[0].innerText); 167 | // console.log(todoIndex); 168 | todos.splice(todoIndex, 1); 169 | // console.log(todos); 170 | localStorage.setItem('todos', JSON.stringify(todos)); 171 | } 172 | 173 | // Change theme function: 174 | function changeTheme(color) { 175 | localStorage.setItem('savedTheme', color); 176 | savedTheme = localStorage.getItem('savedTheme'); 177 | 178 | document.body.className = color; 179 | // Change blinking cursor for darker theme: 180 | color === 'darker' ? 181 | document.getElementById('title').classList.add('darker-title') 182 | : document.getElementById('title').classList.remove('darker-title'); 183 | 184 | document.querySelector('input').className = `${color}-input`; 185 | // Change todo color without changing their status (completed or not): 186 | document.querySelectorAll('.todo').forEach(todo => { 187 | Array.from(todo.classList).some(item => item === 'completed') ? 188 | todo.className = `todo ${color}-todo completed` 189 | : todo.className = `todo ${color}-todo`; 190 | }); 191 | // Change buttons color according to their type (todo, check or delete): 192 | document.querySelectorAll('button').forEach(button => { 193 | Array.from(button.classList).some(item => { 194 | if (item === 'check-btn') { 195 | button.className = `check-btn ${color}-button`; 196 | } else if (item === 'delete-btn') { 197 | button.className = `delete-btn ${color}-button`; 198 | } else if (item === 'todo-btn') { 199 | button.className = `todo-btn ${color}-button`; 200 | } 201 | }); 202 | }); 203 | } -------------------------------------------------------------------------------- /CSS/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | /* #363532, rgb(88, 111, 112) */ 9 | align-items: center; 10 | display: flex; 11 | flex-direction: column; 12 | font-family: 'Work Sans', sans-serif; 13 | min-height: 100vh; 14 | padding-top: 3%; 15 | } 16 | 17 | /* Body light or darker themes */ 18 | .standard { 19 | background-image: linear-gradient(100deg, #575656, #062e3f); 20 | color: #ffdfdb; 21 | transition: 0.3s linear; 22 | } 23 | 24 | .light { 25 | background-image: linear-gradient(100deg, #d4f1ff, #ffffff); 26 | color: #1a150e; 27 | transition: 0.3s linear; 28 | } 29 | 30 | .darker { 31 | background-image: linear-gradient(100deg, #001214, #001f29); 32 | color: white; 33 | transition: 0.3s linear; 34 | } 35 | 36 | #header, #form, #datetime { 37 | margin: 0 1rem; 38 | min-height: 10vh; 39 | width: 100%; 40 | } 41 | 42 | #header { 43 | align-items: center; 44 | display: flex; 45 | flex-direction: column; 46 | justify-content: space-around; 47 | font-size: 3rem; 48 | min-height: 25vh; 49 | width: 100%; 50 | } 51 | 52 | /* Theme buttons div */ 53 | .flexrow-container { 54 | align-items: center; 55 | align-self: flex-end; 56 | display: flex; 57 | justify-content: space-around; 58 | margin-right: 3%; 59 | } 60 | 61 | .theme-selector { 62 | border: 1px solid #d1dae3; 63 | border-radius: 100%; 64 | height: 35px; 65 | margin: 0 8px; 66 | transition: tranform 150ms ease-in-out, box-shadow 200ms ease-in-out; 67 | width: 35px; 68 | } 69 | 70 | .theme-selector:hover { 71 | box-shadow: white 0 0 8px; 72 | cursor: pointer; 73 | } 74 | 75 | .theme-selector:active { 76 | transform: scale(0.95); 77 | } 78 | 79 | .standard-theme { 80 | background-image: linear-gradient(100deg, #575656, #062e3f); 81 | } 82 | 83 | .light-theme { 84 | background-image: linear-gradient(100deg, #d4f1ff, #ffffff); 85 | } 86 | 87 | .darker-theme { 88 | background-image: linear-gradient(100deg, #001214, #001f29); 89 | } 90 | 91 | /* Animation */ 92 | #title { 93 | border-right: solid 3px rgba(0, 0, 0, 0.75); 94 | white-space: pre; 95 | overflow: hidden; 96 | letter-spacing: 0.20rem; 97 | margin-top: 50px; 98 | margin-bottom: 20px; 99 | max-width: 480px; 100 | } 101 | 102 | /* Animation */ 103 | #title { 104 | animation: animated-text 2s steps(11,end) 0.5s 1 normal both, 105 | animated-cursor 750ms steps(11,end) infinite; 106 | } 107 | 108 | #title.darker-title { 109 | animation: animated-text 2s steps(11,end) 0.5s 1 normal both, darker-animated-cursor 750ms steps(11,end) infinite; 110 | } 111 | 112 | /* text animation */ 113 | 114 | @keyframes animated-text{ 115 | from{width: 0%;} 116 | to{width: 480px;} 117 | } 118 | 119 | /* cursor animations */ 120 | 121 | @keyframes animated-cursor{ 122 | from{border-right-color: rgba(0, 0, 0, 0.75);} 123 | to{border-right-color: transparent;} 124 | } 125 | 126 | @keyframes darker-animated-cursor { 127 | from{border-right-color: #01394c;} 128 | to{border-right-color: transparent;} 129 | } 130 | 131 | form { 132 | display: flex; 133 | font-size: 1.7rem; 134 | justify-content: center; 135 | margin: 15px 0; 136 | padding: 0.8rem; 137 | width: 100%; 138 | } 139 | 140 | form input { 141 | padding: 10px; 142 | font-size: 17px; 143 | border: none; 144 | outline: none; 145 | /* border-radius: 15; */ 146 | border-top-left-radius: 17px; 147 | border-bottom-left-radius: 17px; 148 | max-width: 500px; 149 | transition: background-color 200ms ease-in-out; 150 | width: 100%; 151 | } 152 | 153 | /* Input themes */ 154 | form input.standard-input { 155 | background-color: #181a1a; 156 | color: rgb(247, 226, 223); 157 | } 158 | 159 | 160 | form input.light-input { 161 | background-color: #AEB1B4; 162 | color: #1a150e; 163 | } 164 | 165 | form input.light-input::placeholder { 166 | color: #1a150e; 167 | opacity: 0.7; 168 | } 169 | 170 | form input.darker-input { 171 | background-color: #01394c; 172 | color: white; 173 | } 174 | 175 | form input.darker-input::placeholder { 176 | color: white; 177 | opacity: 0.7; 178 | } 179 | 180 | form input:hover { 181 | cursor: text; 182 | } 183 | 184 | form input.standard-input:hover { 185 | background-color: rgb(0, 0, 0); 186 | } 187 | 188 | form input.light-input:hover { 189 | background-color: #919699; 190 | } 191 | 192 | form input.darker-input:hover { 193 | background-color: #013141; 194 | } 195 | 196 | button { 197 | border: none; 198 | outline: none; 199 | transition: box-shadow 200ms ease, background-color 200ms ease-in-out; 200 | } 201 | 202 | button:hover { 203 | cursor: pointer; 204 | } 205 | 206 | /* Button themes */ 207 | button.standard-button { 208 | background-color: rgb(247, 226, 223); 209 | color: rgb(0, 0, 0); 210 | } 211 | 212 | button.standard-button:hover { 213 | background-color: white; 214 | box-shadow: #fff8 0 0 10px; 215 | } 216 | 217 | button.light-button { 218 | background-color: white; 219 | color: #1a150e; 220 | } 221 | 222 | button.light-button:hover { 223 | background-color: #f0f0f0; 224 | } 225 | 226 | button.darker-button { 227 | background-color: #002837; 228 | color: white; 229 | } 230 | 231 | button.darker-button:hover { 232 | background-color: #001f29; 233 | } 234 | 235 | form button { 236 | padding: 10px; 237 | font-size: 17px; 238 | border-top-right-radius: 15px; 239 | border-bottom-right-radius: 15px; 240 | min-width: 100px; 241 | } 242 | 243 | #myUnOrdList { 244 | display: flex; 245 | justify-content: center; 246 | align-items: center; 247 | max-width: 1200px; 248 | } 249 | 250 | .todo-list { 251 | min-width: 25%; 252 | overflow: hidden; 253 | /* To remove the bullets of unordered list */ 254 | list-style: none; 255 | } 256 | 257 | .todo { 258 | margin: 1rem; 259 | /* background: rgb(247, 226, 223); */ 260 | /* color: black; */ 261 | font-size: 19px; 262 | display: flex; 263 | justify-content: space-between; 264 | align-items: center; 265 | padding: 0.25em 0.5em; 266 | border-radius: 30px; 267 | transition: background-color 200ms ease-in-out; 268 | } 269 | 270 | /* Items themes */ 271 | .standard-todo { 272 | background-color: rgb(26, 27, 27); 273 | } 274 | 275 | .light-todo { 276 | background-color:#AEB1B4; 277 | } 278 | 279 | .darker-todo { 280 | background-color: #01394c; 281 | } 282 | 283 | .todo li{ 284 | padding: 7px; 285 | /* word-wrap: break-word; */ 286 | /* flex-wrap: wrap; */ 287 | font-size: 20px; 288 | flex: 1; /* To push the trash and the check button to the right */ 289 | border-radius: 30px; 290 | 291 | /* wraps the links */ 292 | overflow-wrap: anywhere; 293 | } 294 | 295 | .check-btn, .delete-btn { 296 | font-size: 19px; 297 | cursor: pointer; 298 | width: 2em; 299 | height: 2em; 300 | border-radius: 80%; 301 | margin: 0 5px; 302 | } 303 | 304 | .todo-item { 305 | padding: 0rem 0.5rem; 306 | } 307 | 308 | .fa-trash, .fa-check { 309 | pointer-events: none; 310 | } 311 | 312 | 313 | .completed { 314 | transition: 0.2s; 315 | text-decoration: line-through; 316 | opacity: 0.5; 317 | } 318 | 319 | .fall { 320 | transition: 0.5s; 321 | transform: translateY(45rem) rotateZ(45deg); 322 | opacity: 0; 323 | } 324 | 325 | /* Responsive design */ 326 | @media only screen and (max-width: 1000px) { 327 | .flexrow-container { 328 | align-self: unset; 329 | margin-right: 0; 330 | } 331 | } 332 | 333 | @media only screen and (max-width: 800px) { 334 | #header { 335 | font-size: 2rem; 336 | } 337 | 338 | #title { 339 | animation: 340 | animated-text 3s steps(16,end) 0.5s 1 normal both, 341 | animated-cursor 750ms steps(16,end) infinite; 342 | margin-bottom: 10px; 343 | margin-top: 30px; 344 | max-width: 330px; 345 | } 346 | } 347 | 348 | @media only screen and (max-width: 400px) { 349 | #header { 350 | font-size: 1.5rem; 351 | } 352 | 353 | #title { 354 | animation: 355 | animated-text 3.5s steps(16,end) 0.5s 1 normal both, 356 | animated-cursor 750ms steps(16,end) infinite; 357 | max-width: 255px; 358 | } 359 | } 360 | 361 | @media only screen and (max-width: 400px) { 362 | form { 363 | align-items: center; 364 | flex-direction: column; 365 | } 366 | 367 | form input { 368 | border-radius: 17px; 369 | } 370 | 371 | form button { 372 | border-radius: 15px; 373 | margin-top: 15px; 374 | width: 50%; 375 | } 376 | form > button.light-button { 377 | box-shadow: 0 0 5px lightgray; 378 | } 379 | } 380 | --------------------------------------------------------------------------------