diff --git a/Calculators/Annulus-Calculator/README.md b/Calculators/Annulus-Calculator/README.md new file mode 100644 index 000000000..1404e1901 --- /dev/null +++ b/Calculators/Annulus-Calculator/README.md @@ -0,0 +1,15 @@ +#

Annulus Calculator

+ +## Description :- + +The Annulus Calculator is a simple web-based tool designed to calculate the area of an annulus (a ring-shaped geometric figure) based on the given outer and inner radii. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/d0553dae-67c9-489c-9ba1-fff268b30624) diff --git a/Calculators/Annulus-Calculator/index.html b/Calculators/Annulus-Calculator/index.html new file mode 100644 index 000000000..7edfaa2e3 --- /dev/null +++ b/Calculators/Annulus-Calculator/index.html @@ -0,0 +1,33 @@ + + + + + + + Annulus Calculator + + +
+

Annulus Calculator

+
+
+ + +
+
+ + +
+ +
+
+ + +
+
+
+
+
+ + + diff --git a/Calculators/Annulus-Calculator/script.js b/Calculators/Annulus-Calculator/script.js new file mode 100644 index 000000000..98cdb622a --- /dev/null +++ b/Calculators/Annulus-Calculator/script.js @@ -0,0 +1,29 @@ +document.getElementById('annulusForm').addEventListener('submit', function (e) { + e.preventDefault(); + + const outerRadius = parseFloat(document.getElementById('outerRadius').value); + const innerRadius = parseFloat(document.getElementById('innerRadius').value); + + if (isNaN(outerRadius) || isNaN(innerRadius) || outerRadius <= 0 || innerRadius <= 0 || outerRadius <= innerRadius) { + alert('Please enter valid radii. The outer radius must be greater than the inner radius.'); + return; + } + + // Calculate the area of the annulus + const area = Math.PI * (Math.pow(outerRadius, 2) - Math.pow(innerRadius, 2)); + document.getElementById('result').innerText = `Area of the Annulus: ${area.toFixed(2)} square units`; + + // Show the diagram and animate the circles + const diagram = document.getElementById('diagram'); + const outerCircle = document.getElementById('outer-circle'); + const innerCircle = document.getElementById('inner-circle'); + + diagram.style.display = 'block'; // Show diagram + diagram.classList.add('fade-in'); + + // Set the dimensions of the circles + outerCircle.style.width = `${outerRadius * 40}px`; // Multiply by 40 for better scaling + outerCircle.style.height = `${outerRadius * 40}px`; + innerCircle.style.width = `${innerRadius * 40}px`; + innerCircle.style.height = `${innerRadius * 40}px`; +}); diff --git a/Calculators/Annulus-Calculator/style.css b/Calculators/Annulus-Calculator/style.css new file mode 100644 index 000000000..fd6b2130d --- /dev/null +++ b/Calculators/Annulus-Calculator/style.css @@ -0,0 +1,129 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f8ff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-size: cover; + background-repeat: no-repeat; +} + +.container { + background-color: rgba(0, 0, 0, 0.7); + padding: 30px; + color: white; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + width: 80%; + max-width: 500px; + text-align: center; + transition: all 0.3s ease; +} + +.container:hover { + transform: scale(1.05); +} + +h1 { + color: #ff6347; + font-size: 2em; + margin-bottom: 20px; +} + +.form-group { + margin-bottom: 20px; + text-align: left; +} + +label { + display: block; + margin-bottom: 5px; + color: #ffeb3b; +} + +input { + width: 100%; + padding: 12px; + margin-top: 8px; + box-sizing: border-box; + border: 2px solid #007bff; + border-radius: 4px; + background-color: #f0f0f0; +} + +input:focus { + border-color: #ff6347; + outline: none; +} + +button { + padding: 12px 20px; + background-color: #28a745; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 1em; + width: 100%; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #218838; +} + +#result { + margin-top: 20px; + font-weight: bold; + color: #ff6347; +} + +.diagram { + margin-top: 40px; + width: 300px; + height: 300px; + position: relative; + margin-left: auto; + margin-right: auto; + display: none; +} + +.outer-circle { + position: absolute; + width: 100%; + height: 100%; + border: 10px solid #007bff; + border-radius: 50%; + background-color: rgba(0, 123, 255, 0.1); + top: 0; + left: 0; + transition: width 0.3s, height 0.3s; +} + +.inner-circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 10px solid #28a745; + background-color: rgba(40, 167, 69, 0.1); + border-radius: 50%; + transition: width 0.3s, height 0.3s; +} + +/* Animations */ +.fade-in { + animation: fadeIn 0.5s ease-in-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} diff --git a/README.md b/README.md index 2d6c47e7f..444f0272c 100644 --- a/README.md +++ b/README.md @@ -343,9 +343,10 @@ CalcDiverse is a customized collection of calculators for various aspects of mat | 277 | Weight On The Moon Calculator | Calculates the weight of the object/person on the moon. | https://calcdiverse.netlify.app/calculators/weight-on-the-moon-calculator/ | | 278 | Word Count Calculator | Counts the Total Words, Unique words, Average word length and Exports the data in JSON. | https://calcdiverse.netlify.app/calculators/word-count-calculator/ | | 279 | Yarn Density Calculator | Calculates the linear density of the yarn from unit system to another. | https://calcdiverse.netlify.app/calculators/yarn-density-calculator/ | -| 280 | Chi-Square Calculator | Calculates the chi-square value from the observed and expected data. | https://calcdiverse.netlify.app/calculators/Chi-Square-Calculator/ | -| 281 | Pet Care Cost Calculator | Calculates the cost required to keep the pet throughout lifespan from the entered data. | https://calcdiverse.netlify.app/calculators/Pet-Care-Cost-Calculator/ | -| 282 | Finance Calculator | Calculates the future value of investments and monthly loan payments| https://calcdiverse.netlify.app/Calculators/Finance-Calculator/| +| 280 | Chi-Square Calculator | Calculates the chi-square value from the observed and expected data. | https://calcdiverse.netlify.app/calculators/chi-square-calculator/ | +| 281 | Pet Care Cost Calculator | Calculates the cost required to keep the pet throughout lifespan from the entered data. | https://calcdiverse.netlify.app/calculators/pet-care-cost-calculator/ | +| 282 | Finance Calculator | Calculates the future value of investments and monthly loan payments| https://calcdiverse.netlify.app/Calculators/finance-calculator/ | +| 283 | Annulus Calculator | Calculates the area of circle with inner and outer radius. | https://calcdiverse.netlify.app/calculators/annulus-calculator/ |

(back to top)

diff --git a/index.html b/index.html index 0cd64d212..664baf153 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ CalcDiverse - +
@@ -346,6 +346,20 @@

Calculates an angle between the two lines.

+
+
+

Annulus Calculator

+

Calculates the area of the circle with inner and outer radius.

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

Antilog Calculator