FEAT #638 - Added Averages Calculator

Rakesh9100 · May 23, 2024 · 93ec18b · 93ec18b
1 parent ded4fe2
commit 93ec18b
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 0 deletions.
diff --git a/Calculators/Averages-Calculator/README.md b/Calculators/Averages-Calculator/README.md
@@ -0,0 +1,17 @@
+# Averages Calculator
+
+## Overview
+This is a simple web-based averages calculator that allows users to input comma-separated values and calculates the arithmetic, geometric, and harmonic means.
+
+## Technologies Used
+- 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
+![alt text](./assets/demo.png)
diff --git a/Calculators/Averages-Calculator/assets/demo.png b/Calculators/Averages-Calculator/assets/demo.png
diff --git a/Calculators/Averages-Calculator/index.html b/Calculators/Averages-Calculator/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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" />
+  </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"></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,53 @@
+body {
+  font-family: Arial, sans-serif;
+}
+
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.heading {
+  text-align: center;
+}
+
+.input-section {
+  margin-bottom: 20px;
+}
+
+input[type="text"],
+textarea {
+  width: 100%;
+  padding: 8px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+}
+
+button {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.results {
+  margin-top: 20px;
+}
+
+.result {
+  margin-bottom: 10px;
+}
+
+.result span {
+  display: inline-block;
+  width: 150px;
+}
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>