JavaScript Project | Build Simple Calculator With JavaScript HTML CSS

[@Tech2etc]

Build Simple Calculator With JavaScript HTML CSS | JavaScript Project - Need Your Support Guys. Help Me To Reach 100K SUBSCRIBERS 🔥 More JavaScript Projects: kzbin.info/aero/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.

[@raaedshehata]

still the same i change it in my html file and my js file with btn-grey but still the same

[@mukhtarakinloye7958]

@@raaedshehata battling with the same problem

[@shloksuman8164]

@@raaedshehata = C

[@akshaykumardkr]

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

[@shloksuman8164]

@@akshaykumardkr define pointer-events : none only inside form input

[@ratanmanjari7757]

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.

[@vaibhav_prajapat_7725]

Hey buddy. Thanks. You got the bug and helped. As a beginner I couldn't not be able to find it.

[@ThawHtooZin222]

Thank you very much I was having trouble there too.

[@chetan9394]

Thank you

[@ramazborchashvili7976]

Thanks a lot🙏🙏

[@chittadigitalnetwork6242]

Thanks your a god

[@nofriyan184]

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

[@amaximus4664]

thanks for your advice, it worked.

[@genztechman]

Thanks it works

[@josephdacostaribeiro2090]

valeu amigo ajudou muito

[@sachibuibrahim4438]

Thanks

[@fr_itz014]

thanks man, it worked👍

[@hithardhksvln5302]

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:)

[@acebailey2478]

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.

[@user-ve6bw1lt7t]

Thank you!, I was looking for what I was doing wrong and now i found it and solved it.

[@desdaderpinater439]

big help, thank you!

[@francisdominicbermas2648]

salute for sharing this. i was stuck for almost an hour figuring this. thanks

[@RoopashreeHV]

thank you 😊

[@CommanderKurn]

What do you replace it with or how should the line of code read?

[@Lashistoriasdelilith]

Loved this video, I'd like to know what's target, dataset, num, addEventListener, querySelector, y querySelectorAll and how they work

[@princekaushikk]

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.

[@trk1216]

Thank you sir it's working after changing the classes and you have explained the js logic easily in simpler way ...thank you sir

[@vimalsinghgaur]

same here

[@ChefnCoder]

really awesome explanation of each line, took me just an hour to finish up and code too

[@respectgmechager8054]

use this if u have problem in equals and clear button = C

[@shrutirohila7869]

THANK YOU !!

[@theblackbenguine8129]

🔥

[@nostalgiagameplay3933]

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

[@vikrambam1184]

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.

[@blessingsunday5272]

thanks for this

[@amrholo4445]

Thanks alot man

[@vatansrivastava7279]

Thank You so much. I was stuck there for more than hours

[@adrianCoding]

Thank you that was the solution!

[@MohitKumar-jy6hf]

Amazing knowledge about front end

[@ourmaths8293]

thanks it worked, I removed btn class from = and C.

[@talibhusain3335]

Excellent 🔥, Thankyou so much brother for explain each concept very easily.❤️

[@ajaydevgan24]

Everything is perfect sir you are awesome you gained my respect and a subscriber

[@sajjadlatafaty2547]

Thank you very much. I'm a novice. You helped me a lot in learning JavaScript

[@Tech2etc]

Glad to hear that😊

[@brozamgeneral]

Thanks for the simplified way of teaching, some complicate everything

[@Chiillybro]

super informative and thanks to comments for the undefined fix that was wierd

[@arvinbonggal5443]

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.

[@ANTIDOTEBDOFFICIAL]

Simple/Easy to Understand/Easy to Learn ❤❤

[@Tech2etc]

Thank you so much. Please share this project on your social media. Will appreciate that.

[@better-health-now]

why do the buttons need a 2nd class? like btn btn-grey ?

[@debadey8614]

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!!

[@sahiraahamed]

Alhamdulillah.. Understood👏

[@clarisseaguirre6161]

this was very useful to me I almost cried because I thought I won't make the deadline 🤧

[@helaluddin6209]

This tutorial was amazing.. well explained.. thanks for sharing

[@Tech2etc]

Your welcome.

[@victoriaazola6409]

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 } })

[@pavangupta4866]

thanks, my equal btn is working now

[@bhakthasingh8198]

Excellent Programming with minimal code!

[@Tech2etc]

Thank you.

[@anneldahnce1661]

You are the best Sir

[@Tech2etc]

Thank you dear.

[@Dragon-facts-d3j]

Perfect work mate!

[@Ishablogs1]

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.

[@daniesavage]

the clear (C) button deletes the value 😊😊

[@synthtech485]

Great respect for you sir gajabbbbbbb explanation

[@Tech2etc]

Thank you brother

[@MathSCSil]

Thank you for this playlist

