Added Scientific Calculator (#1908)

Rakesh9100 · Dec 14, 2024 · 2d0fcef · 2d0fcef
1 parent ae514f2
commit 2d0fcef
Show file tree

Hide file tree

Showing 5 changed files with 371 additions and 1 deletion.
diff --git a/Calculators/Scientific-Calculator/README.md b/Calculators/Scientific-Calculator/README.md
@@ -0,0 +1,28 @@
+# <p align="center">Scientific Calculator</p>
+
+## Description :-
+
+A fully functional scientific calculator that supports:
+
+- Trigonometric functions such as sin, cos, tan
+- Inverse trigonometric functions like arcsin, arccos, arctan
+- Logarithmic functions (log, log10)
+- Square roots, cube roots, and other mathematical operations
+- A sleek dark-themed UI with enhanced usability and accessibility
+
+This version also includes:
+
+- Error handling for invalid input (e.g., "asin(0.5)" or "log(10)").
+- Support for edge cases (e.g., logarithms with values <= 0).
+- A clear, user-friendly layout with all buttons styled appropriately, enhancing the overall experience.
+- Includes a "Clear" button for resetting the input, a "Delete" button for removing the last character, and an "Equals" button in an orange color to indicate its importance.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/0fae5a34-a2eb-47ac-a922-c7d9ec4beebf)
diff --git a/Calculators/Scientific-Calculator/index.html b/Calculators/Scientific-Calculator/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Scientific Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <!-- User Manual on the Left -->
+        <div class="manual">
+            <h2>How to Use</h2>
+            <ul>
+                <li><b>Numbers:</b> Click number buttons (0-9) to enter numbers.</li>
+                <li><b>Operations:</b> Use the operators for basic arithmetic (+, -, *, /).</li>
+                <li><b>Trigonometric Functions:</b> Click a number for trigonometric calculations followed by "sin", "cos", or "tan".</li>
+                <li><b>Inverse Trigonometric Functions:</b> Click a number for trigonometric calculations followed by "asin", "acos", or "atan" for inverse trigonometric calculations.</li>
+                <li><b>Logarithmic Functions:</b> Use "log" for base-10 log and "ln" for the natural log.</li>
+                <li><b>Square Root (√):</b> Click the "√" button for square roots.</li>
+                <li><b>Cube Root (∛):</b> Click the "∛" button for cube roots.</li>
+                <li><b>Power (x²):</b> Click "x²" for squaring a number.</li>
+                <li><b>Clear:</b> Click "C" to clear the display, or "DEL" to delete the last entered character.</li>
+                <li><b>Equals:</b> Click "=" to evaluate the expression.</li>
+            </ul>
+        </div>
+
+        <!-- Calculator Section -->
+        <div class="calculator-box">
+            <div class="calculator">
+                <div class="display">
+                    <input type="text" id="output" disabled />
+                </div>
+                <div class="buttons">
+                    <!-- Row 1 -->
+                    <button onclick="appendToDisplay('7')">7</button>
+                    <button onclick="appendToDisplay('8')">8</button>
+                    <button onclick="appendToDisplay('9')">9</button>
+                    <button onclick="appendToDisplay('/')">/</button>
+
+                    <!-- Row 2 -->
+                    <button onclick="appendToDisplay('4')">4</button>
+                    <button onclick="appendToDisplay('5')">5</button>
+                    <button onclick="appendToDisplay('6')">6</button>
+                    <button onclick="appendToDisplay('*')">*</button>
+
+                    <!-- Row 3 -->
+                    <button onclick="appendToDisplay('1')">1</button>
+                    <button onclick="appendToDisplay('2')">2</button>
+                    <button onclick="appendToDisplay('3')">3</button>
+                    <button onclick="appendToDisplay('-')">-</button>
+
+                    <!-- Row 4 -->
+                    <button onclick="appendToDisplay('0')">0</button>
+                    <button onclick="appendToDisplay('.')">.</button>
+                    <button onclick="clearDisplay()">CLEAR</button>
+                    <button onclick="appendToDisplay('+')">+</button>
+
+                    <!-- Row 5 - Trigonometric Functions -->
+                    <button onclick="calculateTrig('sin')">sin</button>
+                    <button onclick="calculateTrig('cos')">cos</button>
+                    <button onclick="calculateTrig('tan')">tan</button>
+
+                    <!-- Row 6 - Inverse Trigonometric Functions -->
+                    <button onclick="calculateInverse('asin')">asin</button>
+                    <button onclick="calculateInverse('acos')">acos</button>
+                    <button onclick="calculateInverse('atan')">atan</button>
+
+                    <!-- Row 7 - Logarithmic Functions -->
+                    <button onclick="calculateLog()">log</button>
+                    <button onclick="calculateLn()">ln</button>
+
+                    <!-- Row 8 - Miscellaneous -->
+                    <button onclick="calculateSqrt()">√</button>
+                    <button onclick="calculateCbrt()">∛</button>
+                    <button onclick="calculatePower()">x²</button>
+                    <button onclick="calculateExponential()">e^x</button>
+
+                    <!-- Row 9 - Equal and Delete -->
+                    <button onclick="deleteLast()">DEL</button>
+                    <button onclick="calculateResult()">=</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Scientific-Calculator/script.js b/Calculators/Scientific-Calculator/script.js
@@ -0,0 +1,117 @@
+function appendToDisplay(value) {
+    document.getElementById('output').value += value;
+}
+
+function clearDisplay() {
+    document.getElementById('output').value = '';
+}
+
+function deleteLast() {
+    let output = document.getElementById('output');
+    output.value = output.value.slice(0, -1);
+}
+
+function calculateTrig(func) {
+    let value = parseFloat(document.getElementById('output').value);
+    if (isNaN(value)) {
+        alert("Please enter a valid number.");
+        return;
+    }
+    if (func === 'sin') {
+        let result = Math.sin(toRadians(value));
+        document.getElementById('output').value = result.toFixed(6);
+    } else if (func === 'cos') {
+        let result = Math.cos(toRadians(value));
+        document.getElementById('output').value = result.toFixed(6);
+    } else if (func === 'tan') {
+        let result = Math.tan(toRadians(value));
+        document.getElementById('output').value = result.toFixed(6);
+    }
+}
+
+function calculateInverse(func) {
+    let value = parseFloat(document.getElementById('output').value);
+    if (isNaN(value)) {
+        alert("Please enter a valid number.");
+        return;
+    }
+    if (func === 'asin' && (value < -1 || value > 1)) {
+        alert("asin(x) is only valid for x between -1 and 1.");
+        return;
+    }
+    if (func === 'acos' && (value < -1 || value > 1)) {
+        alert("acos(x) is only valid for x between -1 and 1.");
+        return;
+    }
+    let result;
+    if (func === 'asin') {
+        result = Math.asin(value);
+    } else if (func === 'acos') {
+        result = Math.acos(value);
+    } else if (func === 'atan') {
+        result = Math.atan(value);
+    }
+    document.getElementById('output').value = result.toFixed(6);
+}
+
+function calculateLog() {
+    let value = parseFloat(document.getElementById('output').value);
+    if (value <= 0) {
+        alert("Logarithm only works for values greater than 0.");
+        return;
+    }
+    let result = Math.log10(value);
+    document.getElementById('output').value = result.toFixed(6);
+}
+
+function calculateLn() {
+    let value = parseFloat(document.getElementById('output').value);
+    if (value <= 0) {
+        alert("Natural Logarithm only works for values greater than 0.");
+        return;
+    }
+    let result = Math.log(value);
+    document.getElementById('output').value = result.toFixed(6);
+}
+
+function calculateSqrt() {
+    let value = parseFloat(document.getElementById('output').value);
+    if (value < 0) {
+        alert("Square root is not defined for negative numbers.");
+        return;
+    }
+    let result = Math.sqrt(value);
+    document.getElementById('output').value = result.toFixed(6);
+}
+
+function calculateCbrt() {
+    let value = parseFloat(document.getElementById('output').value);
+    let result = Math.cbrt(value);
+    document.getElementById('output').value = result.toFixed(6);
+}
+
+function calculatePower() {
+    let value = parseFloat(document.getElementById('output').value);
+    let result = Math.pow(value, 2);
+    document.getElementById('output').value = result.toFixed(6);
+}
+
+function calculateExponential() {
+    let value = parseFloat(document.getElementById('output').value);
+    let result = Math.exp(value);
+    document.getElementById('output').value = result.toFixed(6);
+}
+
+function calculateResult() {
+    let output = document.getElementById('output').value;
+    try {
+        let result = eval(output);
+        document.getElementById('output').value = result.toFixed(6);
+    } catch (e) {
+        alert("Error in calculation!");
+    }
+}
+
+function toRadians(degrees) {
+    return degrees * (Math.PI / 180);
+}
diff --git a/Calculators/Scientific-Calculator/style.css b/Calculators/Scientific-Calculator/style.css
@@ -0,0 +1,122 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #2e2e2e;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 80%;
+    max-width: 1200px;
+}
+
+.manual {
+    background-color: #333;
+    padding: 20px;
+    border-radius: 10px;
+    width: 30%;
+    height: fit-content;
+    margin-right: 30px;
+}
+
+.manual h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.manual ul {
+    list-style-type: none;
+}
+
+.manual ul li {
+    margin: 10px 0;
+}
+
+.calculator-box {
+    background-color: #444;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    width: 60%;
+}
+
+.calculator {
+    width: 100%;
+}
+
+.display {
+    margin-bottom: 20px;
+}
+
+#output {
+    width: 100%;
+    height: 50px;
+    font-size: 2rem;
+    padding: 10px;
+    text-align: right;
+    background-color: #333;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+}
+
+.buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+
+button {
+    background-color: #555; /* All buttons black */
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    padding: 20px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #888;
+}
+
+button:active {
+    background-color: #444;
+}
+
+button:focus {
+    outline: none;
+}
+
+button:nth-child(4n), button:nth-child(5), button:nth-child(6), button:nth-child(7), button:nth-child(8), button:nth-child(9) {
+    background-color: #555; /* All numbers and operators are black */
+}
+
+/* Only the DEL, C, and = buttons in orange */
+button:nth-last-child(2), button:nth-child(12), button:nth-child(16) {
+    background-color: #ff8c00; /* Orange color */
+}
+
+button:last-child {
+    background-color: #ff8c00; /* Orange equal button */
+}
+
+button:nth-last-child(2) {
+    background-color: #ff8c00; /* Orange DEL button */
+}
+
+.calculator-box {
+    width: 100%;
+}
diff --git a/index.html b/index.html
@@ -605,7 +605,7 @@ <h3>Converts a number between different bases.</h3>
         <div class="box">
             <div class="content">
                 <h2>Basic Calculator</h2>
-                <h3>Basic old school calculator for simple calculations</h3>
+                <h3>Basic old school calculator for simple calculations.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Basic-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
@@ -4844,6 +4844,20 @@ <h3>Determines how much you need to save each month to reach your savings goal.<
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Scientific Calculator</h2>
+                <h3>Performs basic and complex mathematical operations.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Scientific-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Scientific-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Sentence Counter Calculator</h2>