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.

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 Charles Law Calculator #1961

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
89 changes: 89 additions & 0 deletions Calculators/Charles-Law-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
# Charles' Law Calculator

## Overview

This project 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.

## 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.

## Project Structure

```
charles-law-calculator/
├── index.html # HTML structure of the calculator
├── style.css # Styling for the calculator
├── script.js # JavaScript functionality for calculations
├── README.md # Project documentation
└── assets/
└── background.jpg # Background image for the calculator
```

## Setup and Usage

### 1. Clone the Repository

```bash
git clone <repository-url>
```

### 2. Navigate to the Project Directory

```bash
cd charles-law-calculator
```

### 3. Open the Application

Open `index.html` in any modern web browser to use the calculator.

## 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\)

## Technologies Used

- **HTML**: For the calculator structure.
- **CSS**: For styling and responsive design.
- **JavaScript**: For implementing Charles' Law functionality.

## License

This project is open-source and available under the MIT License.
Binary file not shown.
31 changes: 31 additions & 0 deletions Calculators/Charles-Law-Calculator/index.html
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>Charles' Law Calculator</title>
<link rel="stylesheet" href="style.css" />
</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>
26 changes: 26 additions & 0 deletions Calculators/Charles-Law-Calculator/script.js
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} × ${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} × ${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;
}
68 changes: 68 additions & 0 deletions Calculators/Charles-Law-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
body {
font-family: Arial, sans-serif;
background-image: url('/Calculators/Charles-Law-Calculator/assest/background.webp');
background-size: cover;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
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;
}
Loading