Hey! 👋

Hope everyone is doing well! :)

Do you need a simple calculator to calculate your, well, calculations? Why calculate your calculations by head (eg: anyone wanna tell me what 1238120381023810293810293 ^ 120398120938120931820 is, without a calculator xD?), when you have a web calculator that can fit right in your browser?

Here's a customizable calculator made in HTML CSS JS!

For @Vandesm14's Web Calculator Jam on their server, we had a few days to create calculator! After a first calculator which had less options, I came back, improved the CSS, and added a few new settings.

How To Use 🤔

When you open up the calculator, you'll first have the default calculator. You can use the buttons for the calculation which will be showed in the black input box on top.

The C button is for clearing the input textfield, π for Pi, ^ for exponents ("to the power of"), % for modulo (returns the remainder of a division), and of course the basic operators +, -, x, and ÷, as well as the = equal sign.

You can also type in the textfield as well by clicking on it, and use your keyboard to easily calculate things. For example, you can press c to clear the screen, p for Pi and [enter] to calculate. It will also convert characters you may use to the ones making the calculator work, like converting ^ to **, = to calculate, ÷ to /, etc.

Settings ⚙️️️

By clicking the button on top, you can display the settings. In those settings, you can change the theme, the shape of the buttons, and the size of the calculator.

You can customize and pick and mix different options, like the fire theme and round buttons for C and the operators.

Themes 🟩 🟦 🟨 ⬜️ ️ 🟥

The different themes are:

Default (nice and normal 😑)

Midnight (dark and mysterious 🌑):

Neon (flashy 🤩, my least favorite theme):

Ice (cool and icy 🥶):

Fire (hot 🔥):

Border Radius ⭕️

Buttons too square-ish ⬜️ ? You can make it rounder ⚪️!

Size ↕️

And you can also change the size of the calculator:

The Code 💻

There are plenty of comments which you can

First, in index.html, there's the <details></details> and <summary></summary> tags for the dropdown settings. There's are also a gridContainer and gridChild div used for keeping the buttons in a sort of table. Those buttons are linked to JS functions that I'll explain more later. Then, there's a <form></form> which includes another table with <tr></tr> for the rows and <td></td> for the data/stuff inside.

You can see that in each row there are 4 buttons; for example in the first row at the top, we have an input which holds all the numbers and symbols which we add in the display. In the second tow, there's the C button, exponent (^) button, modulo (%) button, and divide (÷) button. On click, it adds to the display the character you just clicked.

To calculate the result, it just uses eval() (yea, not a very good approach), and you can also type in that display input as well.

In <script></script> (couldn't get it to work in the file script.js), it gets the input element, and detects when a specific key is pressed, using keyCode. For example, if the keyCode is 67 (so the key pressed is c), it will automatically click that button (using document.getElementById("cID")). Or, if the keyCode is 80 (so the key pressed is p), it will get the value from the display input, replace the p with what we want to be shown (in this case, 3.14159265359), and kind of "update" the display by setting it equal to the changed result.

Below, in <style></style> (also couldn't get it to work in the file style.css), there's ths styles that will be used when certain buttons are clicked, like .radius that changes the border-radius of the calculator buttons, or .size that increases the size of the calculator, etc.

In script.js, first there's some functions which, using CSS variables toggle the theme. Below, more functions to change the radius; they take the elements who have a specific class, and with a for loop toggle the CSS (in index.html) for it. And lastly there's the function that changes the size of the calculator; it gets each button on the calculator's element and toggles the respective size.

At last, in the style.css file, there's :root for the CSS variables with each different theme. There's all the style for the different buttons and tags.

Closing 🚪

Well, that's about all! Please comment what you think about it, suggestions, questions, etc.

Thank you to @19wintersp, @CoolCoderSJ, and @k9chelsea2 for help! :D
Have fun calculating things!

Have an awesome day!

Bye! 👋

pls spam the reactions here xD