A small app concept idea just to sharpen some of my skills
- Todo app concept with theme toggler
Users should be able to:
- Add, remove, toggle todos and save them to local storage
- The app should detect user theme preference, apply it and save it to local storage
- Futhermore, user could change the theme and save it, no matter their system settings
- Live Site URL: View live demo
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- CSS Animations
- Local storage
- It helped me get some practice on how local storage work
- Make good use of CSS custom properties
- Understand some javascript events, such as 'animationend'
- Work with arrays and objects
- Understand some javascript prototyping concepts working with classes
- Working with DOM in javascript
- Basic state management
- Make use of CSS animations, transforms and transitions
- To step into more advanced concepts of javascript DOM manipulation before learning any framework
- Learn git! :)
- To be more organized :)
- Practice, practice, practice!
- I would like to use svg on theme toggler button for a smoother ux and to create more complex animations
- To be able to edit todos and update them in local storage. Maybe I would do this using 'contenteditable' attribute
- Add some micro interactions when some events are fired (ex: when adding or removing todos)
- On responsive mode (touch devices only), the theme toggle button register the click/tap even if it happens like 50% percent of his height under it. Futhermore, sometimes does not register it if you click on its top half.
That ugly border on the theme toggle button (it has something to do with overflow hidden ond border-radius on the button itself).Background-clip set to content-box and a small padding seems to do the trick
- Alin Mercasi