Build this JS calculator in 15 minutes! 🖩
Вставка
- Опубліковано 4 чер 2024
- #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!
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!
Super thankful for the awesome instructions! keep up the good work.
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!
Another useful video! I am waiting for more ;)
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.
Best channel about programming
Never understood JS as much as i did now. I am a loyal fan. Thank you
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
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 :)
Few codes but precised. I'm amazed bro.
Thanks for those teaching video. i love it ❤
Wow .. FANTASTIC - thank you so much for this. Going to look for other videos like this from you. (also subscribed :)
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! 👍
I don't understand code that well but something about his videos is just so therapeutic.
that is amazing, thank you
thank you for making daily javascript videos
Great tutorial!
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
your style' css so good , it very butufu
I learnt a lot from this video in 15 min 👏👌
best teacher ever continue ❤
Thanks this is crazy,i like it bro.
you literally give me confidence
You're the best teacher ❤
thankyou for such a useful content.
super cool, thank's a lot
This is teaching me so much amazing video
Very nice video
Thanks!!
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 kind sir!
thanku .i hv done some typo mistake ,but handle it through chatgpt.thanks for the code
Thank you 🙏
soooooo useful thankssssss❤❤
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!
Thanks!!!
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😎😎
Thank you...❤
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👍🏾👍🏾
yes I'd love to learn Lua too :)
thank you 👍
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
you are a hero brother
thenkyou very much
Thank u lad
So educational video ever seen
Are all these videos going to be part of an updated full course?
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
Wauw, thanks man this is great. Making a calculator creates so many ideas for apps that need input and calculating.
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?
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
so cool thanks bro
Great Project had fun to build this project, u got a new sub will check your more videos
I wish (and I'm trying to) that I could code at this level. Honestly!
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.
Thanks
very informative
BEST👍👍👍👍
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?
Amazing
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?
Great 😊 😊😊
Nice!
yo bro code, thanks as always for a great video and motivation to study!
Awesome
awesome video
Very nice bro 😊❤
yeah but like what software do you use for coding??
thanks lots
add this to appendToDisplay function: if(display.value=="Error"){ display.value=input;}
Why so simple?!?
Thanks!
How would you bind the calculator to your pc number pad.
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]}
Can u plz tell me, how to change the only color of the text "Error" on the calculator display?
Good Video ❤🎉
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.
Now my iPad can finally have a calculator app lol
great
entertaining af
U are legend 😅mann
how would you implement stuff like factorial and log etc.. ?
For log, use the built-in Math object, for factorial, look for an algorithm on the internet or a library
Hi Bro Code, can you do a Lua full course?
Can you please tell me why my clear display isn’t working
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..
thank you for this video....mine is showing "ncaught ReferenceError: appendToDisplay is not defined"
you know that your the best yeah
This video was very helpful, but is there a way were I can make the calculator into mobile mode?
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.
Do you have a patreon or something? I would love to support you!
👏👏👏👏
When i click on numbers, nothing appears on display. I checked several times, what could it be ?
what could we use instead of eval?
My appendToDisplay function doesn’t show my values when I click on them, any ideas what’s wrong?
Calculator is easy thing
Can you make 3d space like in games?
welldone @BroCode same is not working for me......thanks for the good work.
How did you open another tab i.e html tab???
How did you get the setup where your website autosyncs with the code? That seems like a lifesaver!
It's "live server" extension on VS Code, it auto refresh the browser whenever you save, very useful
@@danarseptiyanto4066 Thanks
function calculate() {
try {
display.value = math.evaluate(display.value);
} catch (error) {
display.value = "Error";
}
}
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.
Use live server extension on vs code
@@reambillorussels.4641 omg thank you