On day 3, we worked on the content itself, which is required for any website. It may feel weird to call this as Day 4, as it is technically day 6.
Yeah, I know it sounds odd, but on Saturday and on Sundays, I don’t work. I spend time with my family and relax, instead of working. Keep in mind, as a developer, it is essential to keep work-life balance.
Today I’ll develop, the Covalent Radii Calculator. This was a suggestion given by Noah Kleij, on Day 3, and I had implemented a basic version of that in that day only, but, today I’ll make a dedicated page for it inside the directory Chemistry/3/covalent-radii-and-bond-length.html. There are no covalent radii calculators on the market, at least not searchable on Google.
Okay, now let’s work on creating the calculator page.
Hour 22: Adding a Calculator
I’ll create the covalent-radii-and-bond-length.html file inside the Chemistry/3/ directory. This page will include the Covalent Radii Calculator that we worked on yesterday.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covalent Radii Calculator </title>
<!-- styles and scripts -->
</head>
<body>
<main>
<!-- Content goes here -->
</main>
<!-- script for molecule calculation and styles -->
</body>
</html>
This has the usual basic HTML, but I intentionally kept it minimal for this page.
Now, let’s copy over the text, and also the calculator, and see if everything works. I had written the description using ChatGPT multiple times, as it just wouldn’t kill in one go took a lot of time in prompting it.
<main>
<div class="calculator-container">
<h2>Covalent Radius Calculator</h2>
<div class="calculator-controls">
<input type="text" id="molecule-input" placeholder="Enter Molecule (e.g., H2O, NaCl, Na2SO4)">
<button id="calculate-btn-56">Calculate</button>
</div>
<div id="calculator-output-56">
<!-- Results will be inserted here -->
</div>
<div id="molecule-svg-container">
<!-- SVG will be inserted here -->
</div>
<strong>Note:</strong> The calculator's data is derived from general trends and experimental data. It should provide reasonably accurate covalent radius approximations based on the inputted molecular formula.
</div>
<h1 id="covalent-radius-calculator-your-go-to-tool-for-understanding-atomic-size-and-chemical-bonds">Covalent Radius Calculator: Your Go-To Tool for Understanding Atomic Size and Chemical Bonds</h1>
<p>In the fascinating world of chemistry, understanding the properties of atoms and how they interact is fundamental. One crucial property is the <strong>covalent radius</strong>, which provides insights into the size of an atom when it forms a covalent bond. Are you looking for a quick and easy way to determine the covalent radii of elements within a molecule and even estimate bond lengths? Look no further! Our <strong>Covalent Radius Calculator</strong> is designed to be your ultimate online resource.</p>
<h2 id="why-is-covalent-radius-important-">Why is Covalent Radius Important?</h2>
<p>The covalent radius is more than just a number. It plays a vital role in understanding:</p>
<ul>
<li><strong>Bond Lengths:</strong> The distance between the nuclei of two covalently bonded atoms is closely related to their covalent radii. Our calculator goes a step further by <strong>estimating bond lengths</strong> based on the calculated covalent radii, providing valuable information about the geometry and stability of molecules.</li>
<li><strong>Molecular Shape and Size:</strong> Knowing the covalent radii helps visualize the overall size and shape of molecules. This is crucial in understanding how molecules interact with each other, influencing their physical and chemical properties.</li>
<li><strong>Reactivity:</strong> The size of an atom can influence its ability to attract and share electrons, thus affecting its reactivity in chemical reactions.</li>
<li><strong>Intermolecular Forces:</strong> Covalent radii indirectly influence the strength of intermolecular forces, which determine the physical states and properties of substances.</li>
</ul>
<h2 id="introducing-our-powerful-covalent-radius-calculator">Introducing Our Powerful Covalent Radius Calculator</h2>
<p>Our Covalent Radius Calculator is specifically built to simplify the process of understanding atomic sizes within molecules. Here's how it works and why it stands out:</p>
<p><strong>Key Features:</strong></p>
<ul>
<li><strong>Easy-to-Use Interface:</strong> Simply input the molecular formula (e.g., H2O, NaCl, Na2SO4) into the designated field. The intuitive design ensures a seamless experience for users of all levels, from students to seasoned chemists.</li>
<li><strong>Instant Calculations:</strong> With a click of a button, the calculator rapidly processes your input and provides a clear output. No more tedious manual calculations or searching through tables!</li>
<li><strong>Individual Covalent Radii:</strong> The calculator identifies the elements present in the molecule and displays their respective covalent radii in picometers (pm). This helps you understand the contribution of each atom to the overall molecular size.</li>
<li><strong>Estimated Bond Lengths:</strong> Going beyond just individual radii, our calculator <strong>estimates the bond lengths</strong> between the different atoms within the molecule. This utilizes established principles relating covalent radii and electronegativity differences to provide a practical approximation of bond distances.</li>
<li><strong>Comprehensive Data:</strong> The calculator draws upon a robust database of covalent radii and electronegativity values for a wide range of elements, ensuring reliable results.</li>
<li><strong>Educational Value:</strong> Whether you're a student learning about chemical bonding or a researcher needing quick estimations, this tool enhances understanding and saves valuable time.</li>
<li><strong>Mobile-Friendly Design:</strong> Access our calculator on any device, whether it's a desktop computer, tablet, or smartphone.</li>
</ul>
<h2 id="how-to-use-the-covalent-radius-calculator-">How to Use the Covalent Radius Calculator:</h2>
<ol>
<li><strong>Enter the Molecular Formula:</strong> In the input field labeled "Enter Molecule," type the chemical formula of the molecule you want to analyze. Be sure to use correct capitalization for element symbols (e.g., 'C' for carbon, 'Cl' for chlorine).</li>
<li><strong>Click "Calculate":</strong> Press the "Calculate" button to initiate the process.</li>
<li><strong>View the Results:</strong> The output section will display a table showing:<ul>
<li><strong>Element:</strong> The symbol of each element present in the molecule.</li>
<li><strong>Covalent Radius (pm):</strong> The estimated covalent radius of that element.</li>
<li><strong>Estimated Bond Lengths (pm):</strong> A table showing the estimated bond lengths between different pairs of atoms within the molecule.</li>
</ul>
</li>
</ol>
<h2 id="why-choose-our-covalent-radius-calculator-">Why Choose Our Covalent Radius Calculator?</h2>
<ul>
<li><strong>Accuracy and Reliability:</strong> We utilize established data and formulas to provide reasonably accurate estimations of covalent radii and bond lengths. While these are approximations, they are valuable for understanding general trends and molecular properties.</li>
<li><strong>Time-Saving:</strong> Avoid manual calculations and lengthy searches for data. Our calculator provides instant results, freeing up your time for deeper analysis and learning.</li>
<li><strong>Improved Understanding:</strong> Visualize the sizes of atoms within molecules and gain a better grasp of chemical bonding concepts.</li>
<li><strong>Accessibility:</strong> Our free online tool is accessible to anyone with an internet connection.</li>
</ul>
<h3 id="for-students-educators-and-chemistry-enthusiasts-">For Students, Educators, and Chemistry Enthusiasts:</h3>
<p>This calculator is an invaluable resource for:</p>
<ul>
<li><strong>Students:</strong> Easily check your homework, visualize atomic sizes, and understand the relationship between covalent radii and bond lengths.</li>
<li><strong>Educators:</strong> Use it as a teaching aid to demonstrate these concepts in a clear and interactive way.</li>
<li><strong>Chemistry Enthusiasts:</strong> Explore the world of molecules and gain a deeper appreciation for the fundamental properties of matter.</li>
</ul>
<p><strong>Important Considerations:</strong></p>
<ul>
<li><strong>Approximations:</strong> The calculated covalent radii and bond lengths are estimations based on general trends and average values. Actual bond lengths can vary slightly depending on the specific molecular environment.</li>
<li><strong>Ionic Compounds:</strong> This calculator is primarily designed for covalent compounds. While you can input ionic formulas, the concept of covalent radius is less directly applicable.</li>
<li><strong>Data Source:</strong> Our calculator relies on widely accepted covalent radii data. Variations may exist in different data sources.</li>
</ul>
<p><strong>In Conclusion:</strong></p>
<p>Our <strong>Covalent Radius Calculator</strong> is your essential online tool for quickly and easily determining the covalent radii of elements within a molecule and estimating bond lengths. Its user-friendly interface, instant results, and educational value make it a valuable asset for anyone interested in chemistry. Start exploring the world of atomic sizes and chemical bonds today!</p>
<p><strong>Help us make this the top resource for covalent radius calculations! Share this tool with your friends, classmates, and colleagues who might find it useful.</strong></p>
</main>
<div id="right-sidebar">
<a href="/index.html">
<img src="https://img.icons8.com/?size=512&id=3113&format=png" alt="Home">
</a>
<a href="/subjects.html">
<img src="/icons/subjects.png" alt="Subject">
</a>
<a href="/about.html">
<img src="https://img.icons8.com/?size=512&id=61995&format=png" alt="About">
</a>
<a href="https://dev.to/who_tf_cares/#">
<img src="https://img.icons8.com/?size=512&id=85185&format=png" alt="Contact">
</a>
</div>
This contains all the text, and also the calculator container.
Now, I’ll add the styling for this, inline for now since I don’t want to create a new style file, and also since we don’t have much time left.
<style>
body {
font-family: sans-serif;
line-height: 1.6;
margin: 20px;
color: #d0d0d0;
background-color: #1e1e1e;
transition: background-color 0.3s ease;
position: relative;
display: flex;
}
h2 {
color: #95a5a6;
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
margin-top: 30px;
transition: color 0.3s ease;
position: relative;
}
h2:hover {
color: #3498db;
}
h2:first-of-type {
margin-top: 0;
}
p {
margin-bottom: 15px;
transition: color 0.3s ease;
}
p strong {
font-weight: 600;
color: #e74c3c;
}
p:hover {
color: #bbb;
}
ul,
ol {
margin-bottom: 15px;
padding-left: 20px;
}
li {
margin-bottom: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
background-color: #2c2c2c;
}
th,
td {
border: 1px solid #555;
padding: 8px;
text-align: left;
transition: background-color 0.3s ease;
}
th {
background-color: #3498db;
color: white;
}
tr:nth-child(even) {
background-color: #333;
}
tr:hover {
background-color: #444;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.05);
}
a {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #217dbb;
}
/* Progress Bar */
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 5px;
background-color: #3498db;
transition: width 0.3s ease;
z-index: 1000;
}
/* Completed Checkmark */
h2::after {
content: '2713';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #3498db;
font-size: 1.2em;
opacity: 0;
transition: opacity 0.3s ease;
}
h2.completed::after {
opacity: 1;
}
/* Sidebar Styles */
#sidebar {
position: fixed;
top: 20px;
left: 20px;
width: 220px;
height: calc(100vh - 40px);
background-color: #2c2c2c;
padding: 15px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
overflow-y: auto;
z-index: 999;
}
#sidebar::-webkit-scrollbar {
width: 0px;
}
#sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
#sidebar li {
margin-bottom: 10px;
}
#sidebar a {
display: block;
color: #95a5a6;
padding: 10px 12px;
transition: background-color 0.3s ease;
border-radius: 4px;
}
#sidebar a:hover,
#sidebar a.active {
background-color: #333;
color: #fff;
}
/* Main content area adjustment */
main {
flex: 1;
padding: 10px;
margin-right: 60px;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body,
h2,
p,
ul,
ol,
table,
img {
animation: fadeIn 0.5s ease-out;
}
/* Right sidebar */
#right-sidebar {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
/* Adjusted width */
height: calc(100vh - 40px);
background-color: #2c2c2c;
padding: 15px 0;
/* Adjusted padding */
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
border-radius: 0.5rem;
}
#right-sidebar a {
display: flex;
justify-content: center;
align-items: center;
color: #95a5a6;
padding: 10px;
transition: background-color 0.3s ease;
border-radius: 4px;
margin-bottom: 5px;
height: 40px;
/* Set height for a circular look */
width: 40px;
/* Set width for a circular look */
}
#right-sidebar a:hover,
#right-sidebar a.active {
background-color: #333;
color: #fff;
}
#right-sidebar img {
max-width: 20px;
height: auto;
display: block;
margin: 0 auto;
filter: invert(65%) sepia(3%) saturate(69%) hue-rotate(185deg) brightness(87%) contrast(86%);
transition: transform 0.3s ease;
}
#right-sidebar a:hover img,
#right-sidebar a.active img {
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(221deg) brightness(105%) contrast(102%);
transform: scale(1.1);
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
body {
flex-direction: column;
/* Stack elements vertically */
margin: 10px;
/* Reduce margin */
}
main {
padding: 5px;
}
#sidebar {
position: static;
/* Make sidebar static */
width: 100%;
/* Full width */
height: auto;
margin-bottom: 10px;
/* Add margin below sidebar */
box-shadow: none;
}
#sidebar ul {
display: flex;
overflow-x: auto;
padding: 0px 10px;
margin-bottom: 10px;
}
#sidebar li {
margin-bottom: 0px;
}
#sidebar a {
padding: 10px 10px;
margin: 0px 5px;
white-space: nowrap;
border-radius: 10px;
}
#right-sidebar {
position: fixed;
top: initial;
/* Remove top position */
bottom: 0;
/* Stick to bottom */
right: 0;
width: 100%;
height: auto;
/* Adjust height */
flex-direction: row;
padding: 0;
border-radius: 0;
box-shadow: none;
}
#right-sidebar a {
margin-bottom: 0;
/* Remove bottom margin */
width: auto;
height: 40px;
}
#right-sidebar img {
max-width: 20px;
}
}
@media (min-width: 769px) {
/* Adjust main content for larger screens to reduce gap if needed */
main {
margin-left: 50px;
/* Further reduce the margin */
}
}
</style>
<style for="Calculator">
.calculator-container {
background-color: #2c2c2c;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
margin: 20px 0;
}
.calculator-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.calculator-controls input,
.calculator-controls button {
padding: 10px;
border-radius: 4px;
border: 1px solid #555;
background-color: #333;
color: #d0d0d0;
transition: background-color 0.3s ease;
}
.calculator-controls input:focus,
.calculator-controls button:focus{
outline: none;
box-shadow: 0 0 5px #3498db;
}
.calculator-controls input{
flex: 2;
}
.calculator-controls button{
flex: 1;
}
.calculator-controls button:hover {
background-color: #3498db;
color: white;
cursor: pointer;
}
#calculator-output {
overflow-x: auto; /* Enable horizontal scrolling for wider tables */
}
#calculator-output table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}
#calculator-output th,
#calculator-output td {
border: 1px solid #555;
padding: 8px;
text-align: left;
}
#calculator-output th {
background-color: #3498db;
color: white;
}
#calculator-output tr:nth-child(even) {
background-color: #333;
}
#calculator-output tr:hover {
background-color: #444;
}
/* Loading Spinner */
.loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.calculator-container h2 {
margin-top: 0; /* Remove top margin for calculator heading */
}
.calculator-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
align-items: center; /* Align input, SVG, and button vertically */
}
#molecule-svg-container {
width: 50px; /* Adjust size as needed */
height: 50px;
border: 1px solid #555; /* Optional border */
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
}
#molecule-svg-container svg {
max-width: 100%;
max-height: 100%;
}
</style>
This will handle the styling for the entire content page, with the calculator and the main content. Different from the previous one, this on has a dark theme for the content, and the navigation bar for the site on right side. As a person, searching with the intent of “Covalent Radii Calculator”, they want the calculator, do certain calculations and then leave the site. They are primarily the one, who has time to actually navigate the site.
Usually students pursuing higher degree education in Chemistry, search these terms. So, it is good not to waste their time. And we did keep the navigation, just moved it towards the right on desktop and towards the bottom on mobile. We just straight-up showed them the calculator, and not waste any of their time, looking at the navigation. Just giving them what they want. Remember: Matching the Search Intent should be your priority. If it doesn’t it is not gonna be promoted by any Search Engine.
Finally, let’s add the javascript, this contains the logic for the calculator, and updating the svg, which is currently available for a few molecules only, as I neither had time nor the skill of SVGs:
<script>
document.addEventListener('DOMContentLoaded', function () {
let moleculeInput = document.getElementById('molecule-input');
let calculateBtn = document.getElementById('calculate-btn-56');
let calculatorOutput = document.getElementById('calculator-output-56');
let moleculeSvgContainer = document.getElementById('molecule-svg-container');
const covalentRadii = {
'H': 31, 'He': 28, 'Li': 128, 'Be': 96, 'B': 84, 'C': 73, 'N': 71, 'O': 66, 'F': 57, 'Ne': 58,
'Na': 166, 'Mg': 141, 'Al': 121, 'Si': 111, 'P': 107, 'S': 105, 'Cl': 102, 'Ar': 106,
'K': 203, 'Ca': 176, 'Sc': 170, 'Ti': 160, 'V': 153, 'Cr': 139, 'Mn': 139, 'Fe': 132, 'Co': 126,
'Ni': 124, 'Cu': 132, 'Zn': 122, 'Ga': 122, 'Ge': 120, 'As': 119, 'Se': 120, 'Br': 120, 'Kr': 116,
'Rb': 220, 'Sr': 195, 'Y': 190, 'Zr': 175, 'Nb': 164, 'Mo': 154, 'Tc': 147, 'Ru': 146, 'Rh': 142,
'Pd': 139, 'Ag': 145, 'Cd': 144, 'In': 142, 'Sn': 139, 'Sb': 139, 'Te': 138, 'I': 139, 'Xe': 140,
'Cs': 244, 'Ba': 215, 'La': 207, 'Ce': 204, 'Pr': 203, 'Nd': 201, 'Pm': 199, 'Sm': 198, 'Eu': 198,
'Gd': 196, 'Tb': 194, 'Dy': 192, 'Ho': 192, 'Er': 189, 'Tm': 190, 'Yb': 187, 'Lu': 187,
'Hf': 175, 'Ta': 170, 'W': 162, 'Re': 151, 'Os': 144, 'Ir': 141, 'Pt': 138, 'Au': 138, 'Hg': 149,
'Tl': 148, 'Pb': 146, 'Bi': 148, 'Po': 140, 'At': 150, 'Rn': 145
};
const electronegativity = {
'H': 2.20, 'Li': 0.98, 'Be': 1.57, 'B': 2.04, 'C': 2.55, 'N': 3.04, 'O': 3.44, 'F': 3.98, 'Na': 0.93,
'Mg': 1.31, 'Al': 1.61, 'Si': 1.90, 'P': 2.19, 'S': 2.58, 'Cl': 3.16, 'K': 0.82, 'Ca': 1.00, 'Sc': 1.36,
'Ti': 1.54, 'V': 1.63, 'Cr': 1.66, 'Mn': 1.55, 'Fe': 1.83, 'Co': 1.88, 'Ni': 1.91, 'Cu': 1.90,
'Zn': 1.65, 'Ga': 1.81, 'Ge': 2.01, 'As': 2.18, 'Se': 2.55, 'Br': 2.96, 'Rb': 0.82, 'Sr': 0.95,
'Y': 1.22, 'Zr': 1.33, 'Nb': 1.60, 'Mo': 2.16, 'Tc': 1.90, 'Ru': 2.20, 'Rh': 2.28, 'Pd': 2.20,
'Ag': 1.93, 'Cd': 1.69, 'In': 1.78, 'Sn': 1.96, 'Sb': 2.05, 'Te': 2.10, 'I': 2.66, 'Cs': 0.79,
'Ba': 0.89, 'La': 1.10, 'Ce': 1.12, 'Pr': 1.13, 'Nd': 1.14, 'Pm': 1.13, 'Sm': 1.17, 'Eu': 1.20,
'Gd': 1.20, 'Tb': 1.20, 'Dy': 1.22, 'Ho': 1.23, 'Er': 1.24, 'Tm': 1.25, 'Yb': 1.1, 'Lu': 1.27,
'Hf': 1.3, 'Ta': 1.5, 'W': 2.36, 'Re': 1.9, 'Os': 2.2, 'Ir': 2.2, 'Pt': 2.28, 'Au': 2.54,
'Hg': 2.00, 'Tl': 1.62, 'Pb': 2.33, 'Bi': 2.02, 'Po': 2.0, 'At': 2.0 , 'Rn': 2.2
};
function parseMolecule(formula) {
const regex = /([A-Z][a-z]*)(d*)/g;
let match;
const elements = {};
while ((match = regex.exec(formula)) !== null) {
const element = match[1];
const count = parseInt(match[2] || 1, 10);
elements[element] = (elements[element] || 0) + count;
}
return elements;
}
function calculateBondLengths(molecule) {
const elements = parseMolecule(molecule);
const elementSymbols = Object.keys(elements);
const results = [];
const bonds = [];
const radiiInfo = [];
//First add the covalent radii of the different atoms to the result.
for (const element of elementSymbols) {
if (covalentRadii[element]) {
radiiInfo.push({
element: element,
radius: covalentRadii[element]
});
}
}
for (let i = 0; i < elementSymbols.length; i++) {
for (let j = i + 1; j < elementSymbols.length; j++) {
const elementA = elementSymbols[i];
const elementB = elementSymbols[j];
if (covalentRadii[elementA] && covalentRadii[elementB] && electronegativity[elementA] && electronegativity[elementB]) {
const rA = covalentRadii[elementA];
const rB = covalentRadii[elementB];
const deltaChi = Math.abs(electronegativity[elementA] - electronegativity[elementB]);
const bondLength = rA + rB - 9 * deltaChi;
const bondData = {
bond: `${elementA}-${elementB}`,
bondLength: bondLength.toFixed(2),
};
bonds.push(bondData);
}
}
}
if (bonds.length === 0 && radiiInfo.length === 0) {
return results; //No calculations to be done.
}
if (radiiInfo.length > 0) {
results.push({
radiiData: radiiInfo,
type: "covalentRadius"
});
}
if (bonds.length > 0) {
bonds.forEach(bond => {
results.push({
bond: bond.bond,
bondLength: bond.bondLength,
type: "bondLength"
});
});
}
return results;
}
calculateBtn.addEventListener('click', function () {
const molecule = moleculeInput.value.trim();
if (!molecule) {
alert('Please enter a molecule.');
return;
}
calculatorOutput.innerHTML = '<div class="loading-spinner"></div>';
const loadingSpinner = calculatorOutput.querySelector('.loading-spinner');
loadingSpinner.style.display = 'block';
setTimeout(() => {
const results = calculateBondLengths(molecule);
let html = '';
if (results && results.length > 0) {
results.forEach(result => {
if (result.type === "covalentRadius") {
html += '<table><thead><tr><th>Element</th><th>Covalent Radius (pm)</th></tr></thead><tbody>';
result.radiiData.forEach(item => {
html += `<tr><td>${item.element}</td><td>${item.radius}</td></tr>`;
});
html += `</tbody></table>`;
} else if (result.type === "bondLength") {
if (!html.includes('Bond')) {
html += '<table><thead><tr><th>Bond</th><th>Bond Length (pm)</th></tr></thead><tbody>';
}
html += `<tr><td>${result.bond}</td><td>${result.bondLength}</td></tr>`;
}
});
if (html.includes("Bond")) {
html += '</tbody></table>';
}
} else {
html += '<p> Could not calculate the Covalent Radii. Check the input is valid.</p>';
}
calculatorOutput.innerHTML = html;
loadingSpinner.style.display = 'none';
}, 800);
});
// SVG update logic
const moleculeSVGs = {
'H2O': `<svg viewBox="0 0 100 100"><circle cx="50" cy="30" r="15" fill="#ea4335" /><circle cx="30" cy="70" r="15" fill ```
{% endraw %}
html
#90caf9" /><circle cx="70" cy="70" r="15" fill="#90caf9" /></svg>{% raw %}`,
'CO2': `<svg viewBox="0 0 150 100"><circle cx="25" cy="50" r="15" fill="#ea4335" /><circle cx="75" cy="50" r="15" fill="#4285f4" /><circle cx="125" cy="50" r="15" fill="#ea4335" /></svg>`,
'NA2SO4': `<svg viewBox="0 0 150 100">
<circle cx="20" cy="50" r="10" fill="#fbbc05" />
<circle cx="40" cy="50" r="10" fill="#fbbc05" />
<circle cx="75" cy="50" r="10" fill="#34a853" />
<circle cx="110" cy="35" r="10" fill="#ea4335" />
<circle cx="110" cy="65" r="10" fill="#ea4335" />
<circle cx="130" cy="50" r="10" fill="#ea4335" />
</svg>`
};
function updateMoleculeSVG(molecule) {
if (moleculeSVGs[molecule.toUpperCase()]) {
moleculeSvgContainer.innerHTML = moleculeSVGs[molecule.toUpperCase()];
} else {
moleculeSvgContainer.innerHTML = '<span>?</span>';
}
}
moleculeInput.addEventListener('input', function () {
updateMoleculeSVG(moleculeInput.value.trim());
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const headings = document.querySelectorAll('h2');
let progressBar = document.createElement('div');
progressBar.id = 'progress-bar';
document.body.appendChild(progressBar);
const links = [];
headings.forEach((heading, index) => {
if (heading.id) {
links.push({
id : heading.id,
top : heading.offsetTop
});
}
});
function updateProgressBar() {
let scrollY = window.scrollY;
let progress = 0;
let currentSection= "";
for (let i = 0; i < links.length; i++)
{
let top = links[i].top;
if(scrollY >= top)
{
progress = ((scrollY - top) / (window.innerHeight * 1.0)) * 100
currentSection = links[i].id;
}
}
if(progress > 100)
{
progress = 100;
}
else if (progress < 0)
{
progress = 0;
}
progressBar.style.width = `${progress}%`;
headings.forEach(heading => {
if(heading.id == currentSection)
{
heading.classList.add('completed')
}
else {
heading.classList.remove('completed')
}
});
}
window.addEventListener('scroll', updateProgressBar);
updateProgressBar();
});
</script>
</body>
</html>
```
I've added the styles and the JavaScript, along with a progress bar that moves as we scroll and highlights the headings based on the progress. This also includes the navigation bar on the right.
With this, I've completed the page. The calculator on here works as expected, and the layout and responsiveness is good too.
The page is complete, and you can check it out here: [Covalent Radius Calculator](https://neuroniq.netlify.app/chemistry/3/covalent-radii-and-bond-length.html)
This brings us to the end of the day. I feel that after these many hours, we have something great, something that Noah will definitely love!
Source link
lol
