Added Atomic Composition Calculator (#1669)

Rakesh9100 · Jul 30, 2024 · 7cca87a · 7cca87a
1 parent f630ca0
commit 7cca87a
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 0 deletions.
diff --git a/Calculators/Atomic-Composition-Calculator/README.md b/Calculators/Atomic-Composition-Calculator/README.md
@@ -0,0 +1,21 @@
+# <p align="center">Atomic Composition Calculator</p>
+
+## Description :-
+
+This calculator determines the number of protons, neutrons, and electrons in an atom based on its atomic number, atomic mass, and charge. It supports both neutral atoms and ions.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Calculates the number of protons, neutrons, and electrons based on atomic number, atomic mass, and charge.
+- Handles ions by allowing the user to input the charge, which affects the number of electrons.
+- Ensures valid user inputs and displays an alert for invalid entries.
+
+## Screenshots :-
+
+![Screenshot 2024-07-18 002317](https://github.com/user-attachments/assets/3adc2f24-a900-4303-bcb5-45d3f8a54493)
diff --git a/Calculators/Atomic-Composition-Calculator/index.html b/Calculators/Atomic-Composition-Calculator/index.html
@@ -0,0 +1,30 @@
+<!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>Atomic Composition Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Atomic Composition Calculator</h1>
+        <form id="calcForm">
+            <label for="atomicNumber">Atomic Number (Z):</label>
+            <input type="number" id="atomicNumber" name="atomicNumber" required />
+            <label for="atomicMass">Atomic Mass (A):</label>
+            <input type="number" id="atomicMass" name="atomicMass" required />
+            <label for="charge">Charge (optional, for ions):</label>
+            <input type="number" id="charge" name="charge" />
+            <button type="submit">Calculate</button>
+        </form>
+        <div id="results" class="results">
+            <h2>Results</h2>
+            <p id="protonsResult"></p>
+            <p id="neutronsResult"></p>
+            <p id="electronsResult"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Atomic-Composition-Calculator/script.js b/Calculators/Atomic-Composition-Calculator/script.js
@@ -0,0 +1,32 @@
+document.getElementById('calcForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const atomicNumber = parseInt(document.getElementById('atomicNumber').value);
+    const atomicMass = parseFloat(document.getElementById('atomicMass').value);
+    const charge = parseInt(document.getElementById('charge').value) || 0;
+
+    if ( atomicNumber < 1 || atomicNumber > 118) {
+        alert('Please enter valid a Atomic Number');
+        return;
+    }
+
+    if ( atomicMass < atomicNumber ) {
+        alert(`Atomic Mass cannot be less than Atomic Number`);
+        return;
+    }
+
+    if ( charge > atomicNumber ) {
+        alert(`Charge cannot be greater than Atomic Number`);
+        return;
+    }
+
+    const protons = atomicNumber;
+    const electrons = atomicNumber - charge;
+    const neutrons = Math.round(atomicMass) - atomicNumber;
+
+    document.getElementById('protonsResult').innerText = `Number of Protons: ${protons}`;
+    document.getElementById('electronsResult').innerText = `Number of Electrons: ${electrons}`;
+    document.getElementById('neutronsResult').innerText = `Number of Neutrons: ${neutrons}`;
+
+    document.getElementById('results').style.display = 'block';
+});
diff --git a/Calculators/Atomic-Composition-Calculator/style.css b/Calculators/Atomic-Composition-Calculator/style.css
@@ -0,0 +1,57 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(to right, #74ebd5, #acb6e5);
+}
+
+.container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+    max-width: 400px;
+    font-family: 'Open Sans', sans-serif;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+    color: #333;
+    margin: 7% auto;
+}
+
+h1 {
+    text-align: center;
+    font-family: 'Arial Black', sans-serif; 
+    border-bottom: 4px solid black;
+    padding-bottom: 10px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #14ca5a; 
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1.15em;
+}
+
+button:hover {
+    background-color: #279451;
+}
+
+input {
+    margin: 5px 0 15px 0;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: calc(100% - 22px);
+}
+
+.results {
+    display: none;
+    margin-top: 20px;
+}
+
+.results h2 {
+    margin-bottom: 10px;
+}
diff --git a/index.html b/index.html
@@ -407,6 +407,20 @@ <h3>Calculates the age on different planets as selected by the user.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Atomic Composition Calculator</h2>
+                <h3>Calculates the number of protons, neutrons, and electrons in an atom.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Atomic-Composition-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Atomic-Composition-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Automorphic Number Calculator</h2>