Share your repls and programming experiences

← Back to all posts
🧮 Calculator!
Bookie0 (5955)

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

Comments
hotnewtop
kwe (19)

a calculator with pi finnally!

Jakman (471)

I'm proud of you bookie. You have ascended.

Bookie0 (5955)

@Jakman Woah, thanks lol! :D Long time no see!

Jakman (471)

@Bookie0 im mostly a lurker now. I started a project today but it isnt on your skill level. Ill let you know when im finished

LeoXu2 (32)

ERROR FOUND 1 / 0 IS NOT INFINITY

RayhanADev (1955)

@Bookie0 's CSS is actually really good xD, nice calculator (^_−)−☆

Bookie0 (5955)

@RayhanADev Thank you! I'm glad I'm actually good at CSS lol :)

LegendaryWolf (627)

https://captain-calc.captincoolz.repl.co
Whose Css is better, tell us! ik @Bookie0's calc is better but here It is the fight of CSS

OldWizard209 (1091)

who made this. i prefer it better lol . @LegendaryWolf

LegendaryWolf (627)

wdym! whose is better in css, mine or @bookie0's

OldWizard209 (1091)

YO:

Inspired by apple!!!!!

Dude i m in already i didnt even use try it yet

Bookie0 (5955)

@OldWizard209 lmao yea that's Apple calculator icon.

JWZ6 (176)

@Bookie0 no prob btw ur so close to 6000 updoots go you!

Whippingdot (552)

I DO SEE DAT LINK BOI

Also i was gonna say this thing is awesome but the settings are broken. just press the first theme, then the second, then the third, then the fourth, then the first, and you will see what I mean. Also where is the default theme? I can only see four theme buttons.

Bookie0 (5955)

Ah yes thanks! @Whippingdot Also yea you have to press for example 1 theme, then press it again to turn it off =/

FlaminHotValdez (433)
  1. Noice!
  2. TheDevBird's replit username is Vandesm14, not TheDevBird...
Bookie0 (5955)

@FlaminHotValdez thanks! Oh yes, on discord they are called TheDevBird lol! :)

HarperframeInc (446)

idea: turn this into a chrome extension.

Bookie0 (5955)

@HarperframeInc hmm lol idk if i would be able to do that lol, and I heard you had to pay $5. thanks for the idea tho! :D

ChopSueyMaster (5)

Hey, this is great, but when you press enter, the last instance runs like if the last thing i pressed was 2, and i press enter, 2 would come again on the screen , maybe changes that to bring the answer?

also, if someone enters something invalid, print an error and then the calculator would look perfect. But overall great job..

Bookie0 (5955)

@ChopSueyMaster Thanks for the feedback! :) The reason it doesn't print an error is because it uses eval (yea not really good lol) so that's why it just outputs invalid.