JavaScript Project | Build Simple Calculator With JavaScript HTML CSS

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👇

SUPPORT ME:

How To Make MONEY Online - My 4 Favorite Tricks:
🕔 Next trick will be revealed at the right time.

Free Course to Improve SKILLS & EARN:

Important Links:

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👇
===============================

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

[Techetc]

Build Simple Calculator With JavaScript HTML CSS | JavaScript Project
- Need Your Support Guys. Help Me To Reach 100K SUBSCRIBERS 🔥
More JavaScript Projects:

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.

[ratanmanjari]

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.

[nofriyan]

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' >=</button>
.... class = 'btn-grey btn-clear' >C</button>

Idk what's wrong with explanation code, hope you guys can explain to me..



*sorry for bad english

[acebailey]

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.

[nostalgiagameplay]

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

[hithardhksvln]

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

[Lashistoriasdelilith]

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

[slkzgov]

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.

[trk]

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

[respectgmechager]

use this if u have problem in equals and clear button

<button class=" btn-equal" type="button">=</button>
<button class="btn-clear" type="button">C</button>

[vikrambam]

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.

[-prabalarora]

On clicking any button its not appearing on screen please help

[nkdsnk]

So simple and clear instructions. Very good job and thank you! Subscribed!

[victoriaazola]

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

[talibhusain]

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

[sajjadlatafaty]

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

[chiragsolanki]

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

[ChefnCoder]

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

[better-health-now]

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

[ourmaths]

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