Material Components Web VS stopwatch

https://github.com/firebase/firebase-ios-sdk/issues/6115

https://github.com/material-components/material-components-w...

Two examples that come to mind but there are plenty

I highly recommend https://github.com/material-components/material-components-web

Latest stable version: v12.0.0 Github stars: 15.7K Development: active Long of active development: 8 years Active maintainers: 2 Contributors: 380 Number of commits: 6835 License: MIT Used by: 6K Github projects Git repository: https://github.com/material-components/material-components-web

Material design by Google

One other thought: have you tried vanilla JS plus a widget library such as Material Design Web? It might be good to get more comfortable with vanilla JS, using fancy widgets only where needed, and then later when you consider using a framework it will be that much easier to learn and work with.

First off, for your issue, I think it's very helpful to learn design and layout from a design system like Material.

One interesting thing to note about this example is the use of @material/mdc-auto-init which will auto initialize all your material components instead of manually having to attach to each one. That should make it easier with working with the dom.

Today I've managed to scratch-build Material Design's top app bar, in particular its behaviour of sliding up/down if the user scrolls down/up, without relying on libraries like Material Components Web or Material-UI.

All of the code is public so you can take a look at how it works. I wanted to built it because I had a bad experience at an indoor track meet and I realized because there are handful of features missing from existing stopwatch applications that would make them so much more useful. I also think stopwatch applications should be affordable, if not free.