Added Periodic Table Calculator (#1178)

Rakesh9100 · Jun 5, 2024 · 6e2e1df · 6e2e1df
1 parent 550be82
commit 6e2e1df
Show file tree

Hide file tree

Showing 5 changed files with 441 additions and 0 deletions.
diff --git a/Calculators/Periodic-Table-Calculator/README.md b/Calculators/Periodic-Table-Calculator/README.md
@@ -0,0 +1,30 @@
+# <p align="center">Periodic Table Calculator</p>
+
+## Description :-
+
+The Periodic Table Calculator is a tool designed to provide detailed information about elements in the periodic table. This calculator allows users to input various properties or characteristics of an element and receive relevant data, including atomic number, atomic mass, electron configuration, and more.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- **Element Lookup**: Search for an element by name or symbol to retrieve detailed information.
+- **Property Calculations**: Calculate properties such as atomic mass, electron configuration, and more.
+- **Interactive Table**: Explore the periodic table interactively.
+
+## How to Use :-
+
+1. **Search by Name or Symbol**: Enter the name or symbol of an element to get detailed information.
+2. **Input Properties**: Enter properties such as atomic number or atomic mass to calculate related data.
+3. **Compare Elements**: Select multiple elements to compare their properties.
+4. **Interactive Exploration**: Click on elements in the interactive periodic table to view details.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/9148026d-4d35-4f89-91ca-5bc76baeb70a)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/927d2756-1533-4224-b64d-d9c6cce4ddaf)
diff --git a/Calculators/Periodic-Table-Calculator/index.html b/Calculators/Periodic-Table-Calculator/index.html
@@ -0,0 +1,36 @@
+<!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>Periodic Table Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Periodic Table Calculator</h1>
+
+        <!-- Periodic Table Card -->
+        <div class="card">
+            <table id="periodic-table"></table>
+        </div>
+
+        <!-- Table Details Card -->
+        <div class="card" id="element-info" style="display: none;">
+            <p id="element-name"></p>
+            <p id="element-symbol"></p>
+            <p id="element-atomic-number"></p>
+            <p id="element-atomic-mass"></p>
+            <p id="element-summary"></p>
+        </div>
+
+        <!-- Mass Calculator Card -->
+        <div class="card" id="periodic-table-calculator">
+            <input type="text" id="mass-input" placeholder="Enter element symbol">
+            <button onclick="calculateMass()">Calculate Mass</button>
+            <p id="calculated-mass"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>