I'm developing a dashboard for an electric car that we're building in a college project. This dashboard will be a web page that basically displays some information about the car, such as osition, battery temperature, instantaneous power, speed, etc...
But I developed each part of this dashboard separately and now I'm wondering how to to put it all together. Each application has its own HTML, CSS and Javascript and I don't know what is recommended to do in this scenario
Here it follows each done application:
Position: https://www.telemetria.milhagemufmg.com/gps/
Battery temperature: https://www.telemetria.milhagemufmg.com/lm35/
Instantaneous power: https://www.telemetria.milhagemufmg.com/ina226/
Speed: https://www.telemetria.milhagemufmg.com/encoder/
The source can be found here: https://github.com/Milhagem?tab=repositories
I also have a draft of how I imagine the dashboard:
I started using pure HTML and CSS to make a grid where I want each container, but I don't see how to apply code reuse that way.
You are in the right path towards your project because modularizing your app will make your life easier especially when your project will start to grow.
The ideal way to create Modularized apps would be to use Frontend Technologies like VueJS or ReactJS. I would really suggest you give couple of hours learning these, which are extremely beginner friendly ( especially VueJS ).
But for some reason you want to go vanilla, try reading through this article might help you.
https://blog.superflows.dev/how-to-implement-a-single-page-modular-app-architecture-using-pure-html-css-javascript
Thanks, Hope it helps