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

3 ай бұрын

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

@skappy2000

3 ай бұрын

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

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

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

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

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

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

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!

Another useful video! I am waiting for more ;)

Best channel about programming

Thanks for those teaching video. i love it ❤

Few codes but precised. I'm amazed bro.

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

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.

You're the best teacher ❤

you literally give me confidence

best teacher ever continue ❤

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

that is amazing, thank you

your style' css so good , it very butufu

thankyou for such a useful content.

thank you for making daily javascript videos

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

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

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

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!

soooooo useful thankssssss❤❤

Thank you...❤

Thank you kind sir!

Thanks this is crazy,i like it bro.

This is teaching me so much amazing video

Thanks!!!

Thank you 🙏

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

Very nice video Thanks!!

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

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

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

thank you 👍

super cool, thank's a lot

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

thenkyou very much

you are a hero brother

Thank u lad

very informative

so cool thanks bro

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.

BEST👍👍👍👍

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

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

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

So educational video ever seen

awesome video

Great 😊 😊😊

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

Very nice bro 😊❤

Awesome

Nice!

Amazing

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

Why so simple?!? Thanks!

U are legend 😅mann

thanks lots

Good Video ❤🎉

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.

you know that your the best yeah

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

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

great

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

entertaining af

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

Now my iPad can finally have a calculator app lol

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

👏👏👏👏

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

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?

❤

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

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

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

bro knows 4 programming languages bros a god

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?

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

Giga can teach programming

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

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

iPadOS developers should watch this

❤❤❤❤❤❤

Bro 😈😈 you are a gem

Nice 🤌 for you

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

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

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

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.

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

❤❤😁😁

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

what could we use instead of eval?

AppendtoTodisplay is not defined error is coming in code now what to do next sir❤

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