https://github.com/shravandalavi/calculator
Explore this repository for a sleek web-based calculator built with HTML, CSS, and JavaScript. It features a user-friendly interface and efficient computation logic, perfect for quick calculations or educational purposes.
https://github.com/shravandalavi/calculator
calculator calculator-css calculator-javascript htmlcssjs javascript-calculator web-development-project webcalculator
Last synced: 4 months ago
JSON representation
Explore this repository for a sleek web-based calculator built with HTML, CSS, and JavaScript. It features a user-friendly interface and efficient computation logic, perfect for quick calculations or educational purposes.
- Host: GitHub
- URL: https://github.com/shravandalavi/calculator
- Owner: ShravanDalavi
- License: mit
- Created: 2024-06-13T11:26:53.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-03T18:34:02.000Z (10 months ago)
- Last Synced: 2024-08-03T19:42:46.213Z (10 months ago)
- Topics: calculator, calculator-css, calculator-javascript, htmlcssjs, javascript-calculator, web-development-project, webcalculator
- Language: CSS
- Homepage:
- Size: 53.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Calculator
A Pen created on CodePen.io. Original URL: [Link to demo](https://codepen.io/Shravan-Dalavi/pen/ZEZNQPo).
# Introduction
The project is a simple yet functional web-based calculator. It features basic arithmetic operations and a dark mode toggle. The system consists of three main files: index.html for the structure, style.css for the styling, and script.js for the interactive functionality.
# System Architecture
The architecture of this system is based on the classic Model-View-Controller (MVC) design pattern:
• Model: The data and business logic, which in this case are minimal as the operations are simple arithmetic evaluations.
• View: The user interface, defined in index.html and styled by style.css.
• Controller: The interaction logic, including the dark mode toggling, handled by script.js.
# Features
1. Basic Arithmetic Operations: The calculator supports addition, subtraction, multiplication, and division.
2. Dark Mode Toggle: Users can switch between dark and light modes.
3. Responsive Design: The calculator layout adjusts to different screen sizes.
4. Interactive UI: Buttons highlight when clicked, providing a tactile feel.
# Integration with Calculator
The system integrates the calculator functionalities within a responsive and interactive web page. The HTML structure ensures all elements are in place, CSS provides styling for an enhanced user experience, and JavaScript adds interactivity.
# Conclusion
This project demonstrates the creation of a functional web-based calculator using HTML, CSS, and JavaScript. It offers basic arithmetic operations and a dark mode feature, ensuring a good user experience with a responsive design.
## Licence 📜
You may use this tutorial freely at your own risk. See [LICENSE](./LICENSE).
## Contributors ✨
- Shravan Dalavi
- Contact: [email protected]
- GitHub: [Profile](https://github.com/ShravanDalavi)
- Ashwini Sonawane
- Contact: [email protected]
- GitHub: [Profile](https://github.com/SonawaneAshwini)
**If you like this tutorial, please [give it a ⭐ star](https://github.com/ShravanDalavi/calculator).**