Rakesh9100 · Yuvraj960 · Jun 6, 2024 · Jun 8, 2024 · Jun 10, 2024
diff --git a/Calculators/Standard-Deviation-Calculator/README.md b/Calculators/Standard-Deviation-Calculator/README.md
@@ -0,0 +1,25 @@
+# <p align="center">Standard Deviation Calculator</p>
+
+This web application calculates the standard deviation of a set of comma-separated values.
+
+## Usage
+
+1. Enter the values in the input field, separated by commas.
+2. Click the "Calculate" button to calculate the standard deviation.
+3. The result will be displayed below the input field.
+
+## Example
+
+Input: 1,2,3,4,5,6,7,7,9,1,3,5,6,7,7
+
+Output: The standard deviation is 2.363
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshot
+
+![Sample](assets/image.png)
diff --git a/Calculators/Standard-Deviation-Calculator/assets/image.png b/Calculators/Standard-Deviation-Calculator/assets/image.png
diff --git a/Calculators/Standard-Deviation-Calculator/index.html b/Calculators/Standard-Deviation-Calculator/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Standard Deviation Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Standard Deviation Calculator</h1>
+        <form id="calculator-form">
+            <div class="input-group">
+                <label for="numbers" class="entergrp">Enter numbers (comma-separated):</label>
+                <input type="text" id="numbers" required>
+            </div>
+            <button type="button" onclick="calculate()">Calculate</button>
+        </form>
+        <div id="results">
+            <p id="stddev"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Standard-Deviation-Calculator/script.js b/Calculators/Standard-Deviation-Calculator/script.js
@@ -0,0 +1,15 @@
+function calculate() {
+    // Get the input values
+    const input = document.getElementById('numbers').value;
+    const numbers = input.split(',').map(Number);
+
+    // Calculate the mean
+    const mean = numbers.reduce((acc, num) => acc + num, 0) / numbers.length;
+
+    // Calculate the standard deviation
+    const variance = numbers.reduce((acc, num) => acc + Math.pow(num - mean, 2), 0) / numbers.length;
+    const stddev = Math.sqrt(variance).toFixed(3);
+
+    // Display the results
+    document.getElementById('stddev').innerText = `Standard Deviation: ${stddev}`;
+}
diff --git a/Calculators/Standard-Deviation-Calculator/style.css b/Calculators/Standard-Deviation-Calculator/style.css
@@ -0,0 +1,82 @@
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(135deg, #ff6ec4, #7873f5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s;
+    width: 500px;
+    height: 270px;
+}
+
+.container:hover {
+    transform: translateY(-5px);
+}
+
+h1 {
+    margin-bottom: 40px;
+    text-align: center;
+    color: #555;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.entergrp {
+    margin-bottom: 10px;
+}
+
+label {
+    margin-bottom: 5px;
+    color: #333;
+}
+
+input[type="text"] {
+    padding: 8px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 90%;
+    transition: border-color 0.3s;
+}
+
+input[type="text"]:focus {
+    border-color: #ff6ec4;
+    outline: none;
+}
+
+button {
+    display: block;
+    margin: 20px auto;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+    background-color: #0056b3;
+    transform: translateY(-3px);
+}
+
+#results {
+    margin-top: 20px;
+    text-align: center;
+}
diff --git a/index.html b/index.html
@@ -2612,6 +2612,20 @@ <h3>Computes stress and strain using force, area, and length inputs.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Standard Deviation Calculator</h2>
+                <h3>Computes standard deviation based on the input data.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Standard-Deviation-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Standard-Deviation-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>Sunrise Sunset Calculator</h2>