ToDo List Web App using tailwind css and vanilla JS
Design comparison
Solution retrospective
👋Hello, Frontend Mentor coding community.
👨🏼💻This is my solution for the ToDo List Web App
🛠️ Built with
- Semantic HTML5 markup
- Tailwind CSS
- Vanilla JS
🎨 Features
- 🫧 CSS Animations
- 🤹 Custom UI Design
- 🌈 Dark Theme Mode
- 🪞 Glassmorphism
📜 What I learnt?
- Event handling
- Event bubbling
- Event Delegation
- Local Storage
💡 Challenges Faced
- Event Listener Problem
- Dynamically adding list items
✨ Bonus
- Multi select checkbox(top to bottom & vice-versa)
- Click on any checkbox and hold shift key then again click on another checkbox all the list in between will be selected.
✅Update ➜ Now localStorage also supported 🆕
I'll be happy to hear any feedback and advice!🤗
Community feedback
- @NatureSon22Posted over 1 year ago
The UI is fantastic! I'm impressed by its simplicity. You might find it helpful to learn about localStorage. It allows you to store data that remains saved on the user's device only. For instance, imagine you have a task list. By employing localStorage, you can save the user's tasks, enabling them to access the list whenever they wish.
Marked as helpful2@NehalSahu8055Posted over 1 year agoThanks @NatureSon22 for your valuable comment.
- I will try to implement
localStorage
after learning the concept and update the solution soon.
1@Akinyemi4Posted about 1 year agoNice project@NehalSahu8055
I like the structure of your writeup, how were you able to add the background color beneath the headings?
1@NehalSahu8055Posted about 1 year ago- Thank you @Akinyemi4 for your kind words about the project!
- I'm glad you liked the structure of the writeup.
- To add the background color beneath the headings, I used Tailwind CSS here which inherently uses CSS.
Tailwind CSS backdrop-blur -> backdrop-filter: blur(8px); backdrop-blur-md -> backdrop-filter: blur(12px); backdrop-blur-lg -> backdrop-filter: blur(16px);
0@Akinyemi4Posted about 1 year ago@NehalSahu8055 Thanks.
I meant the headings in the writeup for the submission (Built with, features, what I learned).
They have a color beneath them, did you add it yourself?
0@NehalSahu8055Posted about 1 year ago@Akinyemi4
- Write inline snippets by surrounding code with single backticks(``) like.
- I am Highlighted ->
I am Highlighted
0 - I will try to implement
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord