What you will use in this project
- CSS Grid for button layouts
- Stateful expression evaluation
- Event delegation
- Touch-friendly button sizing
Web Project: Mobile Calculator
Complete each step in the editor and watch the result as your page takes shape.
Build Mobile Calculator, step-by-step
Create a polished mobile calculator app.
Add advanced functions and a history list.
How it works
- 1 Follow the steps on the left. Each dot in the stepper bar is one focused chunk of work. Read the instructions, the “What to do” checklist, and any hints.
- 2 Write your code on the right. The editor is yours. Files auto-save as you type. Use the Preview tab to see your work in action.
-
3
Click
Check codewhen you’re ready. We grade your work against the step’s rubric and tell you exactly what passed and what still needs work. - 4 Pass a step to move on. Build the project cumulatively. Pass every step to complete it and earn the full XP.
How it’s graded
This project is broken into 9 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +100 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Markup shell Display, keypad, history present | 15 pts |
| 2 | Digit buttons Ten digit buttons present | 15 pts |
| 3 |
Operator buttons
|
15 pts |
| 4 | Keypad grid Keypad laid out with grid or flex | 5 pts |
| 5 | Wire digit clicks Click handler updates the display | 15 pts |
| 6 | Operators and clear Operator buttons wired | 5 pts |
| 7 | Evaluate on equals Code handles arithmetic | 10 pts |
| 8 | Advanced ops Percent and sqrt implemented | 10 pts |
| 9 | Show history History rendered | 10 pts |
