JavaScript Project | Build Simple Calculator With JavaScript HTML CSS
HTML-код
- Опубликовано: 6 июн 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:
ruclips.net/p/PL9bD98LkBR7P16BndaNtP4x6Wf5Ib85Hm
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
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:)
Perfect work mate!
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
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.
Loved this video, I'd like to know what's target, dataset, num, addEventListener, querySelector, y querySelectorAll and how they work
super informative and thanks to comments for the undefined fix that was wierd
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
Thanks you so much this video is really very helpful to practice the js code || Subscribed 😍
This tutorial was amazing.. well explained.. thanks for sharing
Your welcome.
excellent tutorial with awesome accent bro :D
Amazing knowledge about front end
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👍
Everything is perfect sir you are awesome you gained my respect and a subscriber
Splendid!
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
Alhamdulillah.. Understood👏
Thank you for this playlist
Thank you very much. I'm a novice. You helped me a lot in learning JavaScript
Glad to hear that😊
Nice vid, thanks!
Thanks so much, I truly appreciate
Most welcome
Excellent Programming with minimal code!
Thank you.
Its amazing 😍😍
Tq bro 👍
Most Welcome
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 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 sir
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.
Great video 🙏🙏
Thank you so much
❤Thanku so much Bhai ❤
Thank you🎉
Great respect for you sir gajabbbbbbb explanation
Thank you brother
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?
You are the best Sir
Thank you dear.
thanks it worked, I removed btn class from = and C.
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.
thank you
this was very useful to me I almost cried because I thought I won't make the deadline
🤧
why do the buttons need a 2nd class? like btn btn-grey ?
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!!
Thanks pal
Your welcome
nice vid bro
Tnx bro
thanks bro
Most welcome bro
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
Nice
Thanks
Typed the style.css .calculator part exactly the same as yours but there is no rectangle box appearing in browser
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
🤩🤩🤩
How to fix document is not defined error in vscode node js 🙂
Here is the solution for your que:
if you have a equal undefined error remove 'btn' class in equal in html...
my java script not working
like even i click butons dosn't show numbers
use this if u have problem in equals and clear button
=
C
THANK YOU !!
🔥
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!
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
bro which theme are used for vscode
equal button is showing undefined in screen.value
pl guide
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;
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.
i have a problem? can you help me? inactive typing on the calculator ?why
Can anyone please write down the first code in that css file that was written down
I can't see it clearly
what is that e.target.dataset.num?????????????
please somebody explain. where is the num, dataset coming from
Hello please wen ever I click a number in the calculator it loops
bro if number click and add another number click did'nt come continuesoly
How to use enter keyas a equal button...can someone help please?
Whats the purpose of wrapping everything around the function? Can someone tell me?
Pls can you make a tutorial video for React Js?
sure... In future...
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
On clicking any button its not appearing on screen please help
let buttons = document.querySelectorAll('.btn');
i have a little problem, i replicated everything, but when i hit a button, the "screen" wont update, it remains empty. anyone has a tip? i got stuck at 18:05
please somebody describe what is the functionality of eval()
i did as per you equal(=) is showing undefined, you did not tell properly in vedio
thanks i understand the video but the api has being taken down,not working
I keep getting undefined when I click the equals button?
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
why i am gatting undifinen on screen with digits
If I press 042, the result is 34 .Its showing like this please resolve this.
l have typed same code like you but
any buttons is not working😔😔😕😕😏😏
same here
Please answer or explain why equal is not working, I'm waiting!
I am getting an error which says buttons.forEach is not a function
sa,e bro tNice tutorials is fire
Thanks
This is nice but I'm having a problem here. My own calculator didn't give me the answer whenever I want to calculate. It keeps saying undefined and I followed all what you said in this video
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???
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;
});
});
js code neither showing any output nor any error
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?
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 (){
})()
where is the class btn in the CSS
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
I did my equal button like this and it worked (also deleted de btn class in the html):
equal.addEventListener("click", (e) => {
if (screen.value !== " ") { //if the screen isn´t empty
let answer = eval(screen.value) //we calculate the aswer
screen.value = " "; //clear the screen
screen.value += answer; //and show the answer
}
})
thanks, my equal btn is working now
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 😊😊
how to set input limit ?
good but this calculator have some error because when we press the opretor more than one time it will add them multi times
buttons.forEach is not a function is showing. what to do sir?
@Jatin Vats Ask ChatGPT, and it will help you.
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.