TheDevSpace
CourseCommunityPricingBoilerplates
Sign In
Table of Contents
  • Creating the calculator layout

Building a Calculator with JavaScript

PrevNext

In the previous chapter on HTML and CSS, we created a calculator. It has the right layout and look, but doesn't function. After spending so much time discussing JavaScript, we are finally ready to fix that problem.

calculator

Creating the calculator layout

As usual, let's start by creating the HTML skeleton.

html
1<div class="calculator">
2  <div class="display">0</div>
3  <div class="buttons">
4    <div class="button function">AC</div>
5    <div class="button function">+/-</div>
6    <div class="button function">%</div>
7    <div class="button function">/</div>
8
9    <div class="button number">7</div>
10    <div class="button number">8</div>
11    <div class="button number">9</div>
12    <div class="button function">*</div>
13
14    <div class="button number">4</div>
15    <div class="button number">5</div>
16    <div class="button number">6</div>
17    <div class="button function">-</div>
18
19    <div class="button number">1</div>
20    <div class="button number">2</div>
21    <div class="button number">3</div>
22    <div class="button function">+</div>
23
24    <div class="button number">0</div>
25    <div class="button function">.</div>
26    <div class="button function">=</div>
27  </div>
28</div>
  • .calculator is a container that wraps around the whole calculator.
  • .display shows the user input, as well as the output of the calculation.
  • .buttons contains both the .number buttons (0-9) and the .function buttons (+, -, *...).

And, of course, you must set up the event listeners so that when a button is clicked, the corresponding JavaScript function is executed.

html
1<div class="calculator">
2  <div class="display" id="display">0</div>
3  <div class="buttons">
4    <div class="button function" onclick="clearDisplay()">AC</div>
5    <div class="button function" onclick="toggleSign()">+/-</div>
6    <div class="button function" onclick="percent()">%</div>
7    <div class="button function" onclick="appendOperator('/')">/</div>
8
9    <div class="button number" onclick="appendNumber('7')">7</div>
10    <div class="button number" onclick="appendNumber('8')">8</div>
11    <div class="button number" onclick="appendNumber('9')">9</div>
12    <div class="button function" onclick="appendOperator('*')">*</div>
13
14    <div class="button number" onclick="appendNumber('4')">4</div>
15    <div class="button number" onclick="appendNumber('5')">5</div>
16    <div class="button number" onclick="appendNumber('6')">6</div>
17    <div class="button function" onclick="appendOperator('-')">-</div>
18
19    <div class="button number" onclick="appendNumber('1')">1</div>
20    <div class="button number" onclick="appendNumber('2')">2</div>
21    <div class="button number" onclick="appendNumber('3')">3</div>
22    <div class="button function" onclick="appendOperator('+')">+</div>
23
24    <div class="button number" id="Num0" onclick="appendNumber('0')">0</div>
25    <div class="button function" onclick="appendOperator('.')">.</div>
26    <div class="button function" onclick="calculate()">=</div>
27  </div>
28</div>

Before we start coding, we also need to discuss the general structure of this project.

First of all, there should be a global variable (displayValue) to store the displayed value, as well as a helper function (updateDisplay()) that updates the .display based on the variable. The function selects the display element and updates its content.

Wait, there is more!

Subscribe to access the rest of this lesson. Our course is 70% off for limited time only! Don't miss the opportunity!

Subscribe Now 🎉
PrevNext
📚 Course Outline
  • 1. Fundamentals of Web Development
  • 1. Preparations
  • 2. HTML Elements
  • 3. Query Selectors
  • 4. Colors
  • 5. Text Customization
  • 6. Text Spacing & Alignment
  • 7. Loading Fonts
  • 8. Font Customizations
  • 9. Typography
  • 10. Functions
  • 11. The @ Rules
  • 12. Links
  • 13. Lists
  • 14. Tables
  • 15. Forms
  • 16. Media Files
  • 17. The Box Model
  • 18. Display Types
  • 19. Overflow
  • 20. Object Fit
  • 21. Aspect Ratio
  • 22. Float
  • 23. Position
  • 24. The Column Layout
  • 25. The Grid Layout
  • 26. The Flexbox Layout
  • 27. Justify & Align
  • 28. Z index
  • 29. Visibility
  • 30. Visibility vs. Opacity vs. Hidden
  • 31. Box Shadow
  • 32. Backgrounds
  • 33. Gradient
  • 34. Opacity
  • 35. Blend Modes
  • 36. Filters
  • 37. Transforms
  • 38. Transitions
  • 39. Animations
  • 40. Cursor Customizations
  • 41. Scroll Behavior
  • 42. Units
  • 43. Responsive Design
  • 44. Responsive Media
  • 45. Responsive Text
  • 46. Responsive Layout
  • 47. Organizing CSS
  • 48. Best Practices
  • 49. TailwindCSS
  • 50. Project #1: Recreating YouTube
  • 51. Project #2: Building a Calculator
  • 1. Introduction
  • 2. Setting Up a Dev Environment
  • 3. Basic Syntax
  • 4. Data Types
  • 5. Numbers & BigInt
  • 6. Strings
  • 7. Boolean Values
  • 8. Undefined & Null
  • 9. Type Conversion
  • 10. Arrays
  • 11. Objects
  • 12. Maps & Sets
  • 13. If Statements
  • 14. Switch Statements
  • 15. While Loops
  • 16. For Loops
  • 17. Functions
  • 18. Variables & Scope
  • 19. Rest Parameter & Spread Syntax
  • 20. Pure Functions
  • 21. Higher Order Functions
  • 22. Recursion
  • 23. Methods
  • 24. Constructor Functions
  • 25. Getters & Setters
  • 26. Prototypes
  • 27. The Class Notation
  • 28. Class Inheritance
  • 29. Static Properties
  • 30. Private Properties
  • 31. Object Oriented Programming
  • 32. Error Handling
  • 33. Asynchronous Programming
  • 34. Promise
  • 35. Async & Wait
  • 36. JavaScript Modules
  • 37. The DOM Tree
  • 38. Manipulation the DOM
  • 39. Event Handling
  • 40. Some Common Events
  • 41. Canvas
  • 42. Project #3: Building an Image Slider
  • 43. Project #4: Building a Drawing Board
  • 44. Working with Date
  • 45. The Math Object
  • 46. JSON
  • 47. Regular Expressions
  • 48. Define Patterns with Regex
  • 49. Regex Related Methods
  • 50. Project #5: Building a Calculator
  • 51. Network & HTTP
  • 52. A Basic Web App
  • 53. Express.js
  • 54. Model Layer
  • 55. View Layer
  • 56. Controller Layer
  • 57. Form Handling
  • 58. Uploading Files
  • 59. Project #6: Building a Blog System
  • 60. Loading Static Files
  • 61. Prisma Integration
  • 62. Adding Relations
  • 63. Middleware
  • 64. Browser Data Storage
  • 65. User Authentication
  • 1. Optimize Your Web App
📝 Recent Community Articles
    How to Build Interactive Forms Using HTML and CSSHow to Create a Modern App with Django and VueHow to Send HTTP Requests Using JavaScriptVue.js FundamentalsHow to Reverse a String in JavaScriptHow to Reverse an Array in JavaScriptJavaScript Fundamentals 2024How to Implement Pagination with JavaScriptLaravel FundamentalsDjango Fundamentals
📨 Subscribe to our newsletter

Products

Course
BoilerplatesComing soon
Pricing

Resources

CommunityGitHub
YouTubeComimg soon

Contribute

Write for UsStyle Guide

Legals

Privacy PolicyTerms of ServiceContact Us

Let's get in touch!

@2024 TheDevSpace.io | All Rights Reserved