JavaScript Project | Build Simple Calculator With JavaScript HTML CSS
Vložit
- čas přidán 16. 07. 2024
- In this JavaScript Project, we will build a simple calculator using HTML CSS & JavaScript. We will also see how to add JavaScript functionalities, make interaction with Html.
🎁More JavaScript Projects For Beginners You Can Try👇
• JavaScript Projects Fo...
Source Code: www.buymeacoffee.com/tech2etc...
All Source Codes: www.buymeacoffee.com/tech2etc
GitHub: github.com/tech2etc
⛔❌Do Not CLICK This Link: bit.ly/3lJLyLY
Need any help? Join my Discord: / discord
SUPPORT ME:
👕 Merchandise: tech2etc.com/merchandise
🎁 Buy Me A Coffee www.buymeacoffee.com/tech2etc
🎀 Donate Me By Paypal: www.paypal.com/paypalme/tech2etc
How To Make MONEY Online - My 4 Favorite Tricks:
👨💻 Start Freelancing: tech2etc.com/fiverrcpa
🛒 Learn Digital Marketing: tech2etc.com/digital-marketing
📹 Make Video Editing As Profession: tech2etc.com/video-editing
🕔 Next trick will be revealed at the right time.
Free Course to Improve SKILLS & EARN:
1️⃣ WordPress Insider: tech2etc.com/wordpress-course
2️⃣ Bootstrap With Projects: tech2etc.com/bootstrap
3️⃣ Web Development For Beginners: tech2etc.com/webdev
4️⃣ JavaScript With Projects: tech2etc.com/javascript
5️⃣ Python With Projects: tech2etc.com/python
🎁 Get Certificate: courses.tech2etc.com/
Important Links:
📂 Best Hosting: tech2etc.com/best-hosting
📂 Best CV Resume: tech2etc.com/my-resume
📂 Freelancing Guide: tech2etc.com/learn-freelancing
📂 Interview Questions: tech2etc.com/?s=interview
DISCLAIMER: This description contains affiliate links. Which means I may receive a small commission on affiliate links used. This helps support the channel and allows us to continue to make videos like this. All content used within the parameters of fair use.
===============================
Connect with me & get daily updates👇
===============================
Discord: / discord
Instagram: / fahimulkabir.tech2etc
LinkedIn: / fahimulkabirchowdhury
FB (Personal): / md.fahimkabirhamim
FB Page: / tech2etc
FB Group: / 2424642430907565
Timestamps:
0:00 Introduction
1:57 File Directory Setup
2:40 HTML Structure
6:38 CSS Styling
13:33 JavaScript Implementation
21:07 Calculator Output
Build Simple Calculator With JavaScript HTML CSS | JavaScript Project
- Need Your Support Guys. Help Me To Reach 100K SUBSCRIBERS 🔥
More JavaScript Projects:
czcams.com/play/PL9bD98LkBR7P16BndaNtP4x6Wf5Ib85Hm.html
Timestamps:
0:00 Introduction
1:57 File Directory Setup
2:40 HTML Structure
6:38 CSS Styling
13:33 JavaScript Implementation
21:07 Calculator Output
**
If you are facing any problem with equal or clear button. Then go to html file. And if you have btn class inside the equal or clear button, then change them to btn-grey. Hopefully it should fix your problem.
still the same i change it in my html file and my js file with btn-grey but still the same
@@raaedshehata battling with the same problem
@@raaedshehata =
C
My Buttons Are Not Working in the senese I can't access Them why because we we did pointer events none plese help me with that
@@akshaykumardkr define pointer-events : none only inside form input
if anyone facing issue with equal or clear button coming as undefined, then please remove btn class from equal and just make the class name as btn-equal or btn-clear and update the app.js accordingly.
Hey buddy. Thanks. You got the bug and helped. As a beginner I couldn't not be able to find it.
Thank you very much I was having trouble there too.
Thank you
Thanks a lot🙏🙏
Thanks your a god
Thanks man...
If anyone got problem with undefined..
Change your html in equal and clear attribute "button" with this code
.... class = 'btn-grey btn-equal' >=
.... class = 'btn-grey btn-clear' >C
Idk what's wrong with explanation code, hope you guys can explain to me..
*sorry for bad english
thanks for your advice, it worked.
Thanks it works
valeu amigo ajudou muito
Thanks
thanks man, it worked👍
REMOVE the btn class from your Clear and Equal buttons. If you don't you may run into the same trouble I did with the 'eval' portion of the IF Else statement.
Thank you!, I was looking for what I was doing wrong and now i found it and solved it.
big help, thank you!
salute for sharing this. i was stuck for almost an hour figuring this. thanks
thank you 😊
What do you replace it with or how should the line of code read?
So simple and clear instructions. Very good job and thank you! Subscribed!
Excellent 🔥, Thankyou so much brother for explain each concept very easily.❤️
Excellent way of Teaching sir. While I was implementing I got to capture a bug/ improvisation for the calculator you built. After using '=' button, if you are clicking on any other button it has to clear the screen and take the input. One more idea is the screen should not take symbols(+,-,*,/) at the begging since we are simply using the eval() function of JS, we need such validations I guess:)
Thank you sir it's working after changing the classes and you have explained the js logic easily in simpler way ...thank you sir
same here
Loved this video, I'd like to know what's target, dataset, num, addEventListener, querySelector, y querySelectorAll and how they work
Thanks for the simplified way of teaching, some complicate everything
really awesome explanation of each line, took me just an hour to finish up and code too
super informative and thanks to comments for the undefined fix that was wierd
Perfect work mate!
first of all thank you explaining in easy or simple way. you simplify all line of code very easy everyone can understand your code. i have a suggestion for you brother make a second channel where you upload same tutorial but in hindi beacuse in hindi code no one can explain like you.
This tutorial was amazing.. well explained.. thanks for sharing
Your welcome.
Thanks you so much this video is really very helpful to practice the js code || Subscribed 😍
Everything is perfect sir you are awesome you gained my respect and a subscriber
Thank you for this short and helpful tutorial.
Your most welcome. Please share this project on your social media. Will appreciate that.
Very Good Tutorial, Thanks
Amazing knowledge about front end
Splendid!
Thank you for this playlist
Greate tutorial! I learned a lot specially on debugging the code as I encountered an issue with regards to button function, I have added additional class to yellow and gray button which is crucial for calculating value and excluded equals and clear as they don't have value so during button click i don't get undefined when I click equals and clear.
Its amazing 😍😍
Tq bro 👍
Most Welcome
Thanks so much, I truly appreciate
Most welcome
thank you so much sir
Excellent Programming with minimal code!
Thank you.
Simple/Easy to Understand/Easy to Learn ❤❤
Thank you so much. Please share this project on your social media. Will appreciate that.
Thank you very much. I'm a novice. You helped me a lot in learning JavaScript
Glad to hear that😊
Thank you very much for sharing this tutorial. It is well explained, very clear, and informative.
Thank you so much. Please share this project on your social media. Will appreciate that.
Thank you so much
thanks it worked, I removed btn class from = and C.
excellent tutorial with awesome accent bro :D
Nice vid, thanks!
Alhamdulillah.. Understood👏
Thank you🎉
You are the best Sir
Thank you dear.
Great respect for you sir gajabbbbbbb explanation
Thank you brother
thanks sir it is easy to use and understand
You are most welcome.
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.
Great video 🙏🙏
thank you
❤Thanku so much Bhai ❤
Here is the solution for your que:
if you have a equal undefined error remove 'btn' class in equal in html...
why do the buttons need a 2nd class? like btn btn-grey ?
if anybody have a equal undefined error here is a solution....
remove btn class in equal and do css with only eqaul or any class name.
thanks for this
Thanks alot man
Thank You so much. I was stuck there for more than hours
Thank you that was the solution!
Thanks pal
Your welcome
thanks bro
Most welcome bro
How to fix document is not defined error in vscode node js 🙂
Thank you for this tutorial but how about decimals? When I press decimal more than once more than one decimal appears on screen?
screen.value = answer.toFixed(2); instead of screen.value = answer;
bro which theme are used for vscode
what extension are you using to make your vscode look like that? also whenever I type in a number it puts it into the input box twice so if i hit 9 it will put "99" instead of "9"?
it might one of the Community Material Themes In vscode search for Community Material Theme
Hi awesome tutorial. Can someone explain the data-num to me that's on html? I've been googling but still don't know why it's needed and why was it not needed for the equals and C buttons?
me too
my java script not working
like even i click butons dosn't show numbers
equal button is showing undefined in screen.value
pl guide
On clicking any button its not appearing on screen please help
let buttons = document.querySelectorAll('.btn');
nice vid bro
Tnx bro
use this if u have problem in equals and clear button
=
C
THANK YOU !!
🔥
this was very useful to me I almost cried because I thought I won't make the deadline
🤧
Please don't go on adding event listeners to every button as it will make the code inefficient brother.
Rather use event delegation pattern and apply the event listener on button container class.
Anyway, great tutorial!!
Typed the style.css .calculator part exactly the same as yours but there is no rectangle box appearing in browser
I have a problem when i click on any buttons and don't do any calculation and then press on clear button, the value doesn't clear.
Do anyone have a soluation for it.
Can anyone please write down the first code in that css file that was written down
I can't see it clearly
Whats the purpose of wrapping everything around the function? Can someone tell me?
l have typed same code like you but
any buttons is not working😔😔😕😕😏😏
same here
i have a problem? can you help me? inactive typing on the calculator ?why
Nice
Thanks
Hello please wen ever I click a number in the calculator it loops
what is that e.target.dataset.num?????????????
please somebody explain. where is the num, dataset coming from
please somebody describe what is the functionality of eval()
bro if number click and add another number click did'nt come continuesoly
thanks i understand the video but the api has being taken down,not working
🤩🤩🤩
why i am gatting undifinen on screen with digits
bro what are you typing when did you type ( please enter ) i never saw it, and the code it not even working perfectly my = is doing the job of my clear bro
i did as per you equal(=) is showing undefined, you did not tell properly in vedio
I keep getting undefined when I click the equals button?
hey, thx for this But can someone explain me why we start with a function and do the code in it ? I never saw that (i'm a junior dev)
not need to start with function, you simply create variables, create function for buttons, equal & clear. It will work
how to set input limit ?
Pls can you make a tutorial video for React Js?
sure... In future...
If I press 042, the result is 34 .Its showing like this please resolve this.
Thanks alot for sharing. I do appreciate 🙏.
However, when i get a value for example 2+3 =5, if I type 2 it should clear the 5 rather than be 52. I don't know if anyone encountered such problem. How do I fix it?
i faced same problem
buttons.forEach(function (button) {
button.addEventListener("click", function (e) {
if(screen.value == "Please enter"){
screen.value="";
}else if(screen.value == answer){
screen.value="";
}
let value = e.target.dataset.num;
screen.value += value;
});
});
little fix here, if you still get undefined with equal button, just delete conditional statement like below this :
if (screen.value = '') {
screen.value = '';
} else { }
and leave the following code below :
let answer = eval(screen.value);
screen.value = answer;
so it suppose to be look like this :
equal.addEventListener('click', function(e) {
let answer = eval(screen.value);
screen.value = answer;
});
it should fix undefined error, i don't know why but i just found out the source of the problem is in that conditional statement
If Somebody wants to delete one digit then how he/se can do so, there must be a delete button. If Someone have any Idea then Kindly help me.
js code neither showing any output nor any error
where is the class btn in the CSS
good but this calculator have some error because when we press the opretor more than one time it will add them multi times
In my vs code i followed up all the rules exactly the way it was coded in this tutorial; when it came to the part where you click on buttons they won't show on the screen, I've cross-checked to know if there was an error to my coding (all to no avail).
What might be this problem?
kindly check the pinned comment
@@Tech2etc same here bro , not showing clicked buttons on screen ...even I altered to .btn-clear & .btn-equal and for buttons .btn
@@kirankumarp4537 I had the same problem but i fixed it. check in the app.js that the function is in brackets like this
(function(){
let screen = document.querySelector('.screen')
let buttons = document.querySelectorAll('.btn')
let clear = document.querySelector('.btn-clear')
let equal = document.querySelector('.btn-equal')
buttons.forEach(function(button) {
button.addEventListener('click', function(e) {
let value = e.target.dataset.num;
screen.value += value;
})
});
})();
bhai script file ko connect kero
sab bara bar chalega
you need to call function by adding the parenthesis in the end
(function (){
})()
I find one problem in this calculator.. If any one type wrong no. Then.. There is no option to delete the value.. But overall calculator and teaching way is good.
the clear (C) button deletes the value 😊😊
Great tutorial , I've followed all the steps and now have a calculator.. problem is the equal sign keeps saying 'undefined' !
please check the pinned comment.
use the class for both as class="btn-equal" and "btn-clear" in the place of class = "btn btn-grey" because in the javascript it calls both the class btn and btn-clear at the same time so it becomes undefined for it. Hope it helps you even after 3 months XD!
@@ayushshankarpurkar1417 Thanks It Help me now
How to use enter keyas a equal button...can someone help please?
try{answer = eval(screen.value);
screen.value = answer;
Catch(err){
screen.value= "error";
}
Thanks for this tutorial. One problem that many of us are having that still isn't rectified is that 'click' events are not being recognized. This is unrelated to the problem in the pinned comment.
For example, vscode shows the event listener as unrecognized and either void or null when hovering over the click events:
(method) Element.addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)
^^undefined?
Also, regarding the use of e.target.dataset.num... is this supposed to be built in? Do we need to import something? We never declare or name any object as dataset, but vscode doesn't autocomplete that term. Were we supposed to tie the term dataset to the number button classes somehow so it would be recognized?
These aspects are really tough for what should be a simple calc.
I went back through the video 6 times slowly and checked every character. Has something changed since this video that would cause us to struggle so much at this part? Some people said to make sure the script is invoked from withing the html body, and it is. Everything else works fine up until trying to click a number button and have the number display on the upper screen. But I'm copying you verbatim. I promise. I'm a full time developer, but I mostly work on python based backend work, and lots of terraform configs. I'm very careful with punctuation and indentation. But like a handful of others here, I can't get this click event to cause the numbers to display.
I am admittedly brand new to frontend work and js, so maybe its some setting I'm unaware of?
Please help.
Thanks again and Happy New Year 2023!!!
I really admire your dedication towards frontend work. Can you upload your code in codepen or GitHub? So that i can have a look and tell you exactly what is going on in your code.
You can connect with me through discord.
@@Tech2etc you’re the best. Thank you! I’ll add it to git and stop by to join your discord. I very much appreciate you and your knowledge sharing. Have a great new year!
@@remy333 did you find out the problem if so what was it?
I am having This same challenge and I am yet to get a solution even in the comments. Would anyone be able to help? When I click, it does not display anything on the screen like the tutorial. I always struggle with JavaScript as I never get the outputs as in the tutorials I watch. I am a bit tired and frustrated. Please, helpppppppp.
@@bunmiYomi bro i'm facing the same problem, in multi projects i find problems. did you fix it?
i have question. whats different between background: and background-color:
"The major difference between CSS background vs background-color property is that the background property is shorthand of all background properties. On the other hand, the background-color property is the subset of the background property used to set the background color" - Google
Note: Please try to be smart. When you can get the answer in a few mili second by searching on google. Then please dont wait for days or weeks or months to get a simple answer in youtube. Thanks.
Mery calculator project MN click ki funtionaly q ni add ho rhi???
if it's not working check if you remerbered to invoke the function
sa,e bro tNice tutorials is fire
Thanks
i just did same as you but still its not working specially equal and clear button ? can you explain tho?
and when i press equal button its shows undefined so can you please help me out?
when im clicking on a button it doesn't appear on the screen my function code is correct but still not getting what to do?
buttons.forEach(function(button){
button.addEventListener('click', function(e) {
let value = e.target.dataset.num;
screen.value += value;
})
});
equal.addEventListener('click',function(e){
if(screen.value === ''){
screen.value = "Please Enter";
}else{
let answer = eval(screen.value);
screen.value=answer;
}
});
clear.addEventListener('click',function(e){
screen.value="";
});
you must add this (single quotes/ double quotes) like this if(screen.value === ' ') {
note : if u still facing the issue then check the selectors.
let screen = document.querySelector('.screen');
let buttons = document.querySelectorAll('.btn');
let clear = document.querySelector('.btn-clear');
let equal = document.querySelector('.btn-equal');
I'm also facing the same issue. buttons.forEach is not a function is showing
My eval value gives undefined value
i copied the code as it is but still the buttons are not working. Can any one help?
Same ,what u did?
Same problem 😢
Sorry, I did as exactly you say. But am having difficulty in outputting the result. i.e the eval(screen.value)
It always bring out undefined. Can you pls explain to me why.
I have the same problem🙄
same
@@gaurikasharma8778 @noak-manuel nwobodo, @aanan munna I had the same but read the comments and found that you need to remove the class "btn" from your equal button in HTML (so leave only btn-equal). GL!
@@miklosvasarhelyi8891 already did it but didn't work
@@gaurikasharma8778 you found the solution bro?