Rakesh9100 · Rakesh9100 · Dec 2, 2024 · Jul 14, 2024 · Jul 15, 2024 · Jul 15, 2024
diff --git a/Calculators/Annulus-Calculator/README.md b/Calculators/Annulus-Calculator/README.md
@@ -0,0 +1,16 @@
+# <p align="center">Annulus Calculator</p>
+
+## Description :-
+
+A web-based Annulus  calculator where there are 2 inputs of inner and outer radius of circle
+Users have to fill in this value to get area.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/99cef613-9c20-4a18-b92b-dcd769b43e96)
diff --git a/Calculators/Annulus-Calculator/index.html b/Calculators/Annulus-Calculator/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Annulus Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Annulus Calculator</h1>
+        <form id="annulusForm">
+            <div class="form-group">
+                <label for="outerRadius">Outer Radius (R):</label>
+                <input type="number" id="outerRadius" required placeholder="e.g., 5">
+            </div>
+            <div class="form-group">
+                <label for="innerRadius">Inner Radius (r):</label>
+                <input type="number" id="innerRadius" required placeholder="e.g., 3">
+            </div>
+            <button type="submit">Calculate</button>
+        </form>
+        <div id="result"></div>
+        <div id="example">
+            <h2>Example</h2>
+            <p>Consider an annulus with an outer radius of 5 units and an inner radius of 3 units.</p>
+            <p>Enter the outer radius as: <strong>5</strong></p>
+            <p>Enter the inner radius as: <strong>3</strong></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Annulus-Calculator/script.js b/Calculators/Annulus-Calculator/script.js
@@ -0,0 +1,14 @@
+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;
+    }
+
+    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`;
+});
diff --git a/Calculators/Annulus-Calculator/style.css b/Calculators/Annulus-Calculator/style.css
@@ -0,0 +1,57 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: white;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    width: 300px;
+    text-align: center;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+button {
+    padding: 10px 15px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#result {
+    margin-top: 20px;
+    font-weight: bold;
+}
+
+#example {
+    margin-top: 20px;
+    text-align: left;
+}
diff --git a/README.md b/README.md
@@ -343,6 +343,8 @@ 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/ |
+| 281 | Annulus Calculator | Calculates the area of circle with inner and outer radius. | https://calcdiverse.netlify.app/calculators/Annulus-Calculator/ |
+
 <br>
 <p align="right">(<a href="#top">back to top</a>)</p>
 

diff --git a/index.html b/index.html
@@ -4653,6 +4653,21 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Annulus Calculator</h2>
+                <h3>Calculates the area of the circle with inner and outer radius.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Annulus-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Annulus Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
+
 
         <br><br><br><br><br>
         <div id="noResults" style="color: white; font-weight: bold; font-size: 18px;">