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!
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
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.
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
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 UA-cam channel
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!
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.
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
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.
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! 👍
@@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.
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; } }
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!
В августе 2023 я смотрел его видео по html и css за 7 часов вроде. Я его просмотрел за 7 дней по 1.30 если не ошибаюсь. И 8 июня я смотрю его же видео, но про то 'как сделать калькулятор на js'))
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]}
When I get the error message and then click again on the equal button I get function error on the display. How can I fix this? I am new to HTML, CSS and JS, thank you for the tutorial. Its good to learn the basics of creating something from scratch.
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.
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
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.
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 :)
Super thankful for the awesome instructions! keep up the good work.
Thanks for this. a backspace button could be added,
Your tone of the voice, the way you explain what you are doing.. it's perfect. Subbed!
tk
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
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 UA-cam channel
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 😅
Few codes but precised. I'm amazed bro.
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.
never thought it could be that easy, thank you for the explanation
one of the best designs i have ever seen
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
you can use
button:nth-child(4n-3) {
background-color: hsl(39, 100%, 50%);
}
instead of .operator-btn class
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 👏👌
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.
I don't understand code that well but something about his videos is just so therapeutic.
sir i loved it. It helped a lot in confidence building as a beginner
Awesome, clear instructions and straigth to the point.
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 🦭
U can also make it a typable one by removing the 'readonly'. Its easier then just clicking buttons
Another useful video! I am waiting for more ;)
supper
Bro deserves recognition!!!!
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! 👍
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😎😎
Thanks Mate. Really helped with my project.
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.
Thanks for those teaching video. i love it ❤
Excellent.
In short, you did a lot!
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;
}
}
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.
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!
woow! easiest way to create a calculator..i did it because ov u..thankuu so much:)
thank you bro for introducing me with "value" method
best teacher ever continue ❤
Definitely Impressive🤩🤩
Wow .. FANTASTIC - thank you so much for this. Going to look for other videos like this from you. (also subscribed :)
thanku .i hv done some typo mistake ,but handle it through chatgpt.thanks for the code
В августе 2023 я смотрел его видео по html и css за 7 часов вроде. Я его просмотрел за 7 дней по 1.30 если не ошибаюсь. И 8 июня я смотрю его же видео, но про то 'как сделать калькулятор на js'))
Thanks you so much bro ❤❤
Keep it DOING ❤❤❤❤
There is a problem with decimal subtraction. The values are incorrect in my case... .e.g. "4,221 - 3,11 = 11"
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
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]}
Beautiful presentation.....
Thank you very much, I understand and it helped me a lot
You're the best teacher ❤
This is teaching me so much amazing video
Very much for every developer
Never understood JS as much as i did now. I am a loyal fan. Thank you
I wish (and I'm trying to) that I could code at this level. Honestly!
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
super cool, thank's a lot
Really nice explanation
Great tutorial!
that is amazing, thank you
add this to appendToDisplay function: if(display.value=="Error"){ display.value=input;}
Very nice video
Thanks!!
Thank you so much!!
Pretty Awesome !done
Outstanding❤
you literally give me confidence
bro thank you 👍
thank you for making daily javascript videos
When I get the error message and then click again on the equal button I get function error on the display. How can I fix this? I am new to HTML, CSS and JS, thank you for the tutorial. Its good to learn the basics of creating something from scratch.
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
So educational video ever seen
really helpful. Thanks a lot
Thanks bro 🙌
best ... one . thank you
Wauw, thanks man this is great. Making a calculator creates so many ideas for apps that need input and calculating.
Nice tutorial sir
Your explanation is perfect!!!! However, which method would be more conducive to production without compromising the security of the system?
iPadOS developers should watch this
thankyou for such a useful content.
Cool!!
The real question is how to get it in a browser or have an actual url and have it split screen so you can view as you add your styling
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👍👍👍👍
very informative
function calculate() {
try {
display.value = math.evaluate(display.value);
} catch (error) {
display.value = "Error";
}
}
my question is after that is all said and done, how do you set that up as a public webpage with its domain extension . im new to all this
Thank you Sir, this was really helpful. #nigeria
Thank You!!!
Thank you kind sir!
Magnificent
Why so simple?!?
Thanks!
11months later and still helped 👍. but the js doesn't work and i've re written it 4 times 😢
Dear sir please make video.... With how to predict next number 🙏🙏🙏🙏🙏🙏🙏
you are a hero brother
Thankyou very much..
Thank you...❤
Great Project had fun to build this project, u got a new sub will check your more videos