diff --git a/Calculators/Moles-Grams-Calculator/README.md b/Calculators/Moles-Grams-Calculator/README.md new file mode 100644 index 000000000..3f22e43e5 --- /dev/null +++ b/Calculators/Moles-Grams-Calculator/README.md @@ -0,0 +1,60 @@ +#

Moles Grams Calculator

+ +## Description :- + +This project is a web-based calculator that allows users to: + +- Convert **Moles to Grams**. +- Convert **Grams to Moles**. +- Switch between calculation modes seamlessly. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Features :- + +- **Dynamic Mode Switching**: Toggle between "Moles to Grams" and "Grams to Moles" calculations. +- **Responsive Design**: User-friendly interface that works on all screen sizes. +- **Real-Time Results**: Instant calculation results based on input values. +- **Background Styling**: Beautiful background image to enhance user experience. + +## How to Use :- + +1. **Default Mode (Moles to Grams)**: + + - Enter the number of moles and the molar mass. + - Click the "Calculate" button to get the result. + +2. **Switch Mode (Grams to Moles)**: + + - Click the "Switch to Grams to Moles" button. + - Enter the grams and the molar mass. + - Click the "Calculate" button to get the result. + +3. **Clear Inputs**: + - Switch modes or refresh the page to clear inputs. + +## Example Calculations :- + +### Moles to Grams: +- **Input**: + - Moles: `2` + - Molar Mass: `18` +- **Output**: + - `2 moles × 18 g/mol = 36 grams` + +### Grams to Moles: +- **Input**: + - Grams: `36` + - Molar Mass: `18` +- **Output**: + - `36 grams ÷ 18 g/mol = 2 moles` + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/08771d4d-0c7e-487d-8f21-67fc977d3ab1) + +![image](https://github.com/user-attachments/assets/550079ed-4989-4a89-9d8b-13d5b4dc8cfc) diff --git a/Calculators/Moles-Grams-Calculator/assets/background.jpg b/Calculators/Moles-Grams-Calculator/assets/background.jpg new file mode 100644 index 000000000..d768d8cbe Binary files /dev/null and b/Calculators/Moles-Grams-Calculator/assets/background.jpg differ diff --git a/Calculators/Moles-Grams-Calculator/index.html b/Calculators/Moles-Grams-Calculator/index.html new file mode 100644 index 000000000..f1c3570fd --- /dev/null +++ b/Calculators/Moles-Grams-Calculator/index.html @@ -0,0 +1,32 @@ + + + + + + + + Moles Grams Calculator + + + +
+

Moles to Grams Calculator

+ + + + + + + + +
+ + +
+ + + + + \ No newline at end of file diff --git a/Calculators/Moles-Grams-Calculator/script.js b/Calculators/Moles-Grams-Calculator/script.js new file mode 100644 index 000000000..e172d31aa --- /dev/null +++ b/Calculators/Moles-Grams-Calculator/script.js @@ -0,0 +1,42 @@ +let mode = 'moles-to-grams'; // Default mode + +function calculate() { + const input1 = parseFloat(document.getElementById('input1').value); + const input2 = parseFloat(document.getElementById('input2').value); + + if (isNaN(input1) || isNaN(input2)) { + document.getElementById('result').innerText = 'Please enter valid numbers for both fields.'; + return; + } + + let result; + if (mode === 'moles-to-grams') { + result = input1 * input2; // Moles to grams + document.getElementById('result').innerText = `${input1} moles x ${input2} g/mol = ${result.toFixed(2)} grams`; + } else { + result = input1 / input2; // Grams to moles + document.getElementById('result').innerText = `${input1} grams ÷ ${input2} g/mol = ${result.toFixed(2)} moles`; + } +} + +function toggleMode() { + mode = mode === 'moles-to-grams' ? 'grams-to-moles' : 'moles-to-grams'; + + // Update UI based on mode + if (mode === 'moles-to-grams') { + document.getElementById('calc-title').innerText = 'Moles to Grams Calculator'; + document.getElementById('label1').innerText = 'Enter Moles:'; + document.getElementById('label2').innerText = 'Enter Molar Mass (g/mol):'; + document.querySelector('.switch-btn').innerText = 'Switch to Grams to Moles'; + } else { + document.getElementById('calc-title').innerText = 'Grams to Moles Calculator'; + document.getElementById('label1').innerText = 'Enter Grams:'; + document.getElementById('label2').innerText = 'Enter Molar Mass (g/mol):'; + document.querySelector('.switch-btn').innerText = 'Switch to Moles to Grams'; + } + + // Clear result and inputs + document.getElementById('result').innerText = ''; + document.getElementById('input1').value = ''; + document.getElementById('input2').value = ''; +} \ No newline at end of file diff --git a/Calculators/Moles-Grams-Calculator/style.css b/Calculators/Moles-Grams-Calculator/style.css new file mode 100644 index 000000000..c7ad65ea8 --- /dev/null +++ b/Calculators/Moles-Grams-Calculator/style.css @@ -0,0 +1,71 @@ +body { + font-family: Arial, sans-serif; + background-image: url('assets/background.jpg'); + 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: 20px; +} + +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; +} + +.switch-btn { + background-color: #28a745; +} + +.switch-btn:hover { + background-color: #1e7e34; +} + +.result { + margin-top: 20px; + font-size: 18px; + font-weight: bold; + color: #333; +} \ No newline at end of file diff --git a/calculators.json b/calculators.json index bac64ecfc..81c716ccf 100644 --- a/calculators.json +++ b/calculators.json @@ -1511,6 +1511,12 @@ "link": "./Calculators/Molecular-Weight-Calculator/index.html", "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Molecular-Weight-Calculator" }, + { + "title": "Moles Grams Calculator", + "description": "Converts between moles and grams using the molar mass of a substance.", + "link": "./Calculators/Moles-Grams-Calculator/index.html", + "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Moles-Grams-Calculator" + }, { "title": "Momentum Calculator", "description": "Calculates the momentum of the body using its mass and velocity.",