Build this JS calculator in 15 minutes! 🖩

[@BroCodez]

IMPORTANT NOTE: eval() allows you to execute a string of code as if it were actual JavaScript code.
While it is a useful tool, it is a security risk. I would recommend using eval() ONLY for learning purposes and not any actual production code.
// CALCULATOR PROGRAM
const display = document.getElementById("display");
function appendToDisplay(input){
display.value += input;
}
function clearDisplay(){
display.value = "";
}
function calculate(){
try{
display.value = eval(display.value);
}
catch(error){
display.value = "Error";
}
}


Document




+
7
8
9
-
4
5
6
*
1
2
3
/
0
.
=
C



body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: hsl(0, 0%, 95%);
}
#calculator{
font-family: Arial, sans-serif;
background-color: hsl(0, 0%, 15%);
border-radius: 15px;
max-width: 500px;
overflow: hidden;
}
#display{
width: 100%;
padding: 20px;
font-size: 5rem;
text-align: left;
border: none;
background-color: hsl(0, 0%, 20%);
color: white;
}
#keys{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 25px;
}
button{
width: 100px;
height: 100px;
border-radius: 50px;
border: none;
background-color: hsl(0, 0%, 30%);
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
}
button:hover{
background-color: hsl(0, 0%, 40%);
}
button:active{
background-color: hsl(0, 0%, 50%);
}
.operator-btn{
background-color: hsl(35, 100%, 55%);
}
.operator-btn:hover{
background-color: hsl(35, 100%, 65%);
}
.operator-btn:active{
background-color: hsl(35, 100%, 75%);
}

[@skappy2000]

Hey bro code big fan here
I was thinking will you make website projects using html, css and js?
It will help a lot with people understanding more better in that way
Portfolio-worthy projects

[@mirmumit3888]

Can u plz tell me, how to change the only color of the text "Error" on the calculator display?

[@skappy2000]

​@@mirmumit3888
Use the display.style.color property in script.js file
function calculate(){
try{
display.value = eval(display.value);
display.style.color = 'white'; // Set text color to white after successful calculation
}
catch(error){
display.value = "Error";
display.style.color = 'red'; // Set text color to red for error message
}
}

[@SiiamW]

Hey clicking ''." more than once is an error too. this program is slightly wreaked.

[@catempirecentral]

@@SiiamW well obviously, because 2..4 is not a valid float or integer

[@alvinderama3196]

Watching something being created from scratch is pretty entertaining and educational.

[@realgoatzy]

don't you actually follow it or something?😂

[@vc6218]

one of the few videos on here that breaks it down simply. I already understood a bit of html and css - javascript hasn't made that much sense to me until now. Thank you!

[@Podlols]

sooo can you understand js now ??

[@realgoatzy]

@@Podlols soon.

[@Podlols]

@@realgoatzy now I can understand js

[@realgoatzy]

@@Podlols nice btw I just started learning (like almost a week ago) myself

[@syroxdxd]

I just have to say that you are amazing. I had an introduction class in java and I missed every lecture. I whatched the first 5 hours of your 12hr java course and I passed the exam. You are an amazing teacher. Better than the ones I have at univerity :)

[@loosabway3400]

I'm a teacher and found this to be well-paced, explained in more detail where necessary without getting bogged down in stuff students can research for themselves, and fun.
Well done.

[@doronfeldman5152]

You have the best programming channel, I learn html, css, javascript and python in your channel

[@SinmisolaJohnson]

That is crazy. Hope you practice daily.

[@f4sma]

Your tone of the voice, the way you explain what you are doing.. it's perfect. Subbed!

[@Prakash-i7y]

tk

[@nergizken]

That was easily the most clear-cut project-guide I've come across. Though building a calc isn't rocket science but due to your explanation it was even more understandable! Thank you

[@watchdoggie8145]

Super thankful for the awesome instructions! keep up the good work.

[@arjunpailoor4559]

Thanks for this. a backspace button could be added,

[@dru_king7758]

