https://github.com/nguyenm-giau/javascript-calculator

A sleek and functional calculator using HTML, CSS, and JavaScript.
https://github.com/nguyenm-giau/javascript-calculator

calculator calculator-javascript calculator-js css html javascript

Last synced: 24 days ago
JSON representation

A sleek and functional calculator using HTML, CSS, and JavaScript.

• Host: GitHub
• URL: https://github.com/nguyenm-giau/javascript-calculator
• Owner: nguyenm-giau
• License: mit
• Created: 2024-09-18T16:46:47.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-19T13:09:32.000Z (3 months ago)
• Last Synced: 2024-11-15T13:28:24.403Z (about 1 month ago)
• Topics: calculator, calculator-javascript, calculator-js, css, html, javascript
• Language: JavaScript
• Homepage: https://nguyenm-giau.github.io/JavaScript-Calculator/
• Size: 19.5 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# JavaScript Calculator

[English](./README.md) | [Tiếng Việt](./README_vi.md)

---

Welcome to the **JavaScript Calculator** project! This is a simple and functional calculator built using HTML, CSS, and JavaScript. It supports basic arithmetic operations, decimal inputs, and keyboard interactions for a smooth user experience.

![Calculator Preview](https://imgur.com/aJk1heK.gif) 

## Features

- **Basic Operations**: Addition, Subtraction, Multiplication, and Division

- **Keyboard Support**: Use both mouse and keyboard to interact with the calculator

- **Floating Point Calculations**: Supports decimal calculations

- **Clear and Reset Functions**: Easily manage your calculations

- **Press Styles**: Interactive button press effect for a better user experience

- **Responsive Design**: Works seamlessly on different screen sizes

## Demo

You can try the live demo of the calculator [here](https://nguyenm-giau.github.io/JavaScript-Calculator/).

## Technologies Used

- **HTML5**: For the basic structure of the calculator

- **CSS3**: For styling and creating a responsive layout

- **JavaScript (ES6)**: To handle the calculator logic and operations

## Setup & Installation

To run this project locally, follow these steps:

1. Clone the repository:

   ```bash

   git clone https://github.com/nguyenm-giau/JavaScript-Calculator.git

   ```

2. Open `index.html` in your browser to see the calculator in action.

## Usage

- **Mouse Input**: Click the buttons to perform calculations.

- **Keyboard Input**: Use the following keys:

  - Numbers (0-9) for input

  - `+`, `-`, `*`, `/` for operations

  - `Enter` to calculate

  - `Backspace` to delete the last digit

  - `Escape` to clear the input

## Lessons Learned

During the development of this project, I learned:

- Managing state in JavaScript using objects.

- Handling floating-point precision in mathematical operations.

- Implementing keyboard interactions for web applications.

## Icons Used

- **[Icons8](https://icons8.com)**

- **[Flaticon](https://www.flaticon.com)**

## Contributing

Contributions are welcome! If you'd like to contribute to the project, feel free to fork the repository and submit a pull request.