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"; } }
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 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 } }
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!
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.
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
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!
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 :)
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
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.
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
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 Sololearn or mimo for course(I'm not sure about mimo and sololearn is more popular, I use it too.) W3schools website, freecodecamp RUclips channel
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.
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! 👍
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.
@@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
@@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.
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]}
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; } }
В августе 2023 я смотрел его видео по html и css за 7 часов вроде. Я его просмотрел за 7 дней по 1.30 если не ошибаюсь. И 8 июня я смотрю его же видео, но про то 'как сделать калькулятор на js'))
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!
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
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👍🏾👍🏾
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%);
}
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
Can u plz tell me, how to change the only color of the text "Error" on the calculator display?
@@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
}
}
Hey clicking ''." more than once is an error too. this program is slightly wreaked.
@@SiiamW well obviously, because 2..4 is not a valid float or integer
Watching something being created from scratch is pretty entertaining and educational.
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!
sooo can you understand js now ??
You have the best programming channel, I learn html, css, javascript and python in your channel
That is crazy. Hope you practice daily.
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.
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
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!
i did it and as a beginner it was a hell 😅
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 :)
Your tone of the voice, the way you explain what you are doing.. it's perfect. Subbed!
tk
Super thankful for the awesome instructions! keep up the good work.
Thanks for this. a backspace button could be added,
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
Best channel about programming
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.
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
@@ent.8979facts, attending college literally for the degree
@@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
bros prof is so bad he thought this was Java
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
share some resorses with i am a beginner too
@@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 RUclips channel
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.
Few codes but precised. I'm amazed bro.
one of the best designs i have ever seen
never thought it could be that easy, thank you for the explanation
I think this was the easiest calculator build and explanation from any other youtube channel
Was about to comment this yesterday it is the best
I learnt a lot from this video in 15 min 👏👌
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😎😎
Another useful video! I am waiting for more ;)
supper
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! 👍
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.
sir i loved it. It helped a lot in confidence building as a beginner
Awesome, clear instructions and straigth to the point.
you can use
button:nth-child(4n-3) {
background-color: hsl(39, 100%, 50%);
}
instead of .operator-btn class
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.
this is my seal 🦭
I don't understand code that well but something about his videos is just so therapeutic.
Thanks for those teaching video. i love it ❤
Bro deserves recognition!!!!
Thanks Mate. Really helped with my project.
Excellent.
In short, you did a lot!
U can also make it a typable one by removing the 'readonly'. Its easier then just clicking buttons
woow! easiest way to create a calculator..i did it because ov u..thankuu so much:)
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.
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!!
eval() runs a JS expression dynamically at runtime. It can be a security risk tho
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
You can have 100 years of JS experience but still be encountering something damn new 💀 Just a beauty of coding
@@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
@@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.
Wow .. FANTASTIC - thank you so much for this. Going to look for other videos like this from you. (also subscribed :)
best teacher ever continue ❤
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
thank you bro for introducing me with "value" method
iPadOS developers should watch this
Thank you very much, I understand and it helped me a lot
Thanks you so much bro ❤❤
Keep it DOING ❤❤❤❤
You're the best teacher ❤
This is teaching me so much amazing video
Definitely Impressive🤩🤩
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]}
you literally give me confidence
thank you for making daily javascript videos
Never understood JS as much as i did now. I am a loyal fan. Thank you
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;
}
}
В августе 2023 я смотрел его видео по html и css за 7 часов вроде. Я его просмотрел за 7 дней по 1.30 если не ошибаюсь. И 8 июня я смотрю его же видео, но про то 'как сделать калькулятор на js'))
Very much for every developer
thanku .i hv done some typo mistake ,but handle it through chatgpt.thanks for the code
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.
Now my iPad can finally have a calculator app lol
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!
Agree, eval is not safe for newbie
Theres several nice tutorial on python to make calculator without the eval function. There you really see it hard coded from scractch!
super cool, thank's a lot
your style' css so good , it very butufu
"Every programmer should code his own calculator, at least a dozen times"
- Inventor of C++, Bjarne Stroustrup
Great Project had fun to build this project, u got a new sub will check your more videos
that is amazing, thank you
Beautiful presentation.....
function calculate() {
try {
display.value = math.evaluate(display.value);
} catch (error) {
display.value = "Error";
}
}
Very nice video
Thanks!!
really helpful. Thanks a lot
I wish (and I'm trying to) that I could code at this level. Honestly!
Great tutorial!
So educational video ever seen
Your explanation is perfect!!!! However, which method would be more conducive to production without compromising the security of the system?
bro thank you 👍
Pretty Awesome !done
bro knows 4 programming languages bros a god
Thank you so much!!
thankyou for such a useful content.
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
best ... one . thank you
Really nice explanation
how can someone be so smart
Why so simple?!?
Thanks!
Outstanding❤
//You're amazing bro!//
Wauw, thanks man this is great. Making a calculator creates so many ideas for apps that need input and calculating.
Thank you kind sir!
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
11months later and still helped 👍. but the js doesn't work and i've re written it 4 times 😢
you are a hero brother
Just like the iPhone calculator, Great
lemme share this video with the ipad developers.
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👍🏾👍🏾
yes I'd love to learn Lua too :)
BEST👍👍👍👍
Thank you Sir, this was really helpful. #nigeria
Thanks!!!
Nice tutorial sir
Thanks bro 🙌
soooooo useful thankssssss❤❤
Cool!!
wooah you made it easy