Skip to content
โ† Back to Community
๐Ÿงฎ Calculator!
Profile icon
Bookie0

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!

Screen Shot 2021-04-02 at 1.15.43 PM

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.

Screen Shot 2021-04-02 at 2.58.16 PM

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.

Screen Shot 2021-04-02 at 2.57.24 PM


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.

Screen Shot 2021-04-02 at 3.01.12 PM

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 ๐Ÿ˜‘)

Screen Shot 2021-04-02 at 4.37.51 PM

Midnight (dark and mysterious ๐ŸŒ‘):

Screen Shot 2021-04-02 at 4.25.45 PM

Neon (flashy ๐Ÿคฉ, my least favorite theme):

Screen Shot 2021-04-02 at 4.26.23 PM

Ice (cool and icy ๐Ÿฅถ):

Screen Shot 2021-04-02 at 4.25.59 PM

Fire (hot ๐Ÿ”ฅ):

Screen Shot 2021-04-02 at 4.25.21 PM

Border Radius โญ•๏ธ

Buttons too square-ish โฌœ๏ธ ? You can make it rounder โšช๏ธ!

Size โ†•๏ธ

And you can also change the size of the calculator:

Screen Shot 2021-04-02 at 4.27.18 PM


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! ๐Ÿ‘‹

Screen Shot 2021-04-02 at 2.57.24 PM

pls spam the reactions here xD

Voters
Profile icon
unicatunicorn
Profile icon
mylifeiscrap
Profile icon
FallenAngel6
Profile icon
IsaiahHawkes
Profile icon
BananaJellyfish
Profile icon
SleepySid
Profile icon
IGamer123
Profile icon
SilvermoonCat
Profile icon
Jakman
Profile icon
IntellectualGuy
Comments
hotnewtop
Profile icon
JWZ6

yo cool!

Profile icon
Bookie0

@JWZ6 Thanks! :)

Profile icon
JWZ6

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

Profile icon
Bookie0

@JWZ6 haha thanks! :)

Profile icon
JWZ6
Profile icon
FlaminHotValdez
  1. Noice!
  2. TheDevBird's replit username is Vandesm14, not TheDevBird...
Profile icon
Bookie0

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

Profile icon
kwe

a calculator with pi finnally!

Profile icon
Bookie0

@kwe haha thanks! :)

Profile icon
mylifeiscrap

Cool!

Profile icon
Bookie0

thanks! :) @mylifeiscrap

Profile icon
Jakman

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

Profile icon
Bookie0

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

Profile icon
Jakman

@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

Profile icon
Bookie0

@Jakman Ah okay lol :)

Profile icon
LeoXu2

ERROR FOUND 1 / 0 IS NOT INFINITY

image

image

Profile icon
Bookie0

@LeoXu2 lmfao

Profile icon
RayhanADev

@Bookie0 's CSS is actually really good xD, nice calculator (^_โˆ’)โˆ’โ˜†

Profile icon
Bookie0

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

Profile icon
RayhanADev

@Bookie0 lol :)

Profile icon
Bookie0

@RayhanADev (^โ€ฟ^)

Profile icon
LegendaryWolf

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

Profile icon
OldWizard209

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

Profile icon
LegendaryWolf

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

Profile icon
Bookie0

@LegendaryWolf pretty cool! :)

Profile icon
drew99kt

@LegendaryWolf that calculator has bugs. guess they good with css, bad with programming

Profile icon
OldWizard209

YO:

image

Inspired by apple!!!!!

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

Profile icon
Bookie0

@OldWizard209 lmao yea that's Apple calculator icon.

Profile icon
Whippingdot

image

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.

Profile icon
Bookie0

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

Profile icon
DynamicSquid

This is really nice!

Profile icon
Bookie0

@DynamicSquid Thank you! :)

Profile icon
Bunnytoes

nice job!

Profile icon
Bookie0

@Bunnytoes thank you! :)

Profile icon
HarperframeInc

idea: turn this into a chrome extension.

Profile icon
Bookie0

@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

Profile icon
ch1ck3n

image

Profile icon
Bookie0
Profile icon
ch1ck3n
Profile icon
Bookie0
Profile icon
Bookie0

OHHHH got it ha ...ha...ha @ch1ck3n

Profile icon
ch1ck3n

@Bookie0 it's coming up

Profile icon
Bookie0
Profile icon
VulcanWM

Nice!

Profile icon
Bookie0

@VulcanWM thanks! :D

Profile icon
ljglmail

I was trying to buy a $4 calculator on karmashares.com and the first thing I notice is that the calculator has some bugs. I'm not a programmer, but I know a bit about css so I decided to take a look at it.

Took me a while to figure out what was going on with the buttons and why they weren't doing anything, but it turns out there's an if statement wrong in the css on the page.

Instead of checking if class="bw" was true or false, it was checking if class="bw" was undefined (which can happen when you're using javascript).

https://www.omegle.fyi/
https://www.chatrandom.one/
https://www.bazoocam.fyi/

Profile icon
ChopSueyMaster

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..

Profile icon
Bookie0

@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.