This web app is designed to help technicians test out different variables while preparing tanks without the need to manually calculate multiple hard calculations, ensuring that they know everything important about each tank. Because this software simplifies a lot of calculations, and shows it clearlly in it's UI, it significantlly reduces the chance of human error, saves technicians time, and ensures accurate tank preparation.
Showcase
How does it work?
This project is just one of many inside the company's intranet (that I've made). It's pure HTML & JS & CSS. The hardest part was figuring out the calculations (which I got a lot of help with, see Kudos section).
Two things that might have caught your eye are 1) the lines that move with height percent, 2) infill fluid level. Those fancy moving lines are
made using absolute div which's height, width, and rotation gets calculated on every "re-render" (every time variable or window size changes). Some
of you may be asking, if this results in program not working on mobile devices, the answer is NO. The program is fully responsive, which includes
the animations. The fluid infill level is made using css' :before and variables (percentage), which get
updated from JS.
Kudos
I would never be able to finish this program without the help from Mgr. Hana Sádovská. She helped me, and straight up came up with some of the calculations used! I'll be forever thankful!
I hope you enjoyed this article/blog post!
If you have any questions, problems or want to start a discussion, don't hesitate and write me an email!