I'm here in 2025 😄 , I love the way you teach BroCode. The video quality is clear, very clear and you teach very well such that beginners can understand.I hope you release more coding content of HTML, CSS, JS and other programming languages.

[@chijiokeonyeagba7593]

finding it difficult to run the java after the display,clear and calculate functions.Any help?

[@crazygnasher9527]

@@chijiokeonyeagba7593 i copied everything to a T and my buttons wont work everything else works fine

[@AlexAraujo-o7]

Bro... You're simply the best teacher.... I was struggling with that, trying to do by myself, each function to do each calculation, and i just couldn't do it, then i just saw your video, and this eval() function and it just works, ty so much!

[@EthN_]

This was a great intro to JavaScript. I made several mistakes along the way (mostly syntax) and got to debug it alone after several minutes of stressing. Great learning experience, thanks.

[@pope1089]

Just started coding, That video helped alot. Straight to the point. I,ll have to check your other videos out before i start asking questions about eval() ans security risks. Thanks

[@yateen-hi9er]

share some resorses with i am a beginner too

[@ahmed-t4m8kx92]

​@@yateen-hi9er Sololearn or mimo for course(I'm not sure about mimo and sololearn is more popular, I use it too.) W3schools website, freecodecamp UA-cam channel

[@QxTrunkZ-fr7fg]

@@yateen-hi9er just get used to it,
dont be shy and start ur own projects :D

[@petersagan370]

You shouldve added a function that prevents entry of another decimal point once it has been added to the display once.
For example, once you enter 3.14, you cant add another decimal point until you enter an operator such that (3.14159.3123) wont be possible to enter in the display

[@Nanashi_29]

Best channel about programming

[@RajagopallanV]

After seeing other videos of writing the code for Calculator app, I find yours the best and easy to understand and needs less lines of code. Thank you very much for uploading this.

[@sogwafl]

I have a terrible Java Professor, cant retain an oz of her teaching. So I exclusively built my own syllabus off your java topic vids and passed. You are doing gods work and are great at helping my dumbass retain all this info.

[@ent.8979]

youre not a dumbass, some teachers just don't know how to teach and make the subject impossible to understand. And that's mostly college professor. That's why learning from the internet is becoming more and more valid

[@russellhan3534]

@@ent.8979facts, attending college literally for the degree

[@lintee_12]

@@ent.8979 i mean its probably because he was getting taught real programming fundamentals... he didn't even know that this was javascript not java

[@shush5878]

bros prof is so bad he thought this was Java

[@DanielBrownsan]

Me: (Imagining 15-20 lines of code)
Lesson: "One line using eval does it."
I would be curious to see this done without eval. This feels like one of those, "Well, you CAN do it that way, but you shouldn't" situations. Great stuff!

[@amineaheddare4918]

i did it and as a beginner it was a hell 😅

[@gopal2919]

To complete evaluation,make sure how the regular calculator works and write js functions according to different situations which improves thinking ability

[@kelvinwilliams2908]

I got this to work -but it took me a lot longer than 15 mins. However, I was very pleased with it. Well done - good video.

[@reptilianis577]

Another useful video! I am waiting for more ;)

[@Prakash-i7y]

supper

[@He_Roll2024]

Few codes but precised. I'm amazed bro.

[@kasmkurtay5095]

I watched this video 4 times in a row , and i try to make the perfect exam as you did..
Finally i did my first JavaScript Project.. ThankYou BrocodeZ

[@miladevs]

Awesome video! I love the clear explanations and the styling tips. Incorporating functional programming principles, like using pure functions, could further enhance the calculator’s logic. It would be interesting to see how this approach can make the code more concise and testable. Keep up the great work! 👍

[@VictorLopezSoftware]

If anyone is having issues with their javascript not working make sure *the script runs before the DOM is fully loaded* - In other words if you are pressing the buttons but nothing loads:
Add 'defer' attribute to your script tag in your .html file ().
This attribute allows the elimination of parser-blocking javascript, where the browser would have to load and evaluate scripts before continuing to parse. This fixed it for me.

[@QxTrunkZ-fr7fg]

