diff --git a/Calculators/Density-Calculator/README.md b/Calculators/Density-Calculator/README.md new file mode 100644 index 000000000..736a06aa4 --- /dev/null +++ b/Calculators/Density-Calculator/README.md @@ -0,0 +1,17 @@ +#

Density Calculator

+ +## 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](https://github.com/user-attachments/assets/35adbf8c-324a-4e1f-964f-4a613af18604) diff --git a/Calculators/Density-Calculator/index.html b/Calculators/Density-Calculator/index.html new file mode 100644 index 000000000..9cb9d83da --- /dev/null +++ b/Calculators/Density-Calculator/index.html @@ -0,0 +1,34 @@ + + + + + + + + Density Calculator + + + +
+

Density Calculator

+ + + + + + + + + +
+
+ + + + \ No newline at end of file diff --git a/Calculators/Density-Calculator/script.js b/Calculators/Density-Calculator/script.js new file mode 100644 index 000000000..b31186cd7 --- /dev/null +++ b/Calculators/Density-Calculator/script.js @@ -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'; +} \ No newline at end of file diff --git a/Calculators/Density-Calculator/style.css b/Calculators/Density-Calculator/style.css new file mode 100644 index 000000000..0cfb29723 --- /dev/null +++ b/Calculators/Density-Calculator/style.css @@ -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; +} \ No newline at end of file diff --git a/calculators.json b/calculators.json index dda635314..992e0a61f 100644 --- a/calculators.json +++ b/calculators.json @@ -671,6 +671,12 @@ "link": "./Calculators/Degree-Radian-Calculator/index.html", "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Degree-Radian-Calculator" }, + { + "title": "Density Calculator", + "description": "Calculates the density of a substance based on its mass and volume.", + "link": "./Calculators/Density-Calculator/index.html", + "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Density-Calculator" + }, { "title": "Depth Of Field Calculator", "description": "Calculator that helps photographers determine the depth of field based on some factors.",