Skip to content

alnomancs/calculator-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Simple Calculator

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.

Features

  • 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.

Live Demo

Check out the live demo of the calculator here.

How to Use

  1. 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.
  2. 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.

Project Structure

  • 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.

Code Highlights

  • 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.

Installation

To run this project locally:

  1. Clone the repository:

    git clone https://github.com/your-username/realistic-calculator.git
    
  2. Navigate to the project directory: cd your-repo-name