From 7cca87a40c17145c8058212ed1bb5f8787ee00c1 Mon Sep 17 00:00:00 2001 From: Bharat Choudhary <125469847+bharat-c27@users.noreply.github.com> Date: Tue, 30 Jul 2024 21:04:26 +0530 Subject: [PATCH] Added Atomic Composition Calculator (#1669) --- .../Atomic-Composition-Calculator/README.md | 21 +++++++ .../Atomic-Composition-Calculator/index.html | 30 ++++++++++ .../Atomic-Composition-Calculator/script.js | 32 +++++++++++ .../Atomic-Composition-Calculator/style.css | 57 +++++++++++++++++++ index.html | 14 +++++ 5 files changed, 154 insertions(+) create mode 100644 Calculators/Atomic-Composition-Calculator/README.md create mode 100644 Calculators/Atomic-Composition-Calculator/index.html create mode 100644 Calculators/Atomic-Composition-Calculator/script.js create mode 100644 Calculators/Atomic-Composition-Calculator/style.css diff --git a/Calculators/Atomic-Composition-Calculator/README.md b/Calculators/Atomic-Composition-Calculator/README.md new file mode 100644 index 000000000..6eec60897 --- /dev/null +++ b/Calculators/Atomic-Composition-Calculator/README.md @@ -0,0 +1,21 @@ +#

Atomic Composition Calculator

+ +## 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 new file mode 100644 index 000000000..7952e8c5a --- /dev/null +++ b/Calculators/Atomic-Composition-Calculator/index.html @@ -0,0 +1,30 @@ + + + + + + + Atomic Composition Calculator + + +
+

Atomic Composition Calculator

+
+ + + + + + + +
+
+

Results

+

+

+

+
+
+ + + diff --git a/Calculators/Atomic-Composition-Calculator/script.js b/Calculators/Atomic-Composition-Calculator/script.js new file mode 100644 index 000000000..ce4b34110 --- /dev/null +++ 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 new file mode 100644 index 000000000..a88e4f9ff --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/index.html b/index.html index ae929b0ea..ea1366fb6 100644 --- a/index.html +++ b/index.html @@ -407,6 +407,20 @@

Calculates the age on different planets as selected by the user.

+
+
+

Atomic Composition Calculator

+

Calculates the number of protons, neutrons, and electrons in an atom.

+
+ + + + + Source Code + +
+
+

Automorphic Number Calculator