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

Added Annulus Calculator #1647

Merged
merged 9 commits into from
Dec 2, 2024
Merged

Added Annulus Calculator #1647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 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
5d55e51
Merge branch 'main' into Annulus-Calculator
Rakesh9100 Dec 2, 2024
da6ed68
Delete Calculators/Annulus-Calculator/assests directory
Rakesh9100 Dec 2, 2024
d1f603e
Update index.html
Rakesh9100 Dec 2, 2024
66d678e
Update script.js
Rakesh9100 Dec 2, 2024
aceb9ca
Update style.css
Rakesh9100 Dec 2, 2024
b171e2c
Update README.md
Rakesh9100 Dec 2, 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
15 changes: 15 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,15 @@
# <p align="center">Annulus Calculator</p>

## 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)
33 changes: 33 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,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>

<!-- Diagram Section -->
<div class="diagram" id="diagram">
<div class="outer-circle" id="outer-circle"></div>
<div class="inner-circle" id="inner-circle"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
29 changes: 29 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,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`;
});
129 changes: 129 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,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;
}
}
7 changes: 4 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/ |
<br>
<p align="right">(<a href="#top">back to top</a>)</p>

Expand Down
16 changes: 15 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<title>CalcDiverse</title>
</head>

<body class="containers light-mode " id="home">
<body class="containers light-mode" id="home">
<div class="circle-container">
<div class="circle"></div>
<div class="circle"></div>
Expand Down Expand Up @@ -346,6 +346,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 Down