https://github.com/krishna-mfai-ad/calculator-web-app

The Calculator-Web-App repository contains a simple calculator application built with HTML, CSS, and JavaScript. It features basic arithmetic operations (addition, subtraction, multiplication, division), percentage calculation, and clear/delete functions. The design is responsive, suitable for both desktop and mobile devices. The
https://github.com/krishna-mfai-ad/calculator-web-app

css css-flexbox html javascript

Last synced: 8 days ago
JSON representation

The Calculator-Web-App repository contains a simple calculator application built with HTML, CSS, and JavaScript. It features basic arithmetic operations (addition, subtraction, multiplication, division), percentage calculation, and clear/delete functions. The design is responsive, suitable for both desktop and mobile devices. The

• Host: GitHub
• URL: https://github.com/krishna-mfai-ad/calculator-web-app
• Owner: krishna-mfai-ad
• Created: 2024-04-24T05:48:58.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-05-15T17:12:27.000Z (9 months ago)
• Last Synced: 2024-12-02T06:32:13.318Z (2 months ago)
• Topics: css, css-flexbox, html, javascript
• Language: CSS
• Homepage:
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Calculator-Web-App

## Simple Calculator App

This is a simple calculator application built using HTML, CSS, and JavaScript. The calculator has a clean and modern design, with a black and white color scheme and rounded buttons.

### Features

- Basic arithmetic operations: addition, subtraction, multiplication, and division

- Percentage calculation

- Clear and delete functions

- Responsive design that works well on both desktop and mobile devices

### How to Use

1. Open the HTML file in a web browser.

2. Use the on-screen buttons to enter numbers and perform calculations.

3. Click the "AC" button to clear the input field.

4. Click the "DEL" button to delete the last entered character.

5. Click the "=" button to get the result of the calculation.

### Code Structure

The code is divided into two main parts:

1. **HTML Structure**:

   - The main container div with the class "container"

   - The calculator div with the class "calsi"

   - The input field with the id "box"

   - The buttons for the calculator functions, organized into different layers

2. **CSS Styling**:

   - Importing the "Montserrat" font from Google Fonts

   - Styling the body, html, and container elements

   - Defining the styles for the calculator container, including the input field and the button layers

   - Applying specific styles for the different button layers, such as the corner buttons and the zero button

3. **JavaScript Functionality**:

   - Selecting the input field with the id "box"

   - Defining the `display()` function to add the clicked value to the input field

   - Defining the `ac()` function to clear the input field

   - Defining the `equal()` function to evaluate the expression in the input field and display the result

   - Defining the `del()` function to delete the last character from the input field

### Future Improvements

- Add keyboard support for the calculator

- Implement more advanced mathematical functions, such as square root, exponents, and trigonometric functions

- Add a history feature to keep track of previous calculations

- Improve the overall design and user experience