[@girlwhoinvests]

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?

[@YesheyTshokgyelBidha]

me too

[@remy333]

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!!!

[@Tech2etc]

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.

[@remy333]

@@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!

[@100x2xp]

@@remy333 did you find out the problem if so what was it?

[@bunmiYomi]

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.

[@mouhamedzahri2172]

@@bunmiYomi bro i'm facing the same problem, in multi projects i find problems. did you fix it?

[@AdityaG.]

Here is the solution for your que: if you have a equal undefined error remove 'btn' class in equal in html...

[@krishchaudhary5885]

Its amazing 😍😍 Tq bro 👍

[@Tech2etc]

Most Welcome

[@mericgencay7109]

excellent tutorial with awesome accent bro :D

[@shubhamkatiyar5913]

How to fix document is not defined error in vscode node js 🙂

[@lymphliar]

Thank you for this short and helpful tutorial.

[@Tech2etc]

Your most welcome. Please share this project on your social media. Will appreciate that.

[@jamil_mikael]

Great tutorial , I've followed all the steps and now have a calculator.. problem is the equal sign keeps saying 'undefined' !

[@Tech2etc]

please check the pinned comment.

[@ayushshankarpurkar1417]

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!

[@devotionalofgod820]

@@ayushshankarpurkar1417 Thanks It Help me now

[@nothing-tj9eh]

my java script not working like even i click butons dosn't show numbers

[@Prar2001]

On clicking any button its not appearing on screen please help

[@riadzoabi]

let buttons = document.querySelectorAll('.btn');

[@chiragsolanki1234]

l have typed same code like you but any buttons is not working😔😔😕😕😏😏

[@fidelishub]

same here

[@kehindeomole713]

Thanks so much, I truly appreciate

[@Tech2etc]

Most welcome

[@xenonebanihal3979]

equal button is showing undefined in screen.value pl guide

[@AbhishekMishra-gr5zk]

Thanks you so much this video is really very helpful to practice the js code || Subscribed 😍

[@celiat2945]

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)

[@vimalsinghgaur]

not need to start with function, you simply create variables, create function for buttons, equal & clear. It will work

[@mrrobot4504]

Great video 🙏🙏

[@ajLisama]

Thank you very much for sharing this tutorial. It is well explained, very clear, and informative.

[@Tech2etc]

Thank you so much. Please share this project on your social media. Will appreciate that.

[@JamateSirajiaFaisalabad]

Very Good Tutorial, Thanks

[@CookiesNCreme-ty6wz]

Thank you for this tutorial but how about decimals? When I press decimal more than once more than one decimal appears on screen?

[@vimalsinghgaur]

screen.value = answer.toFixed(2); instead of screen.value = answer;

[@Chandraprakash-kx4ic]

❤Thanku so much Bhai ❤

[@haripalsingh9430]

thanks sir it is easy to use and understand

[@Tech2etc]

You are most welcome. More projects are coming soon. Please share this project on your social media. It will help us. Thanks.

[@shaffizan]

i have question. whats different between background: and background-color:

[@Tech2etc]

"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.

[@onyekastephen2250]

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?

[@Tech2etc]

kindly check the pinned comment

[@kirankumarp4537]

@@Tech2etc same here bro , not showing clicked buttons on screen ...even I altered to .btn-clear & .btn-equal and for buttons .btn

[@laughviral2640]

@@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; }) }); })();

[@khannooru3045]

bhai script file ko connect kero sab bara bar chalega

[@RishabhYadav-ej7cz]

you need to call function by adding the parenthesis in the end (function (){ })()

[@frankkuper9861]

Nice vid, thanks!

[@ExplorerPchand]

thank you so much sir

[@chiamakamiriam3728]

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?

[@vimalsinghgaur]

i faced same problem

[@muratyldrm2298]

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; }); });

[@ryanzogheib7982]

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"?

[@oussamazahid_]

it might one of the Community Material Themes In vscode search for Community Material Theme

[@Poem_AI]

Splendid!

[@aritnath151]

what is that e.target.dataset.num????????????? please somebody explain. where is the num, dataset coming from

[@CommanderKurn]

Typed the style.css .calculator part exactly the same as yours but there is no rectangle box appearing in browser

[@PerdeDor0]

i did exactly same but buttons are not working , i cant click any buttons

[@hanamuse2569]

Me too , what u did?

[@yubasmitaamchi6519]

Me too. Same issue

[@nikhilkolnurkar2310]

Same here 😔, have you solved the issue?

[@thezeeshann]

bro which theme are used for vscode

[@oneness2728]

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.

[@aananmunna]

I have the same problem🙄

[@gaurikasharma8778]

same

[@miklosvasarhelyi8891]

@@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!

[@gaurikasharma8778]

