diff --git a/README.md b/README.md index cb1dc68..94dc362 100644 --- 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 new file mode 100644 index 0000000..b9c7b4e --- /dev/null +++ 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 new file mode 100644 index 0000000..2e928e7 --- /dev/null +++ b/calculator.html @@ -0,0 +1,51 @@ + + + + + + + Pred's Calculator + + + +
+

Predhome Designs a Calculator

+
+ +
+
+ 0 +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + diff --git a/calculator.js b/calculator.js new file mode 100644 index 0000000..6ef5b3a --- /dev/null +++ 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();