The latest articles on DEV Community by Philip Zastrow (@zastrow). https://dev.to/zastrow https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F273178%2F94ab7bac-455f-4151-95bf-50a1149da953.jpeg https://dev.to/zastrow en Philip Zastrow Sun, 17 Nov 2019 01:20:43 +0000 https://dev.to/zastrow/css-calculator-15n9 https://dev.to/zastrow/css-calculator-15n9 <p>The goal of this calculator is to utilize the Custom Properties (CSS Variables) and <code>calc()</code> 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.</p> <p><iframe height="600" src="https://codepen.io/zastrow/embed/RwwqmBL?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css javascript