Build this JS calculator in 15 minutes! 🖩

Рет қаралды 329,107

Күн бұрын

#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!

Пікірлер: 267

@BroCodez 5 ай бұрын

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 5 ай бұрын

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 4 ай бұрын

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

@skappy2000 4 ай бұрын

@@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 3 ай бұрын

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

@oli3641 3 ай бұрын

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

@alvinderama3196 5 ай бұрын

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

@watchdoggie8145 Ай бұрын

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

@vc6218 17 күн бұрын

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!

@f4sma 28 күн бұрын

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

@doronfeldman5152 5 ай бұрын

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

@aminahshentour8002 Күн бұрын

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

@reptilianis577 5 ай бұрын

Another useful video! I am waiting for more ;)

@user-ko6hz5lq1d 10 күн бұрын

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.

@pope1089 2 ай бұрын

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 2 ай бұрын

share some resorses with i am a beginner too

@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 2 ай бұрын

Few codes but precised. I'm amazed bro.

@Nanashi_29 2 ай бұрын

Best channel about programming

@muhammet_05 5 ай бұрын

Thanks for those teaching video. i love it ❤

@Newbtube92 4 күн бұрын

Great tutorial!

@12karmel12 5 ай бұрын

thank you for making daily javascript videos

@volinh6386 4 ай бұрын

your style' css so good , it very butufu

@mohsenvanc Ай бұрын

that is amazing, thank you

@ZXOT14 28 күн бұрын

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

@jiyoungkim9258 4 ай бұрын

you literally give me confidence

@armandopena5508 2 ай бұрын

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!

@khushantwankhede8311 3 ай бұрын

thankyou for such a useful content.

@niyonkuruinnocent17 2 ай бұрын

You're the best teacher ❤

@manueldiegoalexander3879 5 ай бұрын

Thanks this is crazy,i like it bro.

@petersimthobele 2 ай бұрын

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

@naglakandeel3152 Ай бұрын

best teacher ever continue ❤

@namanthacker 2 ай бұрын

Very nice video Thanks!!

@TheRealKingofCubing Ай бұрын

This is teaching me so much amazing video

@elisabethkolar9364 2 ай бұрын

super cool, thank's a lot

@hurricanos13 5 ай бұрын

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

@Inke7 5 ай бұрын

Thank you kind sir!

@sogwafl 5 ай бұрын

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 5 ай бұрын

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 4 ай бұрын

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

@lintee_12 3 ай бұрын

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

@mmafights__ 3 ай бұрын

soooooo useful thankssssss❤❤

@hunin27 5 ай бұрын

Thanks!!!

@paraglide01 5 ай бұрын

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

@neerajmeka25 3 ай бұрын

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

@mikesougly Ай бұрын

Thank you 🙏

@coderprakash 5 ай бұрын

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

@nazmussakib9346 Ай бұрын

Thank you...❤

@PurplexSKyo 5 ай бұрын

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 5 ай бұрын

yes I'd love to learn Lua too :)

@habibousy8723 9 күн бұрын

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

@kursatepik5197 5 ай бұрын

you are a hero brother

@godcomplex1929 5 ай бұрын

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.

@ciro3857 9 күн бұрын

Thank u lad

@vitorh.4567 15 күн бұрын

awesome video

@omidrezafeizi3530 Ай бұрын

very informative

@cristiandalessandro599 5 ай бұрын

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

@4chillingout 2 ай бұрын

So educational video ever seen

@hunin27 5 ай бұрын

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 5 ай бұрын

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

@hunin27 5 ай бұрын

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 3 ай бұрын

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

@CharukaRanathunga-bi6fy 2 ай бұрын

thank you 👍

@user-xj7te3qs8u 5 ай бұрын

Great 😊 😊😊

@siampro3891 4 ай бұрын

BEST👍👍👍👍

@berbahc 4 ай бұрын

so cool thanks bro

@user-un9fs3oj5r 2 ай бұрын

thenkyou very much

@hesa4196 4 ай бұрын

Nice!

@technicalresi5451 5 ай бұрын

Very nice bro 😊❤

@StephenColeman-yj5vo Ай бұрын

Amazing

@leobertobittencourtfilho3036 Ай бұрын

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

@subhro3044 4 ай бұрын

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 2 ай бұрын

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

@slender2128 5 ай бұрын

Good Video ❤🎉

@danielbeeber5587 20 күн бұрын

Awesome

@n.n.g2230 2 ай бұрын

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

@zahersankari7342 19 күн бұрын

Why so simple?!? Thanks!

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

@user-id5vh7rq3j 4 ай бұрын

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

@samueldayo9261 4 ай бұрын

Was about to comment this yesterday it is the best

@Oh_Sayang 5 ай бұрын

Now my iPad can finally have a calculator app lol

@darkslopegaming6855 5 ай бұрын

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

@moontvdyyds6846 16 күн бұрын

thanks lots

@paulpaul6042 4 ай бұрын

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?

@nurialsaeed5769 5 ай бұрын

great

@clementsim7227 2 ай бұрын

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?

@FijiAura_GD 5 ай бұрын

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

@RahulBhatia-py1iv Ай бұрын

U are legend 😅mann

@delhiwarriorgaming2882 4 ай бұрын

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

@theuser810 4 ай бұрын

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

@danarseptiyanto4066 3 ай бұрын

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

@theuser810 3 ай бұрын

@@danarseptiyanto4066 Thanks

@crackllitos1577 3 ай бұрын

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

@_rezalet_kanal_ 5 ай бұрын

entertaining af

@user-ej4vt2vg4o 2 ай бұрын

you know that your the best yeah

@strategistaow3520 5 ай бұрын

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

@zzumiittow 3 ай бұрын

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.

@WickedDaniel 4 ай бұрын

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

@pastori2672 5 ай бұрын

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

@thecoolnewsguy 5 ай бұрын

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

@thegoldgamer6339 4 ай бұрын

bro knows 4 programming languages bros a god

@elitetatsuya 4 ай бұрын

iPadOS developers should watch this

@ForuXe 3 ай бұрын

When i click on numbers, nothing appears on display. I checked several times, what could it be ?

@pope1089 2 ай бұрын

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

@mirmumit3888 4 ай бұрын

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

@user-yl2lp9ey1x 3 ай бұрын

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

@shauryacode76 3 ай бұрын

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

@Aliahmadi-fn5of 3 ай бұрын

Nice 🤌 for you

@kapteinoliver 3 ай бұрын

👏👏👏👏

@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