Skip to content

Added InteractiveCalculator Project under Frontend/MiniProjects #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tejas-Santosh-Nalawade merged 1 commit into from
Oct 22, 2025
Merged

Added InteractiveCalculator Project under Frontend/MiniProjects #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions Domains/Frontend/MiniProjects/InteractiveCalculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# 🧮 Interactive Calculator

**Contributor:** [Tanmay-Kad](https://github.com/Tanmay-Kad)

---

## 📝 Description

The **Interactive Calculator** is a simple, modern, and responsive web application built using **HTML**, **CSS**, and **JavaScript**.
It allows users to perform basic arithmetic operations such as addition, subtraction, multiplication, and division with a clean and intuitive user interface.

This project demonstrates **JavaScript DOM manipulation**, **event handling**, and **UI design skills**, making it an excellent beginner-level frontend project.

---

## 🚀 Features

- **Basic Arithmetic Operations:** Perform addition, subtraction, multiplication, division, and percentage calculations.
- **Clear & Delete Functions:** Quickly clear the screen or delete the last entered digit.
- **Error Handling:** Displays “Error” for invalid inputs.
- **Responsive UI:** Works seamlessly on desktop and mobile devices.
- **Stylish Design:** Minimal, dark-themed interface with button hover effects.

---

## 🛠️ Technologies Used

- **HTML5** – For webpage structure
- **CSS3** – For styling and layout (modern, responsive design)
- **JavaScript (ES6+)** – For calculator logic and interactivity

---
41 changes: 41 additions & 0 deletions Domains/Frontend/MiniProjects/InteractiveCalculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="deleteLast()">⌫</button>
<button class="btn" onclick="appendValue('%')">%</button>
<button class="btn" onclick="appendValue('/')">÷</button>

<button class="btn" onclick="appendValue('7')">7</button>
<button class="btn" onclick="appendValue('8')">8</button>
<button class="btn" onclick="appendValue('9')">9</button>
<button class="btn" onclick="appendValue('*')">×</button>

<button class="btn" onclick="appendValue('4')">4</button>
<button class="btn" onclick="appendValue('5')">5</button>
<button class="btn" onclick="appendValue('6')">6</button>
<button class="btn" onclick="appendValue('-')">−</button>

<button class="btn" onclick="appendValue('1')">1</button>
<button class="btn" onclick="appendValue('2')">2</button>
<button class="btn" onclick="appendValue('3')">3</button>
<button class="btn" onclick="appendValue('+')">+</button>

<button class="btn" onclick="appendValue('0')">0</button>
<button class="btn" onclick="appendValue('.')">.</button>
<button class="btn equal" onclick="calculate()">=</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
21 changes: 21 additions & 0 deletions Domains/Frontend/MiniProjects/InteractiveCalculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const display = document.getElementById('display');

function appendValue(value) {
display.value += value;
}

function clearDisplay() {
display.value = '';
}

function deleteLast() {
display.value = display.value.slice(0, -1);
}

function calculate() {
try {
display.value = eval(display.value);
} catch {
display.value = 'Error';
}
}
66 changes: 66 additions & 0 deletions Domains/Frontend/MiniProjects/InteractiveCalculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1f1c2c, #928dab);
}

.calculator {
background: #2c2f36;
padding: 20px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
width: 320px;
}

#display {
width: 100%;
height: 60px;
font-size: 2em;
border: none;
outline: none;
background: #1e2126;
color: #fff;
border-radius: 10px;
text-align: right;
padding-right: 10px;
margin-bottom: 15px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.btn {
background: #3c4049;
color: white;
border: none;
padding: 15px;
font-size: 1.2em;
border-radius: 10px;
cursor: pointer;
transition: 0.2s;
}

.btn:hover {
background: #5b5f6b;
}

.equal {
grid-column: span 2;
background: #ff8c00;
}

.equal:hover {
background: #ffa733;
}
Loading