Create a simple calculator using HTML, CSS, JavaScript
HTML-код
- Опубликовано: 21 окт 2020
- Let's create a cool calculator with HTML, CSS, JavaScript. This project is aimed to help beginners, who just started their javascript / frontend developer journey.
Please leave feedback in the comments, so I can improve my content to help you guys out more.
Starting project: github.com/javascriptacademy-...
Final project: github.com/javascriptacademy-...
Where you can find me?
🔗 Links:
* 🍺 Support free education and buy me a beer: ko-fi.com/adamnagy
* 💬 Discord: / discord
* 📧 Newsletter: www.getrevue.co/profile/dev_a...
* ✍️ Blog: dev.to/javascriptacademy
* 🐦 Twitter: / dev_adamnagy
* 📷 Instagram: / javascriptacademy
New web development tutorial from me: Memory card game using Javascript, HTML, and CSS: 🔥
ruclips.net/video/xWdkt6KSirw/видео.html
I love this
It's a shame that no one watches your videos
Really great tutorial. Thank you very much. I've just fiinished js course and wanted to practice by making so calculator but all the videos on ytb are so overwhelming. Thankfully I found your video and in one hour ish I finished this project. Now I'm confident to make one calculator by my own
If you enjoyed the video and want to learn more, feel free to check out my coding projects tutorials playlist:
ruclips.net/p/PL1tUyORvTAreSCSnxhz1-CPJVlbHZveBN
my code doesnt work text doesnt appear is JS just that bad that other people's code doesnt work?
thank you very much, subscribed
Thank you so much for this tutorial! it was simple and very practicle im new to javascript and css and html and this was a great video for me to learn! keep it up!
Subscribed! The eval function makes this much easier. I also had to look up the difference between innerHTML and innerText. Thank you for this tutorial!
Don't Use eval() To Be Safer
I can't believe how easy this was! You're a really good teacher.
Lol mee too 😅lol but I'll look for a way to counter that Eval expression
Its always easy copying someone else code, try building it yourself 😂
easily understandable, short so its impossible to get distracted and just delivered really well. great video, thanks
really nice, thanks. Loved the scale and speed - a great confidence builder. One tip for presentation - when you are working at the bottom of the screen, (e.g. @ 4:52 for about 30 seconds ) the player bar pops up and obscures your work, especially when I am flicking back and forth between YT and VS Code. Just a small thing but would help to follow along if most work is closer to the middle. Cheers.
Thanks a lot for this tutorial, I'm learning Javascript and i needed a project to start with... this was simplified and precise....Subscribed
Subscribed! Awesome video, Iv just started my Java script module and want to try making a calculator as a mini project. Will definitely be watching the rest of your work!
Awesome, thank you!
Thank you! I have never seen Javascript in action before and after this video it looks easier
If you want to make the eval part a bit safer, you can add a Regex at the end like this
output.innerText = eval(output.innerText.replace(/[^-+/*\d]/g, ''));
This will make it so it only accepts numbers and the special characters included in the script
a big help. im still starting to learn. the delivery is easy to understand. thank you very much
Great tutorial, thank you so much, I'm surely gonna watch more videos from you!!!
Absolutely simple and exceptionally beginner friendly tutorial. Kudos to you!
Been struggling to make calculator the whole day and decided to search it and this guy did it in under 15 minutes LOL I need some sleep!!
This is a great tutorial, but for beginner programmers I would not recommend using eval() especially in real-world projects. To quote from MDN page "Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval(). See Never use eval()!, below."
they literally said this in the video lil bro
What is eval() means??
@@DeviKumavath The eval() function evaluates the specified expression, if the expression is a legal Python statement, it will be executed.
That was so simple! The other guy uses class and lot of functions and it takes more than 30mns. But yours is so simple! +1 sub THANKS!
This was amazing and so easy to follow. Thank you so much!!!
I’m so glad that it was usefult to you 😊
in where we have to write that code
Thanks man. was searching something like this. simple but effective
Thank you! I'm learning JavaScript. This was a little/lot above my knowledge but it was finally nice to implement some JavaScript vs. endless amounts of freeCodeCamp.
Great to hear!
I'm new to this channel. He explained me a new idea to make calculator in 14 minutes
Welcome on board! I’m glad you enjoyed it 😊
keep making this stuff, it helped a lot :)
Thanks, stay tuned for more ;)
Great tutorial mate loved it
I’m glad you loved it!
Thanks for the kind words :)
Outstanding! My first working app, Thanks!
I really liked your way to explain and your code is so clear. SUBSCRIBED
Thanks for the kind words expect more to come 😉
Thanks for the video! What VS theme do you use?:)
trying to learn how to use javascript with html and this video is gold. thanks
Thank you Marcus! I’m so glad that you found it useful
Really well made tutorial video! Thanks a lot!
Now I would like to see how you do it without using eval()!
Thank you for the tutorial! 😄
thanks for this video in javascript build a calculator seem to be difficult but with this video every thing is clear thanks so much
you sir, are very underrated! You are very good teacher and explained everything you did and why you did. Thankyou!
\
Thanks for the kind words!
Thank you so much. I’ll like to add something.
Instead of using eval(), use Function.
In that line where case Is “=“, you can set
display.innerText = Function(“return “ + display.innerText)();
Don’t forget to add your break. Thanks!
thanks!
english isnt my first language and this tutorial was awesome!
Your method is amazing Sir... thank you
Really simple and great explanation.
Thanks 😊
hello, thank you so much. This tutorial was so simple . I have a question, if i want the content on the display to automatically clear when i select a new number after using the equal to sign, how will this work.
just finished this tutorial now i am just your fan... Almost Subscribe
Very good thank you and the last security demo is very valuable
so easy and clear. Thank you very much.
You’re welcome, thanks for the kind words.
Thanks man making video informative and simple
This was the simplest way to make a calculator 😃😃😃 i love it
wow! this is good stuff, thank you
Bro your video is really awesome very easy to understand. Thankyou😊
Thanks for the feedback! I’m glad you enjoyed and understood it 😌
Your code is amazing!😮
Thanks so much for this wonderful tutorials
Thanks for the help!
You’re welcome 🙂
Thank you so much, u're the best.
THANK YOU VERY MUCH SIR...REALLY HATS OFF TO SHOW RESPECT
Great video. Thanks for sharing
Thanks for the feedback!
This was great! I'm new to javascript and this helped me alot.
I've been trying to add keydown function to this calculator.
How can i do that?
Did you manage to get keydown in on this one? Currently trying myself
Such a great video. Thank you so much. Subscribing for more .
You gained one subscriber.Thank You 🙏
Welcome to the Academy! 😊
You Helped me get flying colors on my exam today! Thank you so much for your help!
But i have a question, I have been trying to find the perfect code editor for a beginner like me, may I know that name of the software you used for this video?
Looks like they're using vscode as their editor
its visual studio code
Hey man, thanks for the tutorial, easy and understandable... just one thing i want to ask... aren't you hungarian??? :D
Lol you just made me laugh and smile and wonder and scream at once 😆 thank you so much sir... this is perfect for an assignment at last
Thanks for the video. How can I disable the alphabet keyboard but keeping just the numbers using the switch statement? also how can I limit the number of digits to show on the display?
hey! thank you for this tutorial! I just have one question, if for example, you have written a lot of numbers how do you make the numbers written on the next line instead of just one line? thanks
Hi!
To achive that I’d set a max with to the display and ser its height to auto. This way if the content overflows it would go to the next line. And also in this case the container of the calculator shouldn’t have a fixed height
@@JsAcademyOfficial thank you bro! I'm your subscriber ;)
Hej! I hope you don't mind me asking questions. I'm just wondering if it's possible to change the color of the answer. For example if the answer is 0 it will be red and if it's negative it'll be blue. Is it possible like that? Do you have a tutorial video for that? Sorry I'm quite new in this.
Hi!
No problem. Yes it is possible, you should check the value of #display when it changes and basoed on the value you should set classes or the styles directly. You can use classes like .zero .negative .positive just be aware the the id selector is stromger in css so you should remove any color changes is the id selector
@@JsAcademyOfficial thanks a bunch bro! you're awesome!
great jobs!🏆
I hope you create more videos about programming language.
Very easy and understandable,
may I ask if the buttons are not responding and not displaying what I do on the output?
If the buttons do not work there’s a high chance that the event listeners/handlers are not set properly. Check for typos in classnames and ids and double check the event handlers
@@JsAcademyOfficial Update: I found the problem all along it was the wrong browser i was using for the project.
Again thank you for the help sir 💚
Nicely Done bro 👏👍
Thanks ✌
That was amazingggg stuff!! I really appreciate your work sir, easy and not complicated at all.
But can you tell me if i had used '*' sign as a HTML Entity, then how to use '*' multiply operation in JS??
Hi Akshay!
Thanks for the kind words. I hope I understand your question. The eval function takes a string and runs it as it would be javascript so the * sign will be translated into the multiplication operator when using it within eval
Good tuto, thank you
I’m glad you found value in it :)
Holy sh*t! This was genius.
It was really good love from India .💐💐💐💐💐💐
Nice video! I'm wondering what kind of accent is this you have :D Jól sejtem, hogy magyar? :D
Thanks 😉 Igen magyar az akcentus :)
@@JsAcademyOfficial Akkor jól éreztem :D Jó kis videó, csak így tovább! Nem rég kezdtem kódolni és pont ezzel a feladattal küszködöm jelenleg. Amúgy meg ment a sub!
Sok sikert és kitartást hozzà! Köszi a kedves szavakat 😌
So awesome project
thanks for this video tutorial this easily explained thank you so much again !!!!!!!!!!!!!!!!
You’re welcome
Subscribed already
I have a question, When I changed the divide to "÷" Error kept coming so I was wondering if you could tell me how to make it so that it also works with "÷"?
the valid Math operator to divide is the "/" symbol and it's not possible to override or "operator overload" it
could we have used forEach instead of map to add event listeners to each button
I dont understand why u add the 'e' after declaring the click event listener at 7:01.. what does it do? and why shouldnt i just leave a blank ( ) ?
im just starting so i googled a lot about all the things you did on the vid but i cant find an answer to that, i dont know how to word my question to google.. but i hope u can answer it!
Thanks! This is a really good tutorial!
Thanks Nikolai!
I’m glad you found it useful!
really nice prof video.
Amazing man
What is the alternative function to the eval();
you gotta make one yourself.
Thankyou soo much!!!!
why did you use div instead of input for the calculator display
great work
Thank you Singh! 😊
WAOOOOH WAOOH WAAOOOH
Thank you so much !!
Which theme are you using
am i missing a package or something? i was even at the point of copy and pasting everything exactly and it still didn't work. every single html js and css. did something break or something?
This may sound a bit dumb but im new so how do i duplicate the lines of the code in vs studio? sub btw
good video., thanks u so much
So nice of you, thanks
but how to fix if you tap equal sign that don't have items it give me undefined
Application with real user instead of eval what should we use?
I'd install this package mathjs.org/ and use math.evaluate()
Hi, thank you so much for your helpful video. However, I did not understand the part in javascript ,
First button.map(button =>{ I really dont understand why you express this and why we use map here and why we use the equal sign and larger sign in this situation
Second, I dont understand what e.target.innerText mean in here
Hi Linh!
The equal sign and the > symbol is a shorthand for functions. We use map to loop through the array. The target means the dom element (container) that was clicked and innerText means its content. Feel free to check out arrow functions arrays and dom on w3schools.com
Have a nice day! 😊
Very nice video
Thanks for the feedback!
I truly appreciate it. I wish I could know all the parameters you use. I think is a matter of time. Thank you!👋👋👋👋
i wanna use "×" and "÷" which is times and divide in HTML. but if I use them, your js code cannot calculate / and * (ㅠ.ㅠ) I need help
Good job
Thanks
yo this is sick
Thank you!
Subscribed
hey how you multiply that line like in 1:05? awesome chanel !
Hi!
It is Shift + Alt + DownArrow :)
thanks man🙏🙏❤❤
When I click any button it shows that number or symbol 18 times (number of buttons in calculator). Why does it happen? Edit: Found the problem, after .map() method, when i was adding event listener, i coded document.addEventListener instead of button.addEventListener
Thanks for sharing the solution, yes this way you attached an event listener to all the buttons instead of adding 1 for each button
What is "button => {}" in the buttons.map?
That is called an arrow function. You can find more info here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
The upper part of the calculator css is not available...I can't just see it
Hi, did you use bootstrap here?
Hello Muxtar!
Nope I didn’t use bootstrap
@@JsAcademyOfficial Okay, thanks for everything!