Added changes

Rakesh9100 · Jan 4, 2025 · 2219d57 · 2219d57
1 parent d55ccef
commit 2219d57
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 81 deletions.
diff --git a/...lators/Moles-to-Gram-Calculator/README.md → Calculators/Moles-Grams-Calculator/README.md b/...lators/Moles-to-Gram-Calculator/README.md → Calculators/Moles-Grams-Calculator/README.md
@@ -1,50 +1,27 @@
-# Moles and Grams Calculator
+# <p align="center">Moles Grams Calculator</p>
 
-## Overview
+## 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.
 
-## Features
+## 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.
 
-## Project Structure
-
-```
-moles-grams-switch-calculator/
-├── index.html       # HTML structure of the calculator
-├── style.css        # Styling for the calculator
-├── script.js        # JavaScript functionality for calculations and toggle
-├── 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 Directory**:
-
-   ```bash
-   cd moles-grams-switch-calculator
-   ```
-
-3. **Open the Application**:
-   Open `index.html` in your browser to use the calculator.
-
-## How to Use
+## How to Use :-
 
 1. **Default Mode (Moles to Grams)**:
 
@@ -60,30 +37,24 @@ moles-grams-switch-calculator/
 3. **Clear Inputs**:
    - Switch modes or refresh the page to clear inputs.
 
-## Example Calculations
-
-### Moles to Grams
+## Example Calculations :-
 
+### Moles to Grams:
 - **Input**:
   - Moles: `2`
   - Molar Mass: `18`
 - **Output**:
   - `2 moles × 18 g/mol = 36 grams`
 
-### Grams to Moles
-
+### Grams to Moles:
 - **Input**:
   - Grams: `36`
   - Molar Mass: `18`
 - **Output**:
   - `36 grams ÷ 18 g/mol = 2 moles`
 
-## Technologies Used
-
-- **HTML**: For creating the structure.
-- **CSS**: For styling the calculator.
-- **JavaScript**: For implementing the functionality.
+## Screenshots :-
 
-## License
+![image](https://github.com/user-attachments/assets/08771d4d-0c7e-487d-8f21-67fc977d3ab1)
 
-This project is open-source and available under the MIT License.
+![image](https://github.com/user-attachments/assets/550079ed-4989-4a89-9d8b-13d5b4dc8cfc)
diff --git a/...to-Gram-Calculator/assests/background.jpg → ...es-Grams-Calculator/assets/background.jpg b/...to-Gram-Calculator/assests/background.jpg → ...es-Grams-Calculator/assets/background.jpg
diff --git a/Calculators/Moles-Grams-Calculator/index.html b/Calculators/Moles-Grams-Calculator/index.html
@@ -0,0 +1,32 @@
+<!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>Moles Grams Calculator</title>
+</head>
+
+<body>
+    <div class="calculator">
+        <h1 id="calc-title">Moles to Grams Calculator</h1>
+
+        <label for="input1" id="label1">Enter Moles:</label>
+        <input type="number" id="input1" placeholder="Enter number of moles">
+
+        <label for="input2" id="label2">Enter Molar Mass (g/mol):</label>
+        <input type="number" id="input2" placeholder="Enter molar mass">
+
+        <button onclick="calculate()">Calculate</button>
+        <div class="result" id="result"></div>
+
+        <button class="switch-btn" onclick="toggleMode()">
+        Switch to Grams to Moles
+        </button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/...lators/Moles-to-Gram-Calculator/script.js → Calculators/Moles-Grams-Calculator/script.js b/...lators/Moles-to-Gram-Calculator/script.js → Calculators/Moles-Grams-Calculator/script.js
@@ -12,7 +12,7 @@ function calculate() {
     let result;
     if (mode === 'moles-to-grams') {
         result = input1 * input2; // Moles to grams
-        document.getElementById('result').innerText = `${input1} moles × ${input2} g/mol = ${result.toFixed(2)} 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`;
@@ -39,4 +39,4 @@ function toggleMode() {
     document.getElementById('result').innerText = '';
     document.getElementById('input1').value = '';
     document.getElementById('input2').value = '';
-}
+}
diff --git a/...lators/Moles-to-Gram-Calculator/style.css → Calculators/Moles-Grams-Calculator/style.css b/...lators/Moles-to-Gram-Calculator/style.css → Calculators/Moles-Grams-Calculator/style.css
@@ -1,13 +1,14 @@
 body {
     font-family: Arial, sans-serif;
-    background-image: url('/Calculators/Moles-to-Gram-Calculator/assests/background.jpg');
+    background-image: url('assets/background.jpg');
     background-size: cover;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    height: 100%;
+    min-height: 100vh;
 }
 
 .calculator {
@@ -67,4 +68,4 @@ button:hover {
     font-size: 18px;
     font-weight: bold;
     color: #333;
-}
+}
diff --git a/Calculators/Moles-to-Gram-Calculator/index.html b/Calculators/Moles-to-Gram-Calculator/index.html
diff --git a/calculators.json b/calculators.json
@@ -1512,11 +1512,11 @@
         "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Molecular-Weight-Calculator"
     },
     {
-        "title": "Moles-to-Gram-Calculator",
-        "description": "A calculator to convert between moles and grams using the molar mass of a substance. This includes: \n1. **Moles to Grams** conversion: Moles * Molar Mass = Grams \n2. **Grams to Moles** conversion: Grams / Molar Mass = Moles. \nThe user interface will allow easy input of mass and molar mass with an option to switch between calculations.",
-        "link": "./Calculators/Moles-to-Gram-Calculator/index.html",
-        "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Moles-to-Gram-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.",