dev-kant-kumar · ankushchauhan933 · Oct 22, 2024
diff --git a/README.md b/README.md
@@ -1,34 +1,2 @@
-# Calculator Web App
-![Screenshot 2024-04-18 104354](https://github.com/dev-kant-kumar/Calculator/assets/101362859/01bf635e-05a2-4e5a-8a45-80aca8de95bb)
-![Screenshot 2024-04-18 104507](https://github.com/dev-kant-kumar/Calculator/assets/101362859/9e54a7fd-d95d-4b2b-8a44-366e660829e1)
-
-This is a simple calculator web application built using HTML, CSS, and JavaScript. It allows users to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. The calculator provides instant results and supports decimal numbers.
-
-## Demo
-
-Try out the calculator live [here](https://dev-kant-kumar.github.io/Calculator/).
-
-## Usage
-
-- Click on the number and operator buttons to input your calculation.
-- Press the "=" button to see the result.
-- Use the "C" button to clear the calculation.
-
-This calculator supports the following operations:
-
-- Addition (+):       Click the "+" button to add numbers together.
-- Subtraction (-):    Click the "-" button to subtract numbers.
-- Multiplication (×): Click the "×" button to multiply numbers.
-- Division (÷):       Click the "÷" button to divide numbers.
-- Modulus (%):        Click the "%" button to calculate the remainder of division.
-- Decimal numbers:    Click the "." button to input decimal numbers.
-- Cancel:             Click the "X" button to delete the last entered character.
-- Clear (C):          Click the "C" button to clear the entire calculation.
-
-## Contributing
-
-Contributions are welcome! If you'd like to contribute to this project, please fork the repository and submit a pull request.
-
-## License
-
-This project is licensed under the [MIT License](LICENSE).
+# Calculator
+This is a project pulled from the Odin Project. The goal is set up a basic calculator using HTML, CSS, and Javascript. 
diff --git a/calculator.css b/calculator.css
@@ -0,0 +1,87 @@
+/* styles.css */
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f3f3f3;
+    margin: 0;
+    transition: background-color 0.3s;
+}
+
+.calculator {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    width: 300px;
+    padding: 20px;
+}
+
+.display {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
+.history {
+    font-size: 12px;
+    color: #999;
+    height: 20px;
+    overflow: hidden;
+    text-align: right;
+}
+
+#result {
+    font-size: 20px;
+    text-align: right;
+    height: 40px;
+    margin-bottom: 10px;
+    border: none;
+    background: #f0f0f0;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.buttons, .scientific-buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+
+button {
+    font-size: 18px;
+    padding: 15px;
+    background-color: #eee;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+button:hover {
+    background-color: #ddd;
+}
+
+.scientific-buttons {
+    margin-top: 10px;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.dark-mode {
+    background-color: #2c2c2c;
+    color: #ddd;
+}
+
+.dark-mode #result {
+    background: #444;
+}
+
+.dark-mode button {
+    background-color: #444;
+    color: #ddd;
+}
+
+.dark-mode button:hover {
+    background-color: #555;
+}
diff --git a/calculator.html b/calculator.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Pred's Calculator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
+    <div class="text-center mb-8">
+      <h1 class="text-4xl font-bold text-white">Predhome Designs a Calculator</h1>
+    </div>
+
+    <div class="calculator bg-white rounded-lg shadow-lg p-8 w-80">
+      <div class="display bg-gray-100 rounded-lg h-16 mb-6 flex items-center justify-end px-4 text-2xl font-mono text-gray-700">
+        0
+      </div>
+
+      <div class="buttons grid grid-cols-4 gap-4">
+        <!-- Top functions -->
+        <button class="clear bg-red-500 text-white p-4 rounded-lg text-lg hover:bg-red-600">C</button>
+        <button class="modulo bg-yellow-500 text-white p-4 rounded-lg text-lg hover:bg-yellow-600">%</button>
+        <button class="sign bg-green-500 text-white p-4 rounded-lg text-lg hover:bg-green-600">+/-</button>
+        <button class="divide bg-blue-500 text-white p-4 rounded-lg text-lg hover:bg-blue-600">/</button>
+
+        <!-- Numbers and dot -->
+        <button class="seven bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">7</button>
+        <button class="eight bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">8</button>
+        <button class="nine bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">9</button>
+        <button class="multiply bg-blue-500 text-white p-4 rounded-lg text-lg hover:bg-blue-600">&lowast;</button>
+
+        <button class="four bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">4</button>
+        <button class="five bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">5</button>
+        <button class="six bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">6</button>
+        <button class="minus bg-blue-500 text-white p-4 rounded-lg text-lg hover:bg-blue-600">-</button>
+
+        <button class="one bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">1</button>
+        <button class="two bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">2</button>
+        <button class="three bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">3</button>
+        <button class="plus bg-blue-500 text-white p-4 rounded-lg text-lg hover:bg-blue-600">+</button>
+
+        <button class="zero bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300 col-span-2">0</button>
+        <button class="dot bg-gray-200 p-4 rounded-lg text-lg hover:bg-gray-300">.</button>
+        <button class="equals bg-purple-500 text-white p-4 rounded-lg text-lg hover:bg-purple-600">=</button>
+      </div>
+    </div>
+
+    <script src="calculator.js"></script>
+  </body>
+</html>
diff --git a/calculator.js b/calculator.js
@@ -0,0 +1,179 @@
+// Math Functions
+
+function add(a, b) {
+    return a + b;
+}
+
+function subtract(a, b) {
+    return a - b;
+}
+
+function multiply(a, b) {
+    return a * b;
+}
+
+function divide(a, b) {
+    if (b === 0) {
+        return "Oops.";
+    }
+    return a / b;
+}
+
+function modulo(a, b) {
+    if (b === 0) {
+        return a;
+    }
+    return a % b;
+}
+
+// INPUT VARIABLES
+let firstUserNumber = null;
+let secondUserNumber = null;
+let operator = null;
+let displayNumber = 0;
+let result = null;
+let readyForInput = true;
+let voiceEnabled = true; // Enable or disable voice feature
+
+//Set Operators
+
+function operate(firstNumber, secondNumber, userOperator) {
+    if (userOperator == "+") {
+        return add(firstNumber, secondNumber);
+    }
+    if (userOperator == "-") {
+        return subtract(firstNumber, secondNumber);
+    }
+    if (userOperator == "*") {
+        return multiply(firstNumber, secondNumber);
+    }
+    if (userOperator == "/") {
+        return divide(firstNumber, secondNumber);
+    }
+    if (userOperator == "%") {
+        return modulo(firstNumber, secondNumber);
+    }
+}
+
+// Speak result using Web Speech API
+function speakResult(text) {
+    if ('speechSynthesis' in window && voiceEnabled) {
+        let utterance = new SpeechSynthesisUtterance(text);
+        speechSynthesis.speak(utterance);
+    }
+}
+
+// query selectors and adding event listeners
+let display = document.querySelector(".display");
+let one = document.querySelector(".one");
+let two = document.querySelector(".two");
+let three = document.querySelector(".three");
+let four = document.querySelector(".four");
+let five = document.querySelector(".five");
+let six = document.querySelector(".six");
+let seven = document.querySelector(".seven");
+let eight = document.querySelector(".eight");
+let nine = document.querySelector(".nine");
+let zero = document.querySelector(".zero");
+let dot = document.querySelector(".dot");
+
+let plusButton = document.querySelector(".plus");
+let minusButton = document.querySelector(".minus");
+let multiplyButton = document.querySelector(".multiply");
+let divideButton = document.querySelector(".divide");
+let moduloButton = document.querySelector(".modulo");
+let signButton = document.querySelector(".sign");
+let clearButton = document.querySelector(".clear");
+let equalsButton = document.querySelector(".equals");
+
+one.addEventListener("click", () => displayValue("1"));
+two.addEventListener("click", () => displayValue("2"));
+three.addEventListener("click", () => displayValue("3"));
+four.addEventListener("click", () => displayValue("4"));
+five.addEventListener("click", () => displayValue("5"));
+six.addEventListener("click", () => displayValue("6"));
+seven.addEventListener("click", () => displayValue("7"));
+eight.addEventListener("click", () => displayValue("8"));
+nine.addEventListener("click", () => displayValue("9"));
+zero.addEventListener("click", () => displayValue("0"));
+dot.addEventListener("click", () => displayValue("."))
+
+plusButton.addEventListener("click", () => operatorInput("+"));
+minusButton.addEventListener("click", () => operatorInput("-"));
+multiplyButton.addEventListener("click", () => operatorInput("*"));
+divideButton.addEventListener("click", () => operatorInput("/"));
+moduloButton.addEventListener("click", () => operatorInput("%"));
+signButton.addEventListener("click", () => changeSign());
+
+clearButton.addEventListener("click", () => clear());
+equalsButton.addEventListener("click", () => equals())
+
+// function clear the calculator
+function clear() {
+    displayNumber = 0;
+    display.textContent = displayNumber;
+    firstUserNumber = null;
+    secondUserNumber = null;
+    operator = null;
+}
+
+// function to add the operator to the equation
+function operatorInput(userOperator) {
+    if (operator != null) {
+        equals();
+    }
+    if (operator === null) {
+        operator = userOperator;
+        firstUserNumber = displayNumber;
+        displayNumber = 0;
+        display.textContent = `${firstUserNumber} ${operator}`;
+    }
+}
+
+// function for when you hit the equals sign
+function equals() {
+    if (firstUserNumber && operator) {
+        secondUserNumber = displayNumber;
+        result = operate(parseFloat(firstUserNumber), parseFloat(secondUserNumber), operator);
+        if (isNaN(result)) {
+            display.textContent = result;
+        } else {
+            display.textContent = parseFloat(result.toPrecision(9));
+        }
+        firstUserNumber = result;
+        displayNumber = result;
+        operator = null;
+        secondUserNumber = null;
+        readyForInput = false;
+
+        // Speak the result
+        speakResult(display.textContent);
+    }
+}
+
+// function to change it to negative or positive
+function changeSign() {
+    if (parseFloat(displayNumber) != 0) {
+        displayNumber = parseFloat(displayNumber) * -1;
+        display.textContent = displayNumber;
+    }
+}
+
+// function for displaying a value
+function displayValue(number) {
+    if (number === ".") {
+        if (displayNumber === 0 || displayNumber == result) {
+            displayNumber = "0.";
+        } else if (displayNumber.toString().indexOf(".") == -1) {
+            displayNumber += ".";
+        }
+    } else if (displayNumber == 0 || displayNumber == result) {
+        displayNumber = number;
+    } else {
+        displayNumber += number;
+    }
+    display.textContent = displayNumber;
+}
+
+// Sets initial display content to 0
+clear();