The goal of this calculator is to utilize the Custom Properties (CSS Variables) and calc() CSS function to run the calculation inputs. Since CSS is a one-way, reactive styling language, it isn’t aware of changes made to interactive HTML elements, in particular changes to input values. Neither can CSS capture and manipulate data. This is an area where Javascript does well, capturing an manipulating DOM elements. See the code of this pen to see how the calculator works.
Top comments (0)