Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Annulus Calculator #1647

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added Annulus Calculator #1647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
07e8853
Commit-1
Damini2004 Jul 14, 2024
a0e857d
Final Commit
Damini2004 Jul 15, 2024
34814b8
done
Damini2004 Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions Calculators/Annulus-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Binary file added Calculators/Annulus-Calculator/assests/bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 83 additions & 0 deletions Calculators/Annulus-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!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>
<style>
/* Add some basic styling for the diagram */
.diagram {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
margin: 20px ;
}
.outer-circle {
width: 100%;
height: 100%;
border: 1px solid black;
border-radius: 50%;
position: relative;
}
.inner-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
border-radius: 50%;
background-color: #fff;
}
</style>
</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>
<br><br><br><br><br>
<div class="diagram">
<div class="outer-circle" id="outer-circle"></div>
<div class="inner-circle" id="inner-circle"></div>
</div>
</div>
<script>
const form = document.getElementById('annulusForm');
const outerRadiusInput = document.getElementById('outerRadius');
const innerRadiusInput = document.getElementById('innerRadius');
const resultDiv = document.getElementById('result');
const outerCircle = document.getElementById('outer-circle');
const innerCircle = document.getElementById('inner-circle');

form.addEventListener('submit', (e) => {
e.preventDefault();
const outerRadius = parseFloat(outerRadiusInput.value);
const innerRadius = parseFloat(innerRadiusInput.value);
const area = calculateAnnulusArea(outerRadius, innerRadius);
resultDiv.innerText = `The area of the annulus is: ${area.toFixed(2)}`;

// Update the diagram
outerCircle.style.width = `${outerRadius * 2}px`;
outerCircle.style.height = `${outerRadius * 2}px`;
innerCircle.style.width = `${innerRadius * 2}px`;
innerCircle.style.height = `${innerRadius * 2}px`;
});

function calculateAnnulusArea(outerRadius, innerRadius) {
return Math.PI * (outerRadius ** 2 - innerRadius ** 2);
}
</script>
</body>
</html>
14 changes: 14 additions & 0 deletions Calculators/Annulus-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`;
});
62 changes: 62 additions & 0 deletions Calculators/Annulus-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-image: url(assests/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}

.container {
background-color: black;
padding: 20px;
color: white;
border: 3px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
width: 50%;
}

.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;
}
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
17 changes: 17 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,20 @@ <h3>Calculates an angle between the two lines.</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>
<div class="box">
<div class="content">
<h2>Antilog Calculator</h2>
Expand All @@ -300,6 +314,7 @@ <h3>Calculates the antilog of the any given number taken over any base.</h3>
</div>
</div>
</div>

<div class="box">
<div class="content">
<h2>Arithmetic Geometric Progression Calculator</h2>
Expand Down Expand Up @@ -4653,6 +4668,8 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
</div>
</div>
</div>



<br><br><br><br><br>
<div id="noResults" style="color: white; font-weight: bold; font-size: 18px;">
Expand Down