Rakesh9100 · Mayurchaudhari0795 · Oct 21, 2024 · Oct 21, 2024 · Oct 21, 2024
diff --git a/Calculators/ScientificCalculator/README.md b/Calculators/ScientificCalculator/README.md
@@ -0,0 +1,26 @@
+# Scientific Calculator
+
+## Description
+This project is a **Scientific Calculator** built using HTML, CSS, and JavaScript. It extends the basic calculator's functionality by incorporating advanced mathematical operations such as trigonometric functions (sin, cos, tan), logarithms, square root, exponentiation, and constants like π and e.
+
+The calculator is designed to handle basic arithmetic as well as more complex mathematical calculations typically used in science and engineering.
+
+## Features
+- Basic Arithmetic Operations (Addition, Subtraction, Multiplication, Division)
+- Percentage Calculation
+- Trigonometric Functions (sin, cos, tan)
+- Logarithmic Function (log)
+- Exponentiation (^)
+- Square Root (√)
+- Constants (π and e)
+- Clear and Delete (C and DEL)
+
+## Tech Stack
+- **HTML**: For structuring the calculator layout and UI elements.
+- **CSS**: For styling the calculator, making it visually appealing and responsive.
+- **JavaScript**: For handling all the mathematical logic and interactive features of the calculator.
+
+## How to Use
+1. Clone the repository using:
+   ```bash
+   git clone https://github.com/<your-github-username>/CalcDiverse.git
diff --git a/Calculators/ScientificCalculator/index.html b/Calculators/ScientificCalculator/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scientific Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="calculator">
+        <input type="text" class="calculator-screen" id="screen" disabled />
+
+        <div class="calculator-keys">
+            <!-- First Row -->
+            <button class="btn" onclick="clearScreen()">C</button>
+            <button class="btn" onclick="deleteLast()">DEL</button>
+            <button class="btn" onclick="appendOperator('%')">%</button>
+            <button class="btn" onclick="appendOperator('/')">/</button>
+
+            <!-- Second Row -->
+            <button class="btn" onclick="appendNumber('7')">7</button>
+            <button class="btn" onclick="appendNumber('8')">8</button>
+            <button class="btn" onclick="appendNumber('9')">9</button>
+            <button class="btn" onclick="appendOperator('*')">*</button>
+
+            <!-- Third Row -->
+            <button class="btn" onclick="appendNumber('4')">4</button>
+            <button class="btn" onclick="appendNumber('5')">5</button>
+            <button class="btn" onclick="appendNumber('6')">6</button>
+            <button class="btn" onclick="appendOperator('-')">-</button>
+
+            <!-- Fourth Row -->
+            <button class="btn" onclick="appendNumber('1')">1</button>
+            <button class="btn" onclick="appendNumber('2')">2</button>
+            <button class="btn" onclick="appendNumber('3')">3</button>
+            <button class="btn" onclick="appendOperator('+')">+</button>
+
+            <!-- Fifth Row -->
+            <button class="btn" onclick="appendNumber('0')">0</button>
+            <button class="btn" onclick="appendNumber('.')">.</button>
+            <button class="btn equal-sign" onclick="calculate()" id="equal">=</button>
+
+            <!-- Scientific Functions Row -->
+            <button class="btn" onclick="appendFunction('Math.sin(')">sin</button>
+            <button class="btn" onclick="appendFunction('Math.cos(')">cos</button>
+            <button class="btn" onclick="appendFunction('Math.tan(')">tan</button>
+            <button class="btn" onclick="appendFunction('Math.log(')">log</button>
+            <button class="btn" onclick="appendOperator('Math.sqrt(')">√</button>
+            <button class="btn" onclick="appendOperator('**')">^</button>
+            <button class="btn" onclick="appendFunction('Math.PI')">π</button>
+            <button class="btn" onclick="appendFunction('Math.E')">e</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/ScientificCalculator/script.js b/Calculators/ScientificCalculator/script.js
@@ -0,0 +1,36 @@
+let screen = document.getElementById('screen');
+
+// Appending numbers
+function appendNumber(number) {
+    screen.value += number;
+}
+
+// Appending operators
+function appendOperator(operator) {
+    screen.value += operator;
+}
+
+// Appending functions like sin, cos, tan
+function appendFunction(func) {
+    screen.value += func;
+}
+
+// Clearing the screen
+function clearScreen() {
+    screen.value = '';
+}
+
+// Deleting last character
+function deleteLast() {
+    screen.value = screen.value.slice(0, -1);
+}
+
+// Calculating the result
+function calculate() {
+    try {
+        screen.value = eval(screen.value);
+    } catch (error) {
+        alert('Invalid input');
+        screen.value = '';
+    }
+}
diff --git a/Calculators/ScientificCalculator/style.css b/Calculators/ScientificCalculator/style.css
@@ -0,0 +1,57 @@
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f4f4f4;
+}
+
+.calculator {
+    width: 400px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+}
+
+.calculator-screen {
+    width: 100%;
+    height: 80px;
+    border: none;
+    background-color: #252525;
+    color: white;
+    text-align: right;
+    padding: 20px;
+    font-size: 2.5rem;
+    border-radius: 10px 10px 0 0;
+}
+
+.calculator-keys {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+    padding: 20px;
+}
+
+.btn {
+    height: 60px;
+    font-size: 1.5rem;
+    background-color: #e0e0e0;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #d4d4d4;
+}
+
+.equal-sign {
+    grid-column: span 4;
+    background-color: #f57c00;
+    color: white;
+}
+
+.equal-sign:hover {
+    background-color: #e57300;
+}
diff --git a/index.html b/index.html
@@ -5802,6 +5802,22 @@ <h3>Calculates the Critical point of ideal gases based on a and b</h3>
                 </div>
             </div>
         </div>
+
+        <div class="box">
+            <div class="content">
+                <h2>Scientific Calculator</h2>
+                <h3>Converts various trigonometric calculation./h3>
+                <div class="card-footer">
+                    <a href="./Calculators/ScientificCalculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/CSS-Unit-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
+
         <br><br><br><br><br>
         <div id="noResults" style="color: white; font-weight: bold; font-size: 18px;">
             <p>No results found 🙃</p>