From da0dd754d53cc584c70ffecafdaa37c172dccb31 Mon Sep 17 00:00:00 2001 From: Yash Kumar Date: Fri, 24 May 2024 22:04:58 +0530 Subject: [PATCH] Added Averages Calculator (#803) --- Calculators/Averages-Calculator/README.md | 21 +++++ Calculators/Averages-Calculator/index.html | 43 ++++++++++ Calculators/Averages-Calculator/script.js | 23 +++++ Calculators/Averages-Calculator/style.css | 98 ++++++++++++++++++++++ index.html | 14 ++++ 5 files changed, 199 insertions(+) create mode 100644 Calculators/Averages-Calculator/README.md create mode 100644 Calculators/Averages-Calculator/index.html create mode 100644 Calculators/Averages-Calculator/script.js create mode 100644 Calculators/Averages-Calculator/style.css diff --git a/Calculators/Averages-Calculator/README.md b/Calculators/Averages-Calculator/README.md new file mode 100644 index 000000000..5bd176c7d --- /dev/null +++ b/Calculators/Averages-Calculator/README.md @@ -0,0 +1,21 @@ +#

Averages Calculator

+ +## 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 new file mode 100644 index 000000000..862d9cbe9 --- /dev/null +++ b/Calculators/Averages-Calculator/index.html @@ -0,0 +1,43 @@ + + + + + Averages Calculator + + + + +
+

Averages Calculator

+
+
+ + +
+ +
+

Results

+
+ Arithmetic Mean: + - +
+
+ Geometric Mean: + - +
+
+ Harmonic Mean: + - +
+
+
+ + + diff --git a/Calculators/Averages-Calculator/script.js b/Calculators/Averages-Calculator/script.js new file mode 100644 index 000000000..788f2718e --- /dev/null +++ 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 new file mode 100644 index 000000000..a95998214 --- /dev/null +++ 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 index f6ef760f5..c41065384 100644 --- a/index.html +++ b/index.html @@ -216,6 +216,20 @@

Calculates the aspect ratio of the specified height and width.

+
+
+

Averages Calculator

+

Calculates the arithmetic, geometric, and harmonic means.

+
+ + + + + Source Code + +
+
+

Basic Calculator