Added Chemical Visualizer WebApp

Austin-Nicholas · Austin-Nicholas · commit 2224a1cadced · 2025-02-22T09:27:14.000-05:00
diff --git a/Chemical Visualizer.png b/Chemical Visualizer.png
diff --git a/ChemicalVisualization.css b/ChemicalVisualization.css
@@ -0,0 +1,61 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .container {
+    max-width: 600px;
+    margin: 50px auto;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  h1 {
+    color: #333;
+  }
+  
+  input {
+    width: 80%;
+    padding: 10px;
+    margin-top: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  
+  button {
+    padding: 10px 15px;
+    margin-top: 10px;
+    background: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background: #218838;
+  }
+  
+  .canvas-container {
+    margin-top: 20px;
+  }
+  
+  /* Centering description text */
+  .description {
+    margin-top: 30px;
+    padding: 10px;
+    background-color: #f1f1f1;
+    border-radius: 8px;
+    font-size: 1rem;
+    color: #555;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+  
diff --git a/ChemicalVisualization.html b/ChemicalVisualization.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Chemical Visualizer</title>
+  <link rel="stylesheet" href="ChemicalVisualization.css">  <!-- Updated CSS file name -->
+  <!-- Include SmilesDrawer from a CDN -->
+  <script src="https://unpkg.com/smiles-drawer@2.0.3/dist/smiles-drawer.min.js"></script>
+</head>
+<body>
+  <!-- Navbar dynamically loaded here -->
+  <div id="navbar-container"></div>
+  <script>
+    fetch('/navbar.html') 
+      .then(response => response.text())
+      .then(data => document.getElementById('navbar-container').innerHTML = data);
+  </script>
+
+  <div class="container">
+    <h1>Chemical Visualizer</h1>
+    <input type="text" id="chemicalFormula" placeholder="Enter chemical formula or IUPAC name (e.g., C6H6)">
+    <button onclick="renderMolecule()">Visualize</button>
+    <div class="canvas-container">
+      <canvas id="moleculeCanvas" width="400" height="400"></canvas>
+    </div>
+  </div>
+
+  <!-- Description section at the bottom, centered -->
+  <div class="description">
+    <p>
+      This web app allows users to input chemical names or formulas. It then uses PubChem's API to retrieve the corresponding SMILES notation for the molecule. The SMILES string is then rendered as a 2D visual representation using the SmilesDrawer JavaScript module.
+    </p>
+  </div>
+
+  <script src="ChemicalVisualization.js"></script>  <!-- Updated JS file name -->
+</body>
+</html>
diff --git a/ChemicalVisualization.js b/ChemicalVisualization.js
@@ -0,0 +1,39 @@
+// Function to fetch SMILES from PubChem and render the molecule using SmilesDrawer
+function renderMolecule() {
+    const formula = document.getElementById("chemicalFormula").value.trim();
+    if (!formula) {
+      alert("Please enter a valid chemical formula.");
+      return;
+    }
+  
+    // Use PubChem API to fetch the Isomeric SMILES string for the given compound
+    fetch(`https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${formula}/property/IsomericSMILES/JSON`)
+      .then(response => response.json())
+      .then(data => {
+        if (data.PropertyTable && data.PropertyTable.Properties.length > 0) {
+          const smiles = data.PropertyTable.Properties[0].IsomericSMILES;
+          // Use SmilesDrawer to parse and render the SMILES string
+          SmilesDrawer.parse(smiles, function(tree) {
+            const drawer = new SmilesDrawer.Drawer({width: 400, height: 400});
+            drawer.draw(tree, 'moleculeCanvas', 'light', false);
+          }, function(err) {
+            console.error("Error parsing SMILES:", err);
+            alert("Error parsing molecule data.");
+          });
+        } else {
+          alert("Molecule not found. Try a different formula.");
+        }
+      })
+      .catch(error => {
+        console.error("Error fetching molecule data:", error);
+        alert("Failed to retrieve molecule data.");
+      });
+}
+
+// Event listener to trigger renderMolecule function when "Enter" is pressed
+document.getElementById("chemicalFormula").addEventListener("keypress", function(event) {
+    if (event.key === "Enter") {
+        event.preventDefault();  // Prevent form submission (if wrapped in form)
+        renderMolecule();        // Trigger the molecule rendering
+    }
+});
