Build this JS calculator in 15 minutes! 🖩

#JavaScript #tutorial #course
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.
00:00:00 HTML
00:03:08 CSS
00:11:21 JavaScript
This is a JavaScript project program for beginners where we will build a functioning calculator. Impress your friends!

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

[@oli3641]

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

[@watchdoggie8145]

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

[@reptilianis577]

Another useful video! I am waiting for more ;)

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

[@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!

[@doronfeldman5152]

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

[@f4sma]

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

[@Nanashi_29]

Best channel about programming

[@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 :)

[@He_Roll2024]

Few codes but precised. I'm amazed bro.

[@muhammet_05]

Thanks for those teaching video. i love it ❤

[@mohsenvanc]

that is amazing, thank you

[@khushantwankhede8311]

thankyou for such a useful content.

[@niyonkuruinnocent17]

You're the best teacher ❤

[@12karmel12]

thank you for making daily javascript videos

[@jiyoungkim9258]

you literally give me confidence

[@volinh6386]

your style' css so good , it very butufu

[@Inke7]

Thank you kind sir!

[@naglakandeel3152]

best teacher ever continue ❤

[@petersimthobele]

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

[@nazmussakib9346]

Thank you...❤

[@mmafights__]

soooooo useful thankssssss❤❤

[@hunin27]

Thanks!!!

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

[@michaelogbormeh7965]

Thank you 🙏

[@manueldiegoalexander3879]

Thanks this is crazy,i like it bro.

[@elisabethkolar9364]

super cool, thank's a lot

[@TheRealKingofCubing]

This is teaching me so much amazing video

[@namanthacker]

Very nice video Thanks!!

[@CharukaRanathunga-bi6fy]

thank you 👍

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

[@ZXOT14]

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

[@siampro3891]

BEST👍👍👍👍

[@kursatepik5197]

you are a hero brother

[@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!

[@user-xj7te3qs8u]

Great 😊 😊😊

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

[@user-un9fs3oj5r]

thenkyou very much

[@omidrezafeizi3530]

very informative

[@neerajmeka25]

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

[@StephenColeman-yj5vo]

Amazing

[@PurplexSKyo]

Hello Bro Code I love your videos, I try to learn C by looking your videos and its amazing I know its a litter bit late for tell you this but can you please do a tutorial learn Lua please if its don't mind you Thanks you for having the time to look the lines and keep continute I love your videos👍🏾👍🏾

[@mcpigeon6908]

yes I'd love to learn Lua too :)

[@berbahc]

so cool thanks bro

[@nurlandigital]

So educational video ever seen

[@hesa4196]

Nice!

[@technicalresi5451]

Very nice bro 😊❤

[@godcomplex1929]

Sir, I think we are due a database tutorial. I was tryna learn on MariaDB since it was free but couldn't get anywhere without your detailed guide.

[@danielbeeber5587]

Awesome

[@slender2128]

Good Video ❤🎉

[@n.n.g2230]

yo bro code, thanks as always for a great video and motivation to study!

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

[@lelin4732]

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

[@RahulBhatia-py1iv]

U are legend 😅mann

[@user-id5vh7rq3j]

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

[@leobertobittencourtfilho3036]

I wish (and I'm trying to) that I could code at this level. Honestly!

[@nurialsaeed5769]

great

[@user-ej4vt2vg4o]

you know that your the best yeah

[@zahersankari7342]

Why so simple?!? Thanks!

[@paraglide01]

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

[@kapteinoliver]

👏👏👏👏

[@subhro3044]

Yo thanks for the video tutorial as someone who's starting out with coding HTML this was super fun to do as a project Just one question though when I tried to replicate it and open the index.html file as *Open with Live Server* I'm just getting the basic buttons that was done at the start Am I opening/running it the wrong way?

[@Kokoclouds]

same here for me, i dunno what i'm doing wrong either. checked all the line, everything matches but still not getting the round buttons

[@cristiandalessandro599]

Are all these videos going to be part of an updated full course?

[@FijiAura_GD]

Hi Bro Code, can you do a Lua full course?

[@mhd_Code]

❤

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

[@Oh_Sayang]

Now my iPad can finally have a calculator app lol

[@paulpaul6042]

can we do a bubble we can write on it and with a option to add other or delete it? and see it on a 3 D?

[@Aliahmadi-fn5of]

Nice 🤌 for you

[@Covyessien]

❤❤❤❤❤❤

[@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]}

[@_rezalet_kanal_]

entertaining af

[@moughkeracaleb3837]

welldone @BroCode same is not working for me......thanks for the good work.

[@darkslopegaming6855]

Do you have a patreon or something? I would love to support you!

[@strategistaow3520]

Calculator is easy thing Can you make 3d space like in games?

[@thegoldgamer6339]

bro knows 4 programming languages bros a god

[@hada31]

function calculate() { try { display.value = math.evaluate(display.value); } catch (error) { display.value = "Error"; } }

[@pope1089]

How would you bind the calculator to your pc number pad.

[@crackllitos1577]

This video was very helpful, but is there a way were I can make the calculator into mobile mode?

[@clementsim7227]

Hi! I have a question! Why is it that the appendToDisplay function only works when I remove type="module" within my script tags in the HTML document?

[@user-yl2lp9ey1x]

thank you for this video....mine is showing "ncaught ReferenceError: appendToDisplay is not defined"

[@MinChen-bg6dc]

Giga can teach programming

[@navabharathi810]

Bro 😈😈 you are a gem

[@elitetatsuya]

iPadOS developers should watch this

[@mirmumit3888]

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

[@pastori2672]

how would you implement stuff like factorial and log etc.. ?

[@thecoolnewsguy]

For log, use the built-in Math object, for factorial, look for an algorithm on the internet or a library

[@capslock3250]

Full Kotlin course please 🙏

[@jamesdillard4114]

what could we use instead of eval?

[@delhiwarriorgaming2882]

sir, i am also practicing that code but I have a problem with the clear button, when I am clicking it nothing happens.....pls solve it..

[@Aislx]

Video on type script pls

[@theuser810]

How did you get the setup where your website autosyncs with the code? That seems like a lifesaver!

[@danarseptiyanto4066]

It's "live server" extension on VS Code, it auto refresh the browser whenever you save, very useful

[@theuser810]

@@danarseptiyanto4066 Thanks

[@shauryacode76]

Can you please tell me why my clear display isn’t working

[@tjarrows14]

Just curious how you get your project to update in ream time? I have to stop it and rerun it every time to check out a new change I made in the css. I use visual code studio as well. Thank you.

[@reambillorussels.4641]

Use live server extension on vs code

[@tjarrows14]

@@reambillorussels.4641 omg thank you

[@mohammedAli7106]

Bro next video do chess game in java

[@fergthediddly3238]

How did you open another tab i.e html tab???

[@sohamghosh533]

never expected js to have something called eval 😂😂😂. I was just wondering from the beginning how we will calculate the expression in string format

[@user-bn4yx4nw9r]

Lol i just wrote the exact codes while watching your video ,i got the exact output ,yes but the problem is that , when i click on a button it doesnt not shows the number from the top left side ,its not even showing 😂

[@Chandraprakash-kx4ic]

Redux or redux-toolkit. Can you please do it Brother 🙏

[@WickedDaniel]

What's the next logical step to take once you can do this from scratch?

[@monmaka]

i wish i had found this video like 5-6 months ago

[@zzumiittow]

In my case, the JavaScript code only works if I declare the const “display” inside the appendToDisplay function, why is that? I tried using the exact same code and it didn’t work, that doesn’t make sense.