underrated comment

[@Andrew-y7l]

I think this was the easiest calculator build and explanation from any other youtube channel

[@samueldayo9261]

Was about to comment this yesterday it is the best

[@bama2619]

never thought it could be that easy, thank you for the explanation

[@Azufunnycomedy]

one of the best designs i have ever seen

[@petersimthobele]

I learnt a lot from this video in 15 min 👏👌

[@sovereignlivingsoul]

i think that is the simplest calculator program i have seen so far, i added the Modulus Operator, thanks for sharing and God Bless

[@omniman8912]

Wouldn't even imagine if making calculator was that easy. Thank you

[@levon9]

Wow .. FANTASTIC - thank you so much for this. Going to look for other videos like this from you. (also subscribed :)

[@ritechaserious]

sir i loved it. It helped a lot in confidence building as a beginner

[@mohamedahsan4710]

Bro deserves recognition!!!!

[@0cactus]

Thanks, I know a little JavaScript, but unable to build beautiful design in html with css. Now I understood some interesting conceptions about css styling and feel ready to learn css.

[@armandopena5508]

I was hopping to see how you made the actual calculation taking into account that eval is not safe, it would be awesome if you could share how to make a function that at least calculates some basic mathematical operations since this is a very basic project that many people who are starting in programming make, usually without adding the funcitonality, when parsing the math operation is the most important thing of this project!. Great content!

[@shjsbsbs7186]

Agree, eval is not safe for newbie

[@larslover6559]

Theres several nice tutorial on python to make calculator without the eval function. There you really see it hard coded from scractch!

[@habibousy8723]

GREAT I'm senegalese and my english is not perfect but I learn a lot because of you😎😎😎. My javascript futur will be bright with you😎😎

[@geoffreyjbrown]

Very helpful showing the operation of html, javascript and css.

[@piotrmazgaj]

This is my seal. I have watched the entire video, understood it, and I can explain it in my own words, thus I have gained knowledge. This is my seal.

[@bennymeister]

this is my seal 🦭

[@RashmiPai-ru4br]

Very useful for my miniproject🥰🙏

[@zxot14]

I don't understand code that well but something about his videos is just so therapeutic.

[@Miko-kc9td]

Awesome, clear instructions and straigth to the point.

[@muhammet_05]

Thanks for those teaching video. i love it ❤

[@Zahraalishahan]

woow! easiest way to create a calculator..i did it because ov u..thankuu so much:)

[@Econ-man2060]

Cool rudimentary stuff... Is there where you can add a little bit of advance calculator

[@artisticmohan5544]

Thanks Mate. Really helped with my project.

[@Alauddindipu]

Excellent.
In short, you did a lot!

[@naglakandeel3152]

best teacher ever continue ❤

[@AnointingOlabode]

