We Stand With Palestine

Back to All Challenges

Calculator App

Welcome to the Calculator App challenge! In this page, you can navigate between the different tasks of your challenge and submit your solution for evaluation.

Calculator App

Build a fully functional calculator with basic arithmetic operations.

Instructions:

  1. Create a layout with a display screen and a grid of buttons.
  2. Add buttons for numbers 0-9, decimal point (.), and arithmetic operators (+, -, *, /).
  3. Include distinct buttons for 'Clear' (C) and 'Delete' (DEL) functions.

IMPORTANT: You must use the following selectors for evaluation purposes. Failing to use these exact names will cause tests to fail:

  • Display element: #display (must use this ID)
  • Number buttons: button[data-value='0'] to button[data-value='9'] (must use data attributes)
  • Operators: button[data-value='+'], button[data-value='-'], button[data-value='×'], button[data-value='÷']
  • Equals button: #equals (must use this ID)
  • Clear button: #clear (must use this ID)
  • Delete button: #delete (must use this ID)
  • Main wrapper: .container (must use this class for pixel-perfect evaluation)
  1. Implement the logic to perform calculations correctly.
  2. Ensure the 'Delete' button removes the last character and 'Clear' resets the calculator.
Figma Design

Upload Your Web Page Files (Upload a Folder)

Your Uploaded Page

Upload files to see your page here.

Original Task Page

Evaluation Results

Load a task and upload your files to see evaluation results.