From 3cb11c3068be43dac8c056de7a4f922f1652e122 Mon Sep 17 00:00:00 2001 From: Tanmay-Kad Date: Wed, 22 Oct 2025 22:37:28 +0530 Subject: [PATCH] Added InteractiveCalculator Project under Frontend/MiniProjects --- .../InteractiveCalculator/README.md | 32 +++++++++ .../InteractiveCalculator/index.html | 41 ++++++++++++ .../InteractiveCalculator/script.js | 21 ++++++ .../InteractiveCalculator/style.css | 66 +++++++++++++++++++ 4 files changed, 160 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/InteractiveCalculator/README.md create mode 100644 Domains/Frontend/MiniProjects/InteractiveCalculator/index.html create mode 100644 Domains/Frontend/MiniProjects/InteractiveCalculator/script.js create mode 100644 Domains/Frontend/MiniProjects/InteractiveCalculator/style.css diff --git a/Domains/Frontend/MiniProjects/InteractiveCalculator/README.md b/Domains/Frontend/MiniProjects/InteractiveCalculator/README.md new file mode 100644 index 00000000..bd746912 --- /dev/null +++ b/Domains/Frontend/MiniProjects/InteractiveCalculator/README.md @@ -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 + +--- \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/InteractiveCalculator/index.html b/Domains/Frontend/MiniProjects/InteractiveCalculator/index.html new file mode 100644 index 00000000..4304a6d4 --- /dev/null +++ b/Domains/Frontend/MiniProjects/InteractiveCalculator/index.html @@ -0,0 +1,41 @@ + + + + + + Simple Calculator + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + diff --git a/Domains/Frontend/MiniProjects/InteractiveCalculator/script.js b/Domains/Frontend/MiniProjects/InteractiveCalculator/script.js new file mode 100644 index 00000000..20d6134d --- /dev/null +++ b/Domains/Frontend/MiniProjects/InteractiveCalculator/script.js @@ -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'; + } +} diff --git a/Domains/Frontend/MiniProjects/InteractiveCalculator/style.css b/Domains/Frontend/MiniProjects/InteractiveCalculator/style.css new file mode 100644 index 00000000..6658050a --- /dev/null +++ b/Domains/Frontend/MiniProjects/InteractiveCalculator/style.css @@ -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; +}