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:
https://github.com/Ade-mir/calculator...
✅ Deployed site:
https://ade-mir.github.io/calculator-...
✅ Tools:
GitHub: https://github.com/
GitHub Desktop: https://desktop.github.com/
VS Code: https://code.visualstudio.com/
GitHub pages: https://pages.github.com/
JS reference website: https://developer.mozilla.org/
X symbol: https://symbl.cc/en/00D7/
Backspace symbol: https://symbl.cc/en/232B/
▶️ Install VS Code
• How to Install and Setup VS Code on Mac
▶️ Setup Prettier Code Formatter
• How to use Prettier in VS Code - Code...
▶️ Build your next awesome project
https://www.tubebuddy.com/quicknav/la...
⏯️ 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:
https://www.figma.com/community/file/...
Video assets by Envato Elements.
