๐งฎ Calculator!
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! ๐
- Noice!
- TheDevBird's replit username is Vandesm14, not TheDevBird...
@FlaminHotValdez thanks! Oh yes, on discord they are called TheDevBird lol! :)
Cool!
thanks! :) @mylifeiscrap
@Bookie0 's CSS is actually really good xD, nice calculator (^_โ)โโ
@RayhanADev Thank you! I'm glad I'm actually good at CSS lol :)
@Bookie0 lol :)
@RayhanADev (^โฟ^)
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
who made this. i prefer it better lol . @LegendaryWolf
wdym! whose is better in css, mine or @bookie0's
@LegendaryWolf pretty cool! :)
@LegendaryWolf that calculator has bugs. guess they good with css, bad with programming
@OldWizard209 lmao yea that's Apple calculator icon.
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.
Ah yes thanks! @Whippingdot Also yea you have to press for example 1 theme, then press it again to turn it off =/
This is really nice!
@DynamicSquid Thank you! :)
nice job!
@Bunnytoes thank you! :)
idea: turn this into a chrome extension.
@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
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/
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..
@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.
yo cool!
@JWZ6 Thanks! :)
@Bookie0 no prob btw ur so close to 6000 updoots go you!
@JWZ6 haha thanks! :)
@Bookie0 yay