-
Notifications
You must be signed in to change notification settings - Fork 402
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Charles Law Calculator (#1961)
- Loading branch information
1 parent
af91881
commit 90a9812
Showing
6 changed files
with
193 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
# <p align="center">Charles Law Calculator</p> | ||
|
||
## Description :- | ||
|
||
This is a web-based calculator that implements **Charles' Law**: | ||
|
||
\[(V_1 / T_1) = (V_2 / T_2)\] | ||
|
||
It allows users to calculate: | ||
|
||
- Final Volume \( V_2 \) | ||
- Final Temperature \( T_2 \) | ||
|
||
The calculator dynamically updates based on user inputs and provides instant results. | ||
|
||
## Tech Stacks :- | ||
|
||
- HTML | ||
- CSS | ||
- JavaScript | ||
|
||
## Features :- | ||
|
||
- **Dynamic Formula Display**: The formula for Charles' Law is displayed on the website for reference. | ||
- **Real-Time Results**: Automatically calculates the missing value when valid inputs are provided. | ||
- **Responsive Design**: The calculator works seamlessly across devices. | ||
- **Error Handling**: Guides the user with error messages for invalid or incomplete inputs. | ||
|
||
## How to Use :- | ||
|
||
1. Enter known values for \( V_1 \), \( T_1 \), and one of \( V_2 \) or \( T_2 \). | ||
2. Click the "Calculate" button to get the result. | ||
3. The missing value will be calculated using the formula: | ||
\[(V_1 / T_1) = (V_2 / T_2)\] | ||
4. Clear inputs or refresh the page to reset the calculator. | ||
|
||
## Example Calculations :- | ||
|
||
#### Case 1: Calculate Final Volume (\( V_2 \)) | ||
- **Input**: | ||
- Initial Volume (\( V_1 \)): `2 L` | ||
- Initial Temperature (\( T_1 \)): `300 K` | ||
- Final Temperature (\( T_2 \)): `450 K` | ||
- **Output**: | ||
- \( V_2 = (2 × 450) / 300 = 3 L\) | ||
|
||
#### Case 2: Calculate Final Temperature (\( T_2 \)) | ||
- **Input**: | ||
- Initial Volume (\( V_1 \)): `2 L` | ||
- Initial Temperature (\( T_1 \)): `300 K` | ||
- Final Volume (\( V_2 \)): `4 L` | ||
- **Output**: | ||
- \( T_2 = (4 × 300) / 2 = 600 K\) | ||
|
||
## Screenshots :- | ||
|
||
![image](https://github.com/user-attachments/assets/8ab75b48-15cf-4558-b7ab-be2a3d0d04d8) |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<!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>Charles Law Calculator</title> | ||
</head> | ||
|
||
<body> | ||
<div class="calculator"> | ||
<h1>Charles' Law Calculator</h1> | ||
<p class="formula">Formula: <strong>(V₁ / T₁) = (V₂ / T₂)</strong></p> | ||
|
||
<label for="v1">Initial Volume (V₁):</label> | ||
<input type="number" id="v1" placeholder="Enter V₁ (in liters)"> | ||
|
||
<label for="t1">Initial Temperature (T₁):</label> | ||
<input type="number" id="t1" placeholder="Enter T₁ (in Kelvin)"> | ||
|
||
<label for="v2">Final Volume (V₂):</label> | ||
<input type="number" id="v2" placeholder="Enter V₂ (in liters)"> | ||
|
||
<label for="t2">Final Temperature (T₂):</label> | ||
<input type="number" id="t2" placeholder="Enter T₂ (in Kelvin)"> | ||
|
||
<button onclick="calculateCharlesLaw()">Calculate</button> | ||
<div class="result" id="result"></div> | ||
</div> | ||
|
||
<script src="script.js"></script> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
function calculateCharlesLaw() { | ||
const v1 = parseFloat(document.getElementById('v1').value); | ||
const t1 = parseFloat(document.getElementById('t1').value); | ||
const v2 = parseFloat(document.getElementById('v2').value); | ||
const t2 = parseFloat(document.getElementById('t2').value); | ||
|
||
let resultText = ""; | ||
|
||
if (!isNaN(v1) && !isNaN(t1) && isNaN(v2) && !isNaN(t2)) { | ||
// Calculate Final Volume (V2) | ||
const v2Calculated = (v1 * t2) / t1; | ||
resultText = `V₂ = (${v1} x ${t2}) / ${t1} = ${v2Calculated.toFixed(2)} liters`; | ||
} else if (!isNaN(v1) && !isNaN(t1) && !isNaN(v2) && isNaN(t2)) { | ||
// Calculate Final Temperature (T2) | ||
const t2Calculated = (v2 * t1) / v1; | ||
resultText = `T₂ = (${v2} x ${t1}) / ${v1} = ${t2Calculated.toFixed(2)} K`; | ||
} else if (isNaN(v1) || isNaN(t1)) { | ||
resultText = "Please enter valid values for initial volume (V₁) and initial temperature (T₁)."; | ||
} else if (isNaN(v2) && isNaN(t2)) { | ||
resultText = "Please provide either final volume (V₂) or final temperature (T₂) to calculate."; | ||
} else { | ||
resultText = "Invalid input combination. Please ensure only one value is missing for calculation."; | ||
} | ||
|
||
document.getElementById('result').innerText = resultText; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
body { | ||
font-family: Arial, sans-serif; | ||
background-image: url('assets/background.webp'); | ||
background-size: cover; | ||
margin: 0; | ||
padding: 0; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
height: 100%; | ||
min-height: 100vh; | ||
} | ||
|
||
.calculator { | ||
background: rgba(255, 255, 255, 0.9); | ||
padding: 20px; | ||
border-radius: 8px; | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
width: 350px; | ||
text-align: center; | ||
} | ||
|
||
h1 { | ||
font-size: 24px; | ||
margin-bottom: 10px; | ||
} | ||
|
||
.formula { | ||
font-size: 16px; | ||
margin-bottom: 20px; | ||
color: #555; | ||
} | ||
|
||
label { | ||
font-size: 16px; | ||
margin: 10px 0; | ||
display: block; | ||
} | ||
|
||
input { | ||
width: calc(100% - 20px); | ||
padding: 10px; | ||
margin-bottom: 20px; | ||
font-size: 16px; | ||
border: 1px solid #ccc; | ||
border-radius: 4px; | ||
} | ||
|
||
button { | ||
background-color: #007bff; | ||
color: white; | ||
padding: 10px 20px; | ||
border: none; | ||
border-radius: 4px; | ||
font-size: 16px; | ||
cursor: pointer; | ||
margin-top: 10px; | ||
} | ||
|
||
button:hover { | ||
background-color: #0056b3; | ||
} | ||
|
||
.result { | ||
margin-top: 20px; | ||
font-size: 18px; | ||
font-weight: bold; | ||
color: #333; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters