A small native html dialog element just to sharpen some of my skills
- Todo app concept with theme toggler
Users should be able to:
- Open and close the dialog
- The app should autofocus first interactive element when the modal gets opened
- User should not be allowed to interact with rest of the page when modal is opened
- After the modal gets closed, the last active element should get focus
- It should be at least on button to close the modal (except the esc key)
- Live Site URL: View live demo
- Semantic HTML5 markup
- CSS Animations
- It helped me get some practice on how native dialog element works
- Make good use of CSS custom properties
- More practice with some javascript events, such as 'animationend'
- Make some practice with :not() and :has() css pseudo classes
- Make use of CSS animations, transforms and transitions
- Again, learn git! :)
- repeat(n, Be more organized) :)
- Practice, practice, practice!
- I would like to create some custom javascript events to use them on opening / closing instead of using html attributes
- Add some more advanced animations
- Trap focus inside the modal. I saw a lot of solutions out there, but I would like to came with my own
- Alin Mercasi