Nice one bro code
it`s so easy to grab from you
Thank you 🥳🤩

[@hurricanos13]

One of the best coding channel aside with the legendary new boston Bucky Roberts. but i think this channel stuff is also hated by youtube algorithms

[@hariharasudhans7828]

Definitely Impressive🤩🤩

[@aminahshentour8002]

Never understood JS as much as i did now. I am a loyal fan. Thank you

[@abhisasmal271]

U can also make it a typable one by removing the 'readonly'. Its easier then just clicking buttons

[@Fas832-f8r]

great work 👍

[@JibinSajuJoseph]

Awesome!
I noticed when display.value is “Error” then input is appended to it (e.g., “Error123”).
Fix:
function appendToDisplay(input) {
if (display.value == "Error") {
clearDisplay();
display.value += input;
} else {
display.value += input;
}
}

[@12karmel12]

thank you for making daily javascript videos

[@esatkurtul451]

you can use
button:nth-child(4n-3) {
background-color: hsl(39, 100%, 50%);
}
instead of .operator-btn class

[@SamialFardin]

Thanks you so much bro ❤❤
Keep it DOING ❤❤❤❤

[@niyonkuruinnocent17]

You're the best teacher ❤

[@haytham30000]

thanks man😀😃

[@elisabethkolar9364]

super cool, thank's a lot

[@TheRealKingofCubing]

This is teaching me so much amazing video

[@mohsenvanc]

that is amazing, thank you

[@Aim00108]

thank you bro for introducing me with "value" method

[@PrimordialzBS]

11months later and still helped 👍. but the js doesn't work and i've re written it 4 times 😢

[@jacksondidas9403]

Thank you very much, I understand and it helped me a lot

[@volinh6386]

your style' css so good , it very butufu

[@kingshahzad78]

Outstanding❤

[@Newbtube92]

Great tutorial!

[@Sarat0101]

Thank youu❤❤

[@venug2617]

Beautiful presentation.....

[@XilqaXilqa]

😂damm that's easy and 😎 cool it takes longer to style 😂 I never used eval in any project before you rock bro...🎉

[@Vinayadari]

function clearonebit() {
display.value = display.value.slice(0, -1);
} we can add new button to remove onebit

[@hunters1212]

Really nice explanation

[@samikshakittur1078]

Thank you so much!!

[@ChristianChinakuezeofficial]

Nice tutorial sir

[@jiyoungkim9258]

you literally give me confidence

[@pratyushmishra77]

Thanks bro 🙌

[@Oh_Sayang]

Now my iPad can finally have a calculator app lol

[@BaljinderKaur-hd4dj]

really helpful. Thanks a lot

[@PyTechUz]

bro thank you 👍

[@namanthacker]

Very nice video
Thanks!!

[@khushantwankhede8311]

thankyou for such a useful content.

[@cheaterlp23]

My version didn't work, so I searched for a while.
Guess what the error was.
Correct:
My version:
=_=
Anyway, really useful video, learned a lot.

[@hunin27]

Wow, then what we are doing is pretty much just styling. I had no idea javascript had a "built-in" calculator inside of a function!!

[@BroCodez]

eval() runs a JS expression dynamically at runtime. It can be a security risk tho

[@hunin27]

oh, well im pretty sure its not that hard to make a calculator without using it. i mean eval is a function and we could just recreate it@@BroCodez

[@QuantumCanvas07]

You can have 100 years of JS experience but still be encountering something damn new 💀 Just a beauty of coding

[@bhaveshjadav804]

@@BroCodez hey bro there is a error in this code when i click any mathematical sign(+,-,*,/) more that 2 time it display on the screen . for example if i click + button 2 times then it display 2 time like this (2++2) ,please solve this error

[@daeltam]

@@bhaveshjadav804 That's not an error in the way that you can print whatever you want on the display there is no limit, same thing for . we can write 3.1415.926 which is not correct. It would need some checking that i don't know how to do.

[@sandippandey9181]

Pretty Awesome !done

[@wonders8410]

Hey just want to let you know that there is an error in the code that you have presented if you do 7+ =you know it equals an error but that error is a text and you can do something like Error + 7 = FUNCTION ERROR() {[NATIVE CODE]}

[@kenmakozume5393]

thank you so much.

[@neerajmeka25]

Great Project had fun to build this project, u got a new sub will check your more videos

[@paraglide01]

Wauw, thanks man this is great. Making a calculator creates so many ideas for apps that need input and calculating.

[@Zaynahazlanworld]

thanku .i hv done some typo mistake ,but handle it through chatgpt.thanks for the code

[@MufareezMMM]

best ... one . thank you

[@mmafights__]

soooooo useful thankssssss❤❤

[@shrawanigulkari4739]

okay...video is amazing, no doubt. Umm but anybody else who's calculator looked different from what was shown??

[@chillguy_uz]

So educational video ever seen

[@coderprakash]

Hi please make a complete tutorial on typescript 🙏 i followed ur javascript and react thanks alot ❤️🔥 love from India, I know Frontend development because of u please consider my request and make typescript full tutorial

[@MariaMutima-s6c]

Very much for every developer

[@fuzakhozs7783]

Impressive❤

[@siampro3891]

BEST👍👍👍👍

[@kursatepik5197]

you are a hero brother