Build a Calculator App

🧮 What Makes a Calculator Work?

Think about a real physical calculator:

• You press buttons (numbers and operations)
• Numbers appear on a screen
• When you press "=", it calculates the answer
• The result appears on the screen

We're going to build the EXACT same thing, but on a webpage!

🏗️ The Three Essential Components

Every calculator needs these three parts working together:

1. The Display (Output Screen)

• Shows what the user has typed
• Shows the calculation result
• Like the LCD screen on a physical calculator
• We'll use an HTML <input> element set to readonly

2. The Buttons (Input Interface)

• Number buttons: 0-9 and decimal point
• Operation buttons: +, -, *, / (add, subtract, multiply, divide)
• Function buttons: C (clear), = (calculate result)
• We'll use HTML <button> elements arranged in a grid

3. The Logic (Brain)

• JavaScript functions that run when buttons are clicked
• Stores the current calculation as a string
• Evaluates the mathematical expression when "=" is pressed
• Updates the display with results

💡 How Calculator Logic Works - Behind the Scenes

When you type "5 + 3 =" on a calculator, here's what happens:

1. You press "5" → Display shows "5"
2. You press "+" → Display shows "5+"
3. You press "3" → Display shows "5+3"
4. You press "=" → Calculator evaluates the expression and shows "8"

The key insight: We build the calculation as a TEXT STRING first, then evaluate it!

// What the display contains at each step:
Step 1: "5"
Step 2: "5+"
Step 3: "5+3"
Step 4: Evaluate "5+3" → Result is 8

🎨 CSS Grid Layout - Arranging Buttons

How do we arrange buttons in a grid pattern?

We'll use CSS Grid, which is like creating a spreadsheet layout:

Grid Template Columns:

display: grid;
grid-template-columns: repeat(4, 1fr);

What this means:

• display: grid; = "Use grid layout"
• repeat(4, 1fr) = "Create 4 equal-width columns"
• 1fr = "1 fraction" (each column gets equal space)

Visual representation:

Column1  Column2  Column3  Column4
   [7]      [8]      [9]      [/]
   [4]      [5]      [6]      [*]
   [1]      [2]      [3]      [-]
   [0]      [.]      [=]      [+]

Items automatically flow into the grid left-to-right, top-to-bottom!

⚙️ Understanding JavaScript Event Handlers

How do we make buttons DO something when clicked?

We use the onclick attribute:

<button onclick="appendToDisplay('5')">5</button>

Breaking it down:

• onclick = "When this button is clicked..."
• appendToDisplay = Name of the JavaScript function to run
• ('5') = Pass the value '5' to the function

When user clicks the button:

1. Browser detects the click event
2. Browser looks for the onclick attribute
3. Browser runs appendToDisplay('5')
4. Our function adds '5' to the display!

🔍 Understanding eval() - The Calculation Engine

How does JavaScript calculate "5+3*2"?

We use the eval() function:

const expression = "5+3*2";
const result = eval(expression);
console.log(result); // Shows: 11

What eval() does:

• Takes a STRING of JavaScript code
• Executes it as if you typed it directly
• Returns the result
• Follows proper math order of operations (PEMDAS)

Examples:

• eval("2+2") = 4
• eval("10-5") = 5
• eval("3*4") = 12
• eval("10/2") = 5
• eval("5+3*2") = 11 (multiplication happens first!)

⚠️ Important note: In real-world apps, eval() can be dangerous with user input from untrusted sources. But in our calculator, WE control what gets evaluated (only numbers and operators), so it's safe!

🎯 Readonly Inputs - Why the Display Can't Be Typed Into

Why use readonly?

<input type="text" id="display" value="0" readonly>

The readonly attribute means:

• Users can see the content
• Users can select/copy the text
• But users CAN'T type directly into it
• Only our JavaScript code can change the value

Why is this important?

• On a real calculator, you can't write on the screen - you have to use the buttons!
• It prevents users from typing invalid characters
• It ensures our code has complete control over the display

🛠️ The Core JavaScript Functions We'll Build

appendToDisplay(value)

• Adds a number or operator to the display
• Example: If display shows "5" and user clicks "3", it becomes "53"
• Used by all number and operator buttons

clearDisplay()

• Resets the display back to "0"
• Like the "C" button on a physical calculator
• Clears any errors

calculate()

• Takes the current display value
• Uses eval() to calculate the result
• Shows the result on the display
• Handles errors if the expression is invalid