Added Averages Calculator (#803)

Rakesh9100 · May 24, 2024 · da0dd75 · da0dd75
1 parent 80d80ce
commit da0dd75
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 0 deletions.
diff --git a/Calculators/Averages-Calculator/README.md b/Calculators/Averages-Calculator/README.md
@@ -0,0 +1,21 @@
+# <p align="center">Averages Calculator</p>
+
+## Description :-
+
+This is a simple web-based averages calculator that allows users to input comma-separated values and calculates the arithmetic, geometric, and harmonic means.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Input validation ensures only numerical values are accepted.
+- Calculates arithmetic mean, geometric mean, and harmonic mean.
+- Clean and responsive user interface.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/71cdbec1-9525-49dc-a626-077b9c571785)
diff --git a/Calculators/Averages-Calculator/index.html b/Calculators/Averages-Calculator/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Averages Calculator</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+        rel="stylesheet"
+        />
+</head>
+<body>
+    <div class="container">
+        <h2 class="heading">Averages Calculator</h2>
+        <hr />
+        <div class="input-section">
+            <label for="values-input">Enter comma-separated values:</label>
+            <textarea
+                id="values-input"
+                rows="4"
+                placeholder="e.g., 1, 2, 3, 4"
+                ></textarea>
+        </div>
+        <button id="calculate-btn">Calculate Averages</button>
+        <div class="results">
+            <h3>Results</h3>
+            <div class="result">
+                <span>Arithmetic Mean:</span>
+                <span id="arithmetic-mean">-</span>
+            </div>
+            <div class="result">
+                <span>Geometric Mean:</span>
+                <span id="geometric-mean">-</span>
+            </div>
+            <div class="result">
+                <span>Harmonic Mean:</span>
+                <span id="harmonic-mean">-</span>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Averages-Calculator/script.js b/Calculators/Averages-Calculator/script.js
@@ -0,0 +1,23 @@
+document.getElementById("calculate-btn").addEventListener("click", function () {
+    const valuesInput = document.getElementById("values-input").value;
+    const numbers = valuesInput.split(",").map((num) => parseFloat(num.trim()));
+
+    const arithmeticMean =
+        numbers.reduce((sum, num) => sum + num, 0) / numbers.length;
+
+    let geometricMean = 1;
+    for (const num of numbers) {
+        geometricMean *= num;
+    }
+    geometricMean = Math.pow(geometricMean, 1 / numbers.length);
+
+    const harmonicMean =
+        numbers.length / numbers.reduce((sum, num) => sum + 1 / num, 0);
+
+    document.getElementById("arithmetic-mean").textContent =
+        arithmeticMean.toFixed(2);
+    document.getElementById("geometric-mean").textContent =
+        geometricMean.toFixed(2);
+    document.getElementById("harmonic-mean").textContent =
+        harmonicMean.toFixed(2);
+});
diff --git a/Calculators/Averages-Calculator/style.css b/Calculators/Averages-Calculator/style.css
@@ -0,0 +1,98 @@
+body {
+    font-family: "Roboto", sans-serif;
+    background: linear-gradient(135deg, #6e8efb, #a777e3);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    background-color: #ffffff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    max-width: 600px;
+    width: 100%;
+    margin: 20px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.heading {
+    text-align: center;
+    color: #333;
+    font-weight: 700;
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid #eee;
+    margin: 20px 0;
+}
+
+.input-section {
+    margin-bottom: 20px;
+}
+
+input[type="text"],
+textarea {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: none;
+}
+
+textarea::placeholder {
+    color: #aaa;
+}
+
+button {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+.results {
+    margin-top: 20px;
+}
+
+.results h3 {
+    margin-bottom: 15px;
+    color: #333;
+    text-align: center;
+}
+
+.result {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+    border: 1px solid #eee;
+}
+
+.result span {
+    font-weight: 500;
+}
+
+.result span:last-child {
+    font-weight: 700;
+    color: #007bff;
+}
diff --git a/index.html b/index.html
@@ -216,6 +216,20 @@ <h3>Calculates the aspect ratio of the specified height and width.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Averages Calculator</h2>
+                <h3>Calculates the arithmetic, geometric, and harmonic means.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Averages-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Averages-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>Basic Calculator</h2>