This is a realistic calculator project implemented using HTML, CSS, and JavaScript. The calculator supports basic arithmetic operations and has a user-friendly interface with button click and keyboard input functionalities.
- Basic Arithmetic Operations: Supports addition, subtraction, multiplication, and division.
- Percentage Calculation: Easily calculate percentages.
- All Clear (AC): Reset the calculator to its initial state.
- Backspace: Delete the last entered digit.
- Decimal Point: Support for floating-point arithmetic.
- Keyboard Support: Allows input using the keyboard for digits, operators, and special functions like Enter, Escape, and Backspace.
- Responsive Design: Optimized for both desktop and mobile devices.
- Realistic Button Press Effect: Buttons show an active state when pressed, either by mouse click or keyboard input.
Check out the live demo of the calculator here.
-
Using Mouse:
- Click on the calculator buttons to perform calculations.
- Click the
AC
button to clear the display. - Click the
←
button to delete the last entered digit.
-
Using Keyboard:
- Use the number keys (0-9) to input digits.
- Use the
+
,-
,*
,/
, and%
keys to perform operations. - Press
Enter
or=
to calculate the result. - Press
Escape
to reset the calculator. - Press
Backspace
to delete the last entered digit. - Press
.
to enter a decimal point.
- index.html: The main HTML file that contains the structure of the calculator.
- styles.css: The CSS file that styles the calculator and its components.
- script.js: The JavaScript file that handles the calculator's logic and functionalities.
- HTML: Defines the layout of the calculator, including buttons and display screen.
- CSS: Provides styling for the calculator, including responsive design and button press effects.
- JavaScript: Implements the calculator logic, handles button clicks, and adds keyboard support.
To run this project locally:
-
Clone the repository:
git clone https://github.com/your-username/realistic-calculator.git
-
Navigate to the project directory: cd your-repo-name