Build A Calculator With JavaScript Tutorial

We are creating the sleekest calculator on YouTube using vanilla HTML, CSS and JavaScript. This is the perfect project to practice your logical programming skills and showcase them on your portfolio, as we will be using many cool JavaScript methods and functions to make this amazing calculator work!

All the code is explained in detail, step by step, from the HTML syntax to the modern styling and hover effects to the intricate logical functions we use.

All the buttons in this calculator work, we can:
- Add, subtract, multiply, divide.
- We can clear to reset the calculator.
- We can delete the last character in our expression.
- We can add decimals.
- We can do percentage calculations.
- And we can toggle the number to be positive or negative.

You will learn a lot of JavaScript logic in this video like:
- Various string methods.
- isNaN and isFinite functions.
- Event listeners.
- Regular expressions.
- Math and Number objects.
- Logical and comparison operators.
- Eval function.

✅ Finished code:

✅ Deployed site:

✅ Tools:

▶️ Install VS Code

▶️ Setup Prettier Code Formatter

▶️ Build your next awesome project

⏯️ Chapters:
00:00 What we are building - Build A Calculator With JavaScript Tutorial
02:05 Create a GitHub account.
02:47 Set up GitHub Desktop.
03:13 Download Visual Studio Code.
03:53 Set up our project.
05:41 Install Visual Studio Code extensions.
08:49 Create our HTML file.
03:53 Set up our project.
05:41 Install Visual Studio Code extensions.
08:49 Adding HTML.
19:00 Add expression, result and buttons to HTML.
30:18 Adding CSS.
35:15 CSS - Section.
36:43 CSS - Output.
38:06 CSS - Buttons.
40:49 CSS - Button colours.
44:43 Adding JavaScript.
44:57 JavaScript - DOM.
48:16 JavaScript - Expression & result variable.
49:04 JavaScript - buttonClick() function.
53:11 JavaScript - Switch case.
56:27 JavaScript - addValue() function.
58:17 JavaScript - updateDisplay() function.
59:58 JavaScript - clear() function.
01:01:18 JavaScript - backspace() function.
01:05:24 JavaScript - add the result as a starting point.
01:09:39 JavaScript - isLastCharOperator() function.
01:12:46 JavaScript - startFromResult() function.
01:13:26 JavaScript - submit() function.
01:14:42 JavaScript - evaluateExpression() function.
01:20:50 JavaScript - negate() function.
01:25:52 JavaScript - percentage() function.
01:29:21 JavaScript - decimal() function.
01:40:58 Deploy with GitHub Pages.

⭐️ Figma design by Gabriele Malaspina:

Video assets by Envato Elements.

[howtobecomeadeveloper]

Which video would you like to see next? 👇

[himanshupratap]

bro you're best please give us more projects tutorial. don't lose hope you're giving ur best

[arjunthazhatha]

U R THE BEST, U DESERVE EVEN MORE SUBSCRIBERS.

[samueldevine]

Great video, thank you! The only thing I was a bit confused by is your decimal functionality at the end.

I think your search(regex) on line 63 is actually returning the FIRST operator, and your "lastNumberIndex" is actually the last operator index. I left the addValue() function the way it was with just the single line and my decimal function looks like this, which is a bit cleaner and still seems to work. But I'm new to JS; am I missing something here?

function decimal() {
lastOperatorIndex = Math.max(
expression.lastIndexOf("+"),
expression.lastIndexOf("-"),
expression.lastIndexOf("*"),
expression.lastIndexOf("/")
);
if (
!expression.includes(".") ||
expression.lastIndexOf(".") < lastOperatorIndex
) {
expression += ".";
}
}

[seetsiganeth]

Hello, Sir. I'd like to know how you can change NaN to Error message because every time I pick the % without pressing a number, I want it to display an error message rather than NaN, as I did my best.

[rohit_jshi]

Make a full stack MERN project next :)

[noteyalab]

your decimal function is mental.

this is better:

function addValue(value) {
if (value === '.') {
// Split the expression by operators to get the current number segment
const segments = expression.split(/[+\-*/]/);
const lastSegment = segments[segments.length - 1];

// Only add a decimal if the current segment doesn't already contain one
if (!lastSegment.includes('.')) {
expression += value;
}
} else {
expression += value;
}
}

[function]

Next video ecommerce with add to cart feature and total amount please

[xorirobinson]

What is the difference with the script being in the head or the body? is it best to put it in the head? Also thank you for these videos. they help a lot!

[Ro_V_oR]

Just asking, does netlify still work or is github pages the better for deploying websites?

[chaturbhuj]

i do appreciate if we do some projects in react 😊

[tharindurukshan]

Can you create a react js portfolio with advanced animations for next video?