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 Density Calculator #1938

Merged
merged 3 commits into from
Dec 23, 2024
Merged

Added Density Calculator #1938

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4a71c52
Added Density Calculator
saurabhhsinghh Dec 23, 2024
b056644
Merge branch 'main' into density_calculator
Rakesh9100 Dec 23, 2024
d4d299a
Added changes and resolved conflicts
Rakesh9100 Dec 23, 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/Density-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">Degree Radian Calculator</p>

## Description :-

A Density Calculator is a tool or application designed to compute the density of a substance based on its mass and volume. Density is a fundamental physical property of matter, defined as the mass per unit volume.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![image](<Screenshot 2024-12-23 122757.png>)
Binary file added Calculators/Density-Calculator/Screenshot 2024-12-23 122757.png
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.
31 changes: 31 additions & 0 deletions Calculators/Density-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Density Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<h1>Density Calculator</h1>
<label for="mass">Mass:</label>
<input type="number" id="mass" placeholder="Enter mass" />
<select id="massUnit">
<option value="1">kg</option>
<option value="0.001">g</option>
</select>

<label for="volume">Volume:</label>
<input type="number" id="volume" placeholder="Enter volume" />
<select id="volumeUnit">
<option value="1">m³</option>
<option value="0.001">cm³</option>
</select>

<button onclick="calculateDensity()">Calculate Density</button>
<div class="result" id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
20 changes: 20 additions & 0 deletions Calculators/Density-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
function calculateDensity() {
const mass = parseFloat(document.getElementById('mass').value);
const volume = parseFloat(document.getElementById('volume').value);
const massUnit = parseFloat(document.getElementById('massUnit').value);
const volumeUnit = parseFloat(document.getElementById('volumeUnit').value);
const resultDiv = document.getElementById('result');

if (isNaN(mass) || isNaN(volume) || mass <= 0 || volume <= 0) {
resultDiv.textContent = 'Please enter valid positive numbers for mass and volume.';
resultDiv.style.color = 'red';
return;
}

const adjustedMass = mass * massUnit; // Convert to kg
const adjustedVolume = volume * volumeUnit; // Convert to m³

const density = (adjustedMass / adjustedVolume).toFixed(2);
resultDiv.textContent = `The density is ${density} kg/m³.`;
resultDiv.style.color = 'green';
}
61 changes: 61 additions & 0 deletions Calculators/Density-Calculator/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #74ebd5, #9face6);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.calculator {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 350px;
text-align: center;
}

.calculator h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}

.calculator label {
display: block;
margin: 10px 0 5px;
font-size: 14px;
color: #555;
}

.calculator input, .calculator select {
width: 80%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}

.calculator button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #4caf50;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.calculator button:hover {
background-color: #45a049;
}

.result {
margin-top: 20px;
font-size: 18px;
color: #555;
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6050,6 +6050,20 @@ <h3>Provides the user's zodiac sign by taking the date of birth as input.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Density Calculator</h2>
<h3>Provides Density of a substance by taking its mass and volume.</h3>
<div class="card-footer">
<a href="./Calculators/Density-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Density-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;">
Expand Down
Loading