Build this JS calculator in 15 minutes! 🖩
HTML-код
- Опубликовано: 20 май 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.
Super thankful for the awesome instructions! keep up the good work.
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!
You have the best programming channel, I learn html, css, javascript and python in your channel
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
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 :)
Thanks for those teaching video. i love it ❤
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
Few codes but precised. I'm amazed bro.
best teacher ever continue ❤
You're the best teacher ❤
I learnt a lot from this video in 15 min 👏👌
Great tutorial!
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 for making daily javascript videos
that is amazing, thank you
thankyou for such a useful content.
you literally give me confidence
your style' css so good , it very butufu
This is teaching me so much amazing video
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!
Thank you kind sir!
soooooo useful thankssssss❤❤
Wauw, thanks man this is great. Making a calculator creates so many ideas for apps that need input and calculating.
Thanks this is crazy,i like it bro.
Great Project had fun to build this project, u got a new sub will check your more videos
Thank you...❤
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
Very nice video
Thanks!!
Thanks!!!
I don't understand code that well but something about his videos is just so therapeutic.
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😎😎
super cool, thank's a lot
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 👍
thenkyou very much
you are a hero brother
So educational video ever seen
very informative
Thank u lad
so cool thanks bro
BEST👍👍👍👍
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.
yo bro code, thanks as always for a great video and motivation to study!
Why so simple?!?
Thanks!
Great 😊 😊😊
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
Very nice bro 😊❤
awesome video
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]}
Good Video ❤🎉
Amazing
Nice!
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
I wish (and I'm trying to) that I could code at this level. Honestly!
U are legend 😅mann
Awesome
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 think this was the easiest calculator build and explanation from any other youtube channel
Was about to comment this yesterday it is the best
thanks lots
you know that your the best yeah
function calculate() {
try {
display.value = math.evaluate(display.value);
} catch (error) {
display.value = "Error";
}
}
Are all these videos going to be part of an updated full course?
entertaining af
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
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..
Hi Bro Code, can you do a Lua full course?
👏👏👏👏
Do you have a patreon or something? I would love to support you!
This video was very helpful, but is there a way were I can make the calculator into mobile mode?
Now my iPad can finally have a calculator app lol
Nice 🤌 for you
thank you for this video....mine is showing "ncaught ReferenceError: appendToDisplay is not defined"
Giga can teach programming
welldone @BroCode same is not working for me......thanks for the good work.
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?
Calculator is easy thing
Can you make 3d space like in games?
How would you bind the calculator to your pc number pad.
bro knows 4 programming languages bros a god
AppendtoTodisplay is not defined error is coming in code now what to do next sir❤
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.
Use live server extension on vs code
@@reambillorussels.4641 omg thank you
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.
what could we use instead of eval?
iPadOS developers should watch this
Full Kotlin course please 🙏
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
❤
When i click on numbers, nothing appears on display. I checked several times, what could it be ?
Can you please tell me why my clear display isn’t working
Bro 😈😈 you are a gem
My appendToDisplay function doesn’t show my values when I click on them, any ideas what’s wrong?
Bro next video do chess game in java