Rakesh9100 · Rakesh9100 · Dec 27, 2024 · Dec 23, 2024 · Dec 23, 2024 · Dec 27, 2024
diff --git a/Calculators/Density-Calculator/Readme.md b/Calculators/Density-Calculator/Readme.md
@@ -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>)
diff --git a/Calculators/Density-Calculator/Screenshot 2024-12-23 122757.png b/Calculators/Density-Calculator/Screenshot 2024-12-23 122757.png
diff --git a/Calculators/Density-Calculator/index.html b/Calculators/Density-Calculator/index.html
@@ -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>
diff --git a/Calculators/Density-Calculator/script.js 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';
+}
diff --git a/Calculators/Density-Calculator/styles.css b/Calculators/Density-Calculator/styles.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;
+}
diff --git a/Calculators/Projectile-Motion-Calculator/README.md b/Calculators/Projectile-Motion-Calculator/README.md
@@ -18,4 +18,4 @@ Projectile Motion Calculator calculates the Maximum height, Range, Time of fligh
 
 ## Screenshots :-
 
-![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/2433e29d-cd24-41f2-ae87-01f2c04622fa)
+![image](<Screenshot 2024-12-23 172745.png>)
diff --git a/Calculators/Projectile-Motion-Calculator/Screenshot 2024-12-23 172745.png b/Calculators/Projectile-Motion-Calculator/Screenshot 2024-12-23 172745.png
diff --git a/Calculators/Projectile-Motion-Calculator/index.html b/Calculators/Projectile-Motion-Calculator/index.html
@@ -11,11 +11,12 @@
 <body>
     <h1>Projectile Motion Calculator</h1>
     <div class="container">
-
-        <h3>Initial Velocity(m/s): </h3>
+        <h3>Initial Velocity (m/s):</h3>
         <input type="number" id="initial-velocity" />
-        <h3>Launch Angle(degrees):</h3>
+        <h3>Launch Angle (degrees):</h3>
         <input type="number" id="launch-angle" />
+        <h3>Initial Height (m):</h3>
+        <input type="number" id="initial-height" />
         <br><br>
         <button id="btn">Generate Result</button>
         <h3>Result:</h3>
@@ -24,9 +25,8 @@ <h3>Result:</h3>
             <li id="msg2">Range:</li>
             <li id="msg3">Time of Flight:</li>
         </ul>
-
     </div>
     <script src="script.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/Calculators/Projectile-Motion-Calculator/script.js b/Calculators/Projectile-Motion-Calculator/script.js
@@ -1,39 +1,44 @@
-
 let initialVelocity = document.querySelector("#initial-velocity");
 let launchAngle = document.querySelector("#launch-angle");
+let initialHeight = document.querySelector("#initial-height");
 let btn = document.querySelector("#btn");
 let msg1 = document.querySelector("#msg1");
 let msg2 = document.querySelector("#msg2");
 let msg3 = document.querySelector("#msg3");
 const g = 9.8;
 
 btn.addEventListener("click", () => {
-    if (initialVelocity.value == "" || launchAngle.value == "") {
-        alert("Enter a valid input");
-
+    if (initialVelocity.value === "" || launchAngle.value === "" || initialHeight.value === "") {
+        alert("Enter all valid inputs");
+    } else {
+        calculateProjectile();
     }
-    cal_pro();
-
 });
 
-const cal_pro = () => {
-    let max_height = (((initialVelocity.value) ** 2) * (Math.sin((Math.PI / 180) * launchAngle.value) ** 2)) / (2 * g);
-    console.log(max_height)
+const calculateProjectile = () => {
+    let velocity = parseFloat(initialVelocity.value);
+    let angle = parseFloat(launchAngle.value);
+    let height = parseFloat(initialHeight.value);
 
-    let range = (((initialVelocity.value) ** 2) * Math.sin((Math.PI / 180) * 2 * launchAngle.value)) / g
-    console.log(range)
+    // Convert angle to radians
+    let angleRad = (Math.PI / 180) * angle;
 
-    let timeOfflight = ((2 * (initialVelocity.value)) * Math.sin((Math.PI / 180) * launchAngle.value)) / g
-    console.log(timeOfflight)
+    // Max height formula
+    let max_height = (velocity ** 2 * Math.sin(angleRad) ** 2) / (2 * g) + height;
 
-    if (initialVelocity.value == "" || launchAngle.value == "") {
-        msg1.innerHTML = `<li>Max Height:-</li>`
-        msg2.innerHTML = `<li>Range:-</li>`
-        msg3.innerHTML = `<li>Time of Flight:-</li>`
-    }
-    else {
-        msg1.innerHTML = `<li>Max Height:${max_height}m</li>`
-        msg2.innerHTML = `<li>Range:${range}m</li>`
-        msg3.innerHTML = `<li>Time of Flight:${timeOfflight}s</li>`
-    }
-}
+    // Time to reach max height
+    let timeToPeak = (velocity * Math.sin(angleRad)) / g;
+
+    // Total flight time (up and down)
+    let totalFlightTime =
+        timeToPeak +
+        Math.sqrt((2 * (height + (velocity ** 2 * Math.sin(angleRad) ** 2) / (2 * g))) / g);
+
+    // Range formula
+    let range = velocity * Math.cos(angleRad) * totalFlightTime;
+
+    // Update results
+    msg1.innerHTML = `<li>Max Height: ${max_height.toFixed(2)} m</li>`;
+    msg2.innerHTML = `<li>Range: ${range.toFixed(2)} m</li>`;
+    msg3.innerHTML = `<li>Time of Flight: ${totalFlightTime.toFixed(2)} s</li>`;
+};
diff --git a/Calculators/Projectile-Motion-Calculator/style.css b/Calculators/Projectile-Motion-Calculator/style.css
@@ -2,7 +2,6 @@
 
 * {
     font-family: 'Bitter', serif;
-
 }
 
 body {
@@ -16,6 +15,7 @@ body {
     left: 25%;
     border-radius: 20px;
     background-color: white;
+    padding: 20px;
 }
 
 h1 {
@@ -27,6 +27,7 @@ h1 {
 h3 {
     display: flex;
     justify-content: center;
+    margin: 10px 0;
 }
 
 button {
@@ -38,6 +39,8 @@ button {
     border: none;
     border-radius: 10px;
     width: 50%;
+    padding: 10px;
+    margin: 20px 0;
 }
 
 button:hover {
@@ -50,14 +53,16 @@ input {
     left: 25%;
     font-size: 1.5rem;
     width: 50%;
+    padding: 5px;
+    margin: 10px 0;
 }
 
 ul {
     position: relative;
     left: 30%;
 }
 
-@media screen and (max-width:1024px) {
+@media screen and (max-width: 1024px) {
     input {
         position: relative;
         left: 15%;
@@ -70,4 +75,4 @@ ul {
     ul {
         left: 10%;
     }
-}
+}
diff --git a/index.html b/index.html
@@ -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;">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,4 +18,4 @@ Projectile Motion Calculator calculates the Maximum height, Range, Time of fligh

		## Screenshots :-

		![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/2433e29d-cd24-41f2-ae87-01f2c04622fa)
		![image](<Screenshot 2024-12-23 172745.png>)