@@miklosvasarhelyi8891 already did it but didn't work

[@Ryu-ky5vt]

@@gaurikasharma8778 you found the solution bro?

[@riturajpathak1905]

Whats the purpose of wrapping everything around the function? Can someone tell me?

[@panzagamesplay902]

thanks i understand the video but the api has being taken down,not working

[@amenetefia3213]

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

[@facundodtd]

everything went well except that the calculator is not functional... when I do a division or something else, the result is undefined. For example "9/3undefined"

[@Tech2etc]

Please recheck your code again. There shouldn't be any problem. But 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.

[@facundodtd]

@@Tech2etc I solved it, thanks for your time dude

[@leoodion1154]

Thanks bro. This helped me as well.

[@codingwithankit7619]

thanks bro

[@satendrayadav901]

@@facundodtd how u solve this problem

[@info.kannada]

i did as per you equal(=) is showing undefined, you did not tell properly in vedio

[@Logicrealtor_dubaipro]

Pls can you make a tutorial video for React Js?

[@Tech2etc]

sure... In future...

[@yokiyoki2538]

bro if number click and add another number click did'nt come continuesoly

[@daveyclysm483]

Thanks pal

[@Tech2etc]

Your welcome

[@emmanueloluwadamilolaajala225]

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

[@royalcoc4817]

try{answer = eval(screen.value); screen.value = answer; Catch(err){ screen.value= "error"; }

[@LVNavyaSree]

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=""; });

[@king201192]

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');

[@yubasmitaamchi6519]

I'm also facing the same issue. buttons.forEach is not a function is showing

[@AFTROGAME]

Please answer or explain why equal is not working, I'm waiting!

[@royalcoc4817]

Use try catch error

[@royalcoc4817]

@@AFTROGAME try{answer = eval(screen.value); screen.value = answer; Catch(err){ screen.value= "error"; }

[@malakdahdah2041]

i have a problem? can you help me? inactive typing on the calculator ?why

[@zionobeloved5777]

Hello please wen ever I click a number in the calculator it loops

[@srimoyeebanerjee2004]

please somebody describe what is the functionality of eval()

[@tanzeelaghafoor5210]

Mery calculator project MN click ki funtionaly q ni add ho rhi???

[@nikeshajalkar6649]

thank you

[@Tech2etc]

Most welcome

[@AnimeXCulture]

I keep getting undefined when I click the equals button?

[@1989SeanSmith]

If you want to round the answer to a particular number of decimal places, you can set the screen value as follows: screen.value = answer.toFixed(3) The 3 is the number of decimal places you would like the result to show. This will avoid any really long answers from going off the side of the screen

[@mohamedahmed-ct9td]

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.

[@Nepc_explains]

Can anyone please write down the first code in that css file that was written down I can't see it clearly

[@umamahaswarikarre8062]

i copied the code as it is but still the buttons are not working. Can any one help?

[@hanamuse2569]

Same ,what u did?

[@ssano-bc2jz]

Same problem 😢

[@thezeeshann]

thanks bro

[@Tech2etc]

Most welcome bro

[@rayhanbhai5503]

sa,e bro tNice tutorials is fire

[@Tech2etc]

Thanks

[@Ankushmehra0411]

how to set input limit ?

[@trngotube7607]

good but this calculator have some error because when we press the opretor more than one time it will add them multi times

[@maxlow8449]

where is the class btn in the CSS

[@keshavsharma7507]

why i am gatting undifinen on screen with digits

[@waqarali191]

js code neither showing any output nor any error

[@suryanathchakrabarti530]

How to use enter keyas a equal button...can someone help please?

[@royalcoc4817]

try{answer = eval(screen.value); screen.value = answer; Catch(err){ screen.value= "error"; }

[@stephengichia154]

if it's not working check if you remerbered to invoke the function

[@syednehalhussain7581]

i just did same as you but still its not working specially equal and clear button ? can you explain tho?

[@syednehalhussain7581]

and when i press equal button its shows undefined so can you please help me out?

[@sanjansvlogs]

If I press 042, the result is 34 .Its showing like this please resolve this.

[@yubasmitaamchi6519]

buttons.forEach is not a function is showing. what to do sir?

[@pranav8534]

@Jatin Vats Ask ChatGPT, and it will help you.

[@noviaamarsheilaa5344]

why it's not working when I click the button and giving a value the undefined? I didn't have error or typo in my code

[@Tech2etc]

If you are facing any problem with buttons. 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.

[@danialkhan4994]

@@Tech2etc i have done but still In clear code is not working C clears.addEventListener('click', function(e) { screen.value=""; }; Please expalin what is this

[@danialkhan4994]

@@Tech2etc when i save the clear code it's cant perform any operation but when i do the code in comment it work Please explain how to fix it