This project is a modern and interactive calculator built with HTML, CSS, and JavaScript. The application demonstrates essential web development concepts, including layout design, styling, and interactive functionality, making it an excellent example for educational or practical purposes.
- Simple and intuitive design, making it easy to perform basic arithmetic operations.
- Buttons are arranged systematically for quick access.
- The calculator uses a grid layout that adapts to various screen sizes, ensuring usability on both desktop and mobile devices.
- The calculator features a scrolling title using the
<marquee>tag, adding a touch of animation to the interface.
- Each button has hover and active effects for a responsive and interactive user experience.
The HTML provides the structural foundation of the calculator:
- Input Field: Displays the current input and results.
- Buttons: Arranged for numbers, operators, and utility functions like clear and equals.
- Marquee Tag: Displays a dynamic scrolling "Calculator" title.
The design leverages modern CSS features for a polished look:
- Grid Layout: The
grid-template-columnsproperty ensures a neat arrangement of buttons. - Styling Effects:
- Buttons have smooth hover transitions.
- Box shadows and rounded corners create a professional appearance.
- Responsive Design: Ensures the layout scales well across devices.
JavaScript handles all interactivity and calculations:
- Input Handling: Numbers and operators are appended to the display when clicked.
- Evaluation:
- The
eval()function processes the mathematical expression and returns the result. - Example: Input
"2 + 3 * 4"evaluates to14(follows operator precedence).
- The
- Clear Functionality: Clears the input field with a single button click.
- Error Handling: Displays "Arithmetic Error" for invalid expressions.
The calculator’s buttons are arranged using a CSS grid:
grid-template-columns: repeat(4, 1fr)divides the layout into four equal columns.- This ensures consistent alignment of buttons and input fields.
The eval() function dynamically evaluates a string-based mathematical expression. While efficient, it should be used cautiously due to potential security risks in production environments.
Buttons respond to user actions with:
- Hover Effects: Change background color for visual feedback.
- Active States: Simulate button presses with darker shades.
- HTML: For structure and layout.
- CSS: For styling and design.
- JavaScript: For dynamic interactivity and functionality.
-
Clone the repository using the command below:
git clone https://github.com/balajis183/arithmetic-calculator.git
-
Navigate to the project directory:
cd arithmetic-calculator -
Open the
index.htmlfile in any modern web browser. -
Use the calculator to perform basic arithmetic operations.
- 4a. Use the buttons to enter numbers and operators.
- 4b. Click
=to get the result, orCto clear the input.
- Improved Theming: Add light and dark mode options.
- Keyboard Support: Allow users to use their keyboard for inputs.
- Advanced Features: Include scientific calculator functions like square roots and percentages.
- Modern Animation: Replace the
<marquee>tag with CSS animations for a more modern look.
This project highlights the core concepts of web development by combining structure (HTML), style (CSS), and interactivity (JavaScript). It is a great starting point for beginners and a useful reference for developers looking to build functional web applications.
Feel free to connect with me:
- Gmail: sbalaji2000s@gmail.com
- GitHub: https://github.com/balajis183