Add files via upload

01ddevil · Sep 23, 2024 · 9dd5a4b · 9dd5a4b
1 parent 0c6d6c9
commit 9dd5a4b
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 0 deletions.
diff --git a/calculator.css b/calculator.css
@@ -0,0 +1,78 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(to right, #ff4e50, #f9d423);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.calculator {
+    background-color: #2c3e50;
+    padding: 20px;
+    border-radius: 20px;
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
+}
+
+.display {
+    background-color: #34495e;
+    border-radius: 10px;
+    padding: 20px;
+    font-size: 2em;
+    color: #ecf0f1;
+    text-align: right;
+    margin-bottom: 20px;
+    height: 60px;
+}
+
+.buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 80px);
+    grid-gap: 15px;
+}
+
+.buttons button {
+    background-color: #1abc9c;
+    border: none;
+    border-radius: 10px;
+    font-size: 1.5em;
+    padding: 20px;
+    color: #ecf0f1;
+    cursor: pointer;
+    transition: 0.3s ease;
+}
+
+.buttons button:hover {
+    background-color: #16a085;
+}
+
+.buttons .equal {
+    background-color: #e74c3c;
+    grid-column: span 2;
+}
+
+.buttons .equal:hover {
+    background-color: #c0392b;
+}
+
+.buttons .clear {
+    background-color: #f39c12;
+}
+
+.buttons .clear:hover {
+    background-color: #e67e22;
+}
+
+.buttons .operator {
+    background-color: #3498db;
+}
+
+.buttons .operator:hover {
+    background-color: #2980b9;
+}
diff --git a/calculator.html b/calculator.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colorful Calculator</title>
+    <link rel="stylesheet" href="calculator.css">
+</head>
+<body>
+    <div class="calculator">
+        <div id="display" class="display">0</div>
+        <div class="buttons">
+            <button onclick="clearDisplay()" class="clear">C</button>
+            <button onclick="input('%')" class="operator">%</button>
+            <button onclick="input('/')" class="operator">÷</button>
+            <button onclick="backspace()">⌫</button>
+
+            <button onclick="input('7')">7</button>
+            <button onclick="input('8')">8</button>
+            <button onclick="input('9')">9</button>
+            <button onclick="input('*')" class="operator">×</button>
+
+            <button onclick="input('4')">4</button>
+            <button onclick="input('5')">5</button>
+            <button onclick="input('6')">6</button>
+            <button onclick="input('-')" class="operator">-</button>
+
+            <button onclick="input('1')">1</button>
+            <button onclick="input('2')">2</button>
+            <button onclick="input('3')">3</button>
+            <button onclick="input('+')" class="operator">+</button>
+
+            <button onclick="input('0')">0</button>
+            <button onclick="input('.')">.</button>
+            <button onclick="calculate()" class="equal">=</button>
+        </div>
+    </div>
+    <script src="calculator.js"></script>
+</body>
+</html>
diff --git a/calculator.js b/calculator.js
@@ -0,0 +1,29 @@
+let display = document.getElementById("display");
+let currentInput = '';
+
+function input(value) {
+    if (currentInput.length < 16) {
+        currentInput += value;
+        display.textContent = currentInput;
+    }
+}
+
+function clearDisplay() {
+    currentInput = '';
+    display.textContent = '0';
+}
+
+function backspace() {
+    currentInput = currentInput.slice(0, -1);
+    display.textContent = currentInput || '0';
+}
+
+function calculate() {
+    try {
+        currentInput = eval(currentInput).toString();
+        display.textContent = currentInput;
+    } catch {
+        display.textContent = "Error";
+        currentInput = '';
+    }
+}