This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The overall project is so nice and at some point it feels a little bit tougher but some how I finished this challenge and this is my solution to the challenge. Thanks for checking my project hope you like it. Read this file to know about the technologgies I used,challenges I faced,live-site url and etc.,
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Add new todos to the list
- Mark todos as complete
- Delete todos from the list
- Filter by all/active/complete todos
- Clear all completed todos
- Toggle light and dark mode
- Bonus: Drag and drop to reorder items on the list
- Solution URL: (https://github.com/sivakumarkatari2020/todo-list-app)
- Live Site URL: (https://mytodo-list01.netlify.app/)
For implementing this todo-list first I designed it on my figma then I started writing CSS and HTML to it and them I started writing scripts. I used sortable CDN to sort list elements and I wrote many functions for each task.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Sortable CDN - JS library
I got a break a few days because I have a problem with Drag and Drop sorting and later I found a solution to it and that is Sortable CDN.
- Frontend Mentor - https://www.frontendmentor.io/profile/sivakumarkatari2020
- LinkedIn - https://www.linkedin.com/in/siva-kumar-katari-25519919a/
- Instagram - https://www.instagram.com/web_surfers_/
- Github - https://github.com/sivakumarkatari2020/
Finally I want to say thanks to my developer friends who helped me in making this. And thanks for your consideration!