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.

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

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

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

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

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

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

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

[@f4sma]

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

[@Prakash-i7y]

tk

[@watchdoggie8145]

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

[@arjunpailoor4559]

Thanks for this. a backspace button could be added,

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

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

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

[@Hub_Comments]

​@@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 KZbin channel

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

[@He_Roll2024]

Few codes but precised. I'm amazed bro.

[@Azufunnycomedy]

one of the best designs i have ever seen

[@bama2619]

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

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

[@petersimthobele]

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

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

[@reptilianis577]

Another useful video! I am waiting for more ;)

[@Prakash-i7y]

supper

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

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

[@ritechaserious]

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

[@Miko-kc9td]

Awesome, clear instructions and straigth to the point.

[@esatkurtul451]

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

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

[@zxot14]

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

[@muhammet_05]

Thanks for those teaching video. i love it ❤

[@mohamedahsan4710]

Bro deserves recognition!!!!

[@artisticmohan5544]

Thanks Mate. Really helped with my project.

[@Alauddindipu]

Excellent. In short, you did a lot!

[@abhisasmal271]

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

[@Zahraalishahan]

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

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

[@levon9]

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

[@naglakandeel3152]

best teacher ever continue ❤

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

[@Aim00108]

thank you bro for introducing me with "value" method

[@elitetatsuya]

iPadOS developers should watch this

[@jacksondidas9403]

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

[@SamialFardin]

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

[@niyonkuruinnocent17]

You're the best teacher ❤

[@TheRealKingofCubing]

This is teaching me so much amazing video

[@hariharasudhans7828]

Definitely Impressive🤩🤩

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

[@jiyoungkim9258]

you literally give me confidence

[@12karmel12]

thank you for making daily javascript videos

[@aminahshentour8002]

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

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

[@qwi-yu4xf]

В августе 2023 я смотрел его видео по html и css за 7 часов вроде. Я его просмотрел за 7 дней по 1.30 если не ошибаюсь. И 8 июня я смотрю его же видео, но про то 'как сделать калькулятор на js'))

[@MariaMutima-s6c]

Very much for every developer

[@Zaynahazlanworld]

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

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

[@Oh_Sayang]

Now my iPad can finally have a calculator app lol

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

[@elisabethkolar9364]

super cool, thank's a lot

[@volinh6386]

your style' css so good , it very butufu

[@buriedbones-nh9xr]

"Every programmer should code his own calculator, at least a dozen times" - Inventor of C++, Bjarne Stroustrup

[@neerajmeka25]

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

[@mohsenvanc]

that is amazing, thank you

[@venug2617]

Beautiful presentation.....

[@hada31]

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

[@namanthacker]

Very nice video Thanks!!

[@BaljinderKaur-hd4dj]

really helpful. Thanks a lot

[@leobertobittencourtfilho3036]

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

[@Newbtube92]

Great tutorial!

[@4chillingout]

So educational video ever seen

[@esclevi]

Your explanation is perfect!!!! However, which method would be more conducive to production without compromising the security of the system?

[@PyTechUz]

bro thank you 👍

[@sandippandey9181]

Pretty Awesome !done

[@thegoldgamer6339]

bro knows 4 programming languages bros a god

[@samikshakittur1078]

Thank you so much!!

[@khushantwankhede8311]

thankyou for such a useful content.

[@marianoduarte1505]

Great and all of that, it was really useful but you sound like Josh from Let's Game it Out, was expecting something to blow up in all directions

[@MufareezMMM]

best ... one . thank you

[@hunters1212]

Really nice explanation

[@Thug9TomABQ]

how can someone be so smart

[@Zaher24]

Why so simple?!? Thanks!

[@kingshahzad78]

Outstanding❤

[@fk2780]

//You're amazing bro!//

[@paraglide01]

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

[@Inke7]

Thank you kind sir!

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

[@foxstarr9508]

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

[@kursatepik5197]

you are a hero brother

[@FrankAnyalewechi]

Just like the iPhone calculator, Great

[@argagan2609]

lemme share this video with the ipad developers.

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

[@siampro3891]

BEST👍👍👍👍

[@OkenuObinna]

Thank you Sir, this was really helpful. #nigeria

[@hunin27]

Thanks!!!

[@ChristianChinakuezeofficial]

Nice tutorial sir

[@pratyushmishra77]

Thanks bro 🙌

[@mmafights__]

soooooo useful thankssssss❤❤

[@fireflysemanticsmedia6267]

Cool!!

[@saqlain0902]

wooah you made it easy