Calculator App

Intro

Let's create a Calculator App! As your first big project, there will be a lot of detailed instructions that you can follow along. As you progress, you will be given fewer and fewer instructions (but more freedom) to work with until you can make an app just from a simple idea!

Demo: https://coderschool-calculator.netlify.app/

Try the calculator below, then build your own following the instructions.

Requirement

UX/UI

• Must style to specifications (customization encouraged).
• The site must be responsive.

Functionality

• Have at least the clear, =, + and - functions.

Optional

• Add the ability to chain operations (e.g. 1 + 2 + 3 - 4) and display the result after each operation (check the demo).
• Make the calculator work properly when you click any operator twice (or more). For example, you click 1 then +, then 2, then +, then + again.
• Soft reset the calculator when there's an error (e.g. NaN) so that we can use the calculator again by clicking any number without having to refresh the page.
• Make the DEL button work as expected.
• Remove leading zeros.

Submission

You can work on an online editor like CodeSandbox or work locally with Visual Studio Code, then push it to Github. Then submit the project link to CoderSchool.

UI: Specifications

Download the assets here (if provided). We will attempt to follow a design by a UX/UI designer.

Each designer may have a different way of presenting the mockup and specifications to you. Sometimes, the design may not be very clear, and as a web developer, we need to be flexible and work with what's given to us. For this exercise, feel free to apply the specifications in your own interpretation.

Specifications:

UI: Page

First, let's create the basic structure of your webpage.

1. Create a div with id="calculator" in the body of your HTML.
2. Imagine that this div is your final calculator. Give it a background color and a fixed width and height so we can get a feel of the design. Give the body a background color too. You can (and should) use the colors provided in the specifications.

Add box-sizing: border-box to every element to avoid having to deal with overlapping elements and breaking margin and padding:

* {
  box-sizing: border-box;
}

body {
  background-color: #29262c;
}

#calculator {
  width: 400px;
  height: 400px;
  background-color: #967c6d;
}

3. Center the calculator in the middle of the page. Set the body height to 100%. Set the html height to 100% too. Now you can center the calculator vertically and horizontally with flexbox.
4. Get rid of the scrollbar (check what element is pushing the body to exceed the height of the browser).

UI: Responsiveness

If you set a fixed width of 400px, on mobile devices with a screen size of less than 400px, there will be a vertical scroll. Use max-width and width: 100% to make the calculator responsive, and add some margin.

#calculator {
  width: 100%;
  max-width: 400px;
  /* remove fixed height when you add the display and buttons */
}

UI: Calculator Buttons + Display

Divide the buttons into rows. Each row consists of a maximum of 4 buttons.

• Use flexbox so each button occupies 25% width of the button area (including margin/padding).
• Hint: Use flex-basis. As flex-basis doesn't take margin into account, it's best to wrap each button in a button-wrapper div so the wrapper is exactly 25%.

Example structure:

<div class="row">
  <div class="button-wrapper"><button class="button">7</button></div>
  <div class="button-wrapper"><button class="button">8</button></div>
  <div class="button-wrapper"><button class="button">9</button></div>
  <div class="button-wrapper"><button class="button">DEL</button></div>
</div>

• Add a div with id="display" where you will display the number (use a placeholder for now).
• Remove the fixed height from the calculator.
• Style the calculator to match the design.

JavaScript: Basic Understanding

To do an operation, you need to:

1. Set the first number
2. Set the operator (via the +, -, ×, / buttons)
3. Set the second number
4. Tell the calculator to calculate (via the = button)

Note: Using eval() is not allowed in this project. Learn why.

JavaScript: Change the Display with Button Clicks

Get the display element by its id:

let display = document.getElementById("display");

Write a function that changes the display when a number button is clicked. When the user clicks 1 then 2, they should see 12, not 2 replacing 1 — so append the new digit to the current value.

JavaScript: Variables

You need to store the first number, the operator, and the second number:

let num1 = "";
let num2 = "";
let operator = null;

num1 and num2 are strings so that when the user inputs 1 then 2, you get "12" not 3.

• When the user has not selected an operator yet, append digits to num1 and show it on the display.
• When the user has selected an operator, append digits to num2 and show it on the display.
• Attach a function to the + button (and other operators) that sets operator = "add" (or your chosen value).

JavaScript: Calculate Based on Variables

Create a function that runs when the user clicks =. Check what the operator is, then set display.innerHTML (or display.textContent) to the result of that operation. Use if/else or switch — do not use eval().

That's it! You've finished the basic calculator app. Check the requirement list and make sure to complete every required feature. Try to finish the optional ones too — pushing to the limit is how you improve fast.