Calculator Project
Build a calculator with basic functions: addition, subtraction, multiplication, and division. This project sharpens your skills in DOM manipulation, JavaScript logic, and CSS design. You will be building this project as part of our JavaScript Course.
Resources: No external resources required.
Things you need to know: Box shadow, Background Color, Browser Events, DOM Manipulation.
Task 1
Set initial display text to 0, which will update as numbers are entered or calculations are performed.
Below this, add:
All the number buttons from 1 to 9, along with
0A decimal point (
.)An equals button (
=)
Task 2
Add a dedicated section for calculator operations:
Include buttons for addition (
+), subtraction (-), multiplication (×), and division (÷).
Also, add extra action buttons for:
Clear (
C) to reset calculations.Delete (
Del) to remove the last digit entered.Remainder (
%) for modulus operations.Exponent (
Exp) for raising a number to a power.
Arrange buttons in the layout as shown in the provided image.
Next, add another section for the calculator actions, like add (+), subtract (-), multiply (×), and divide (÷).
Also, include buttons for other actions like clear (C), delete (Del), calculating the remainder (%) and exponent (Exp).
Maintain the same order as shown in the given image.
Task 3
Set the
`Helvetica`font for the entire page.Set the background color to
#ecf0f1, and use#2d2d2dfor the text.Center the calculator on the page
Give the calculator a
snowbackground color, rounded corners, and a slight shadow.Make the result display area a bordered box that aligns text to the right so numbers appear neatly.
Each button should have padding, a slight shadow, and rounded corners.
Make the number buttons
lightgrayand the action buttons (like +, -, C)palevioletred.When hovering over buttons, make them slightly larger, and when clicked, make them shrink slightly.
Task 4
Convert the buttons into a 5 x 4 style grid as per the given image.
Make sure each button aligns neatly and is spaced evenly.
Task 5
When a number button is clicked, display the number in the result area.
If the current display is
0or if a prior calculation just completed, replace the display with the new number.If the display already shows numbers and the user continues typing, append new numbers to the current input.
Task 6
Handle operation button clicks (+, -, ×, ÷, .):
When an operation button is clicked, store the first number and selected operation.
Clear the display area so the user can enter the second number for the operation.
Task 7
Set up functionality for the equals button (=):
When pressed, perform the calculation based on the selected operation.
Display the result in the display area.
Task 8
Handle special actions for specific buttons:
Clear (
C): Reset the result display to0.Delete (
Del): Remove the last digit from the current input in the result area.Exponent (
Exp): Raise the first number to the power of the second number entered.Remainder (
%): Calculate and display the remainder when dividing the first number by the second.
More projects
These are some of the projects you'll build while learning.
