https://github.com/top-submissions/foundations-calculator
https://github.com/top-submissions/foundations-calculator
arithmetic beginner-project calculator clean-design css dom-manipulation event-listeners foundations-path frontend functional-programming hover-effects html input-validation interactive-ui javascript mini-project odin-project responsive-design student-project web-development
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/top-submissions/foundations-calculator
- Owner: top-submissions
- Created: 2025-07-19T03:05:11.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-12-24T23:24:36.000Z (6 months ago)
- Last Synced: 2026-04-03T13:54:15.755Z (2 months ago)
- Topics: arithmetic, beginner-project, calculator, clean-design, css, dom-manipulation, event-listeners, foundations-path, frontend, functional-programming, hover-effects, html, input-validation, interactive-ui, javascript, mini-project, odin-project, responsive-design, student-project, web-development
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Foundations Calculator
A **calculator project** built with **HTML, CSS, and JavaScript**
as part of **The Odin Project – Foundations Path**.
This project demonstrates building a functional calculator interface with basic arithmetic operations, a responsive design, and clean, interactive UI.
---
## 🚀 Live Demo
👉 https://top-submissions.github.io/foundations-calculator/
---
## 📋 Project Overview
The calculator supports:
- Basic arithmetic operations: addition, subtraction, multiplication, division
- Special buttons: clear, negate, decimal, backspace
- Interactive button feedback and styling
- Real-time input display
The project focuses on DOM manipulation, event handling, and JavaScript logic implementation.
---
## ✨ Features
- Functional calculator with all standard operations
- Interactive buttons with hover and active states
- Input validation to prevent invalid operations (e.g., division by zero)
- Responsive design for desktop and mobile
- Simple, clean interface using CSS variables for consistent styling
---
## 🛠 Technologies Used
- **HTML5:** Semantic markup for calculator structure
- **CSS3:** Styling, responsive layout, variables, and hover effects
- **JavaScript (ES6):** DOM manipulation, event listeners, and calculation logic
---
## 📖 How It Works
* Each button triggers an event listener in `script.js`
* Number buttons append digits to the input display
* Operator buttons handle calculations and store operands
* Special buttons handle clear, negate, decimal, and backspace
* The script ensures valid operations and updates the display in real-time
---
## 📚 Learning Outcomes
* DOM manipulation and event handling in vanilla JavaScript
* Structuring HTML and CSS for a calculator interface
* Implementing responsive design
* Using CSS variables and consistent styling
* Debugging and fixing logical errors in JavaScript
---
## 👤 Author
**MatimotTheTimoters**
GitHub: [https://github.com/Chonky_Seal](https://github.com/Chonky_Seal)