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.


(if the video glitches, refresh the page or view it in a new tab or download it)

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.


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!

Disclaimer: The opinions, views and values expressed in this post are solely my own and do not reflect the opinions, views and values of my current or past employer, any open source groups I am or have been involved with, or any other groups/organizations I am or have been associated with.