Many people were asking me, how much time are going to spend on this. I was like may be 2 or 3 weeks. But, that question, led me to rethink how much time I'm spending on the website. I spent 8 hours on just the homepage. So, I've decided to quickly create content, and not focus on the minute details, which I did in the previous days. I've wasted a lot of your attention, now let's jump straight into the process.
Hour 19: Creating a Chemistry Content Page
I'll start by creating the periodicity-of-elements-qa.html file inside the Chemistry/3/ directory. This page will include questions and answers on the topic of the periodicity of elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Questions and Answers</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div class="logo">Neuron IQ</div>
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/subjects.html">Subjects</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<aside id="table-of-contents">
<!-- Table of contents will be generated here -->
</aside>
<main>
<!-- content goes here -->
</main>
</div>
<!-- script to generate the toc -->
</body>
</html>
As usual, I included a basic HTML boilerplate with links to necessary scripts and styles, along with navigation to main pages. I am using a container div, aside element with the id table-of-contents, which will be populated using javascript, and finally the main tag.
Next, I added the content, formatted with heading tags and some paragraph tags for the main body. For formulas and symbols I used the LaTeX syntax, LaTeX is used because it is the go-to standard:
<h2 id="what-is-meant-by-newlands-law-of-octaves">What is meant by
Newland's Law of Octaves?</h2>
<p>Newland's Law of Octaves stated that when elements were arranged by increasing atomic weight, every eighth element had similar properties, like musical octaves.</p>
<h2 id="what-is-mendeleevs-periodic-law">What is Mendeleev's Periodic
Law?</h2>
<p>Mendeleev's Periodic Law states that the properties of elements are a periodic function of their atomic weights.
</p>
<h2 id="what-is-the-modern-periodic-law">What is the Modern Periodic
Law?</h2>
<p>The Modern Periodic Law states that the properties of elements are a periodic function of their atomic numbers ($Z$).</p>
<h2 id="Moseley's law">Explain Moseley's experiment and the results of it.</h2>
<p>
Moseley bombarded elements with electrons, measuring the emitted X-ray frequencies ($\nu$). He found $\sqrt{\nu} \propto Z$ (atomic number). This showed atomic number, not atomic weight, determines element properties, leading to the Modern Periodic Law.
</p>
<h2 id="write-down-nomenclature-of-the-below-mentioned-elements-having-atomic-number-101-to-118">Write
down nomenclature of the below mentioned elements having atomic number
101 to 118.</h2>
<table>
<thead>
<tr>
<th style="text-align:left">Atomic Number</th>
<th style="text-align:left">Name</th>
<th style="text-align:left">Symbol</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">101</td>
<td style="text-align:left">Unnilunium</td>
<td style="text-align:left">Unu</td>
</tr>
<!-- rows of tables go here -->
</tbody>
</table>
<h2 id="Lanthanoid and Actinoid Series">Explain the periodic properties of Lanthanoid and Actinoid series.</h2>
<p><strong>Lanthanoids:</strong></p>
<ul>
<li>Electrons fill 4f orbitals.</li>
<li>Silvery-white metals, tarnish in air.</li>
<li>High melting and boiling points.</li>
<li>Mostly +3 oxidation state.</li>
<li>Form colored ions and complexes.</li>
<li>Used as catalysts.</li>
</ul>
<p><strong>Actinoids:</strong></p>
<ul>
<li>Electrons fill 5f orbitals.</li>
<li>Radioactive.</li>
<li>Early members have multiple oxidation states, later ones mostly +3.</li>
<li>High density and melting points.</li>
<li>Form complexes.</li>
<li>Used in nuclear reactors and weapons.</li>
</ul>
<h2 id="how-would-you-justify-the-presence-of-18-elements-in-the-5th-period-of-the-periodic-table">How
would you justify the presence of 18 elements in the 5th period of the
periodic table?</h2>
<p>
The 5th period starts with filling the 5s orbital (2 electrons). Then, the 4d orbitals are filled (10 electrons), followed by the 5p orbitals (6 electrons). This totals 2 + 10 + 6 = 18 electrons, hence 18 elements in the 5th period.
</p>
<h2 id="write-down-general-group-electronic-configuration-of-s-block-p-block-d-block-and-f-block">Write
down general group electronic configuration of s block, p block, d block
and f block?</h2>
<ul>
<li><strong>s-block:</strong> $ns^{1-2}$ where n = 2-7</li>
<li><strong>p-block:</strong> $ns^2np^{1-6}$ where n = 2-7</li>
<li><strong>d-block:</strong> $(n-1)d^{1-10}ns^{0-2}$ where n = 4-7</li>
<li><strong>f-block:</strong> $(n-2)f^{0-14}(n-1)d^{0-1}ns^2$ where n = 6-7</li>
</ul>
<h2 id="what-is-meant-by-transuranium-element">What is meant by
transuranium element?</h2>
<p>Transuranium elements are elements with atomic numbers greater than 92 (Uranium). They are all synthetic and radioactive.
</p>
<!-- Questions and answers go here -->
<h2 id="about-author">
About the author
</h2>
<p> Written by <strong>Kaavje Sahé </strong></p>
This contains a lot of content, which is formatted using headings and sub-headings, some lists and tables. I also added an "About the Author" tag for authenticity.
I needed to style this page so that the text can be readable, and it doesn't look too bad. I will add an additional css file into this page, keeping style.css and style-main.css for common elements.
Hour 20: Styling the content page and adding JS for dynamic Table of Contents
I created an style tag inside the head element, and added basic style to it:
<style>
header {
background: linear-gradient(135deg, #252525 0%, #303030 100%); /* Subtle gradient for depth */
padding: 1.2rem 0; /* Slightly increased padding */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced, darker shadow */
position: sticky;
top: 0;
z-index: 1000; /* Increased z-index for better layering */
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for sticky effect */
transform: translateY(0); /* Initial state for smooth sticky animation */
}
header.sticky-active {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Different shadow when sticky */
transform: translateY(-5px); /* Slight lift when sticky */
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px; /* Slightly increased side padding */
}
.logo {
font-size: 2rem; /* Slightly larger logo */
font-weight: 700; /* Bolder logo */
color: #7db4ff; /* Updated logo color, slightly lighter */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Subtle text shadow for depth */
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: scale(1.05); /* Gentle scale on hover */
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 30px; /* Use gap for spacing between list items */
}
nav ul li a {
text-decoration: none;
color: #f0f0f0; /* Slightly brighter text color */
position: relative; /* For the underline effect */
padding-bottom: 4px; /* Space for the underline */
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
overflow: hidden; /* Clip the pseudo-element */
}
nav ul li a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #7db4ff; /* Same as logo color for consistency */
transform: scaleX(0); /* Initially hidden */
transform-origin: bottom right;
transition: transform 0.4s ease-out;
}
nav ul li a:hover {
color: #90caf9; /* Lighter hover color */
transform: translateY(-2px); /* Slight lift on hover */
}
nav ul li a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Optional: Add an active state highlight */
nav ul li a.active {
color: #90caf9;
font-weight: 600;
}
nav ul li a.active::before {
transform: scaleX(1);
}
/* Enhancements for Mobile (consider using JavaScript for more advanced mobile menus) */
@media (max-width: 1024px) {
header {
display: hidden;
}
}
:root {
--primary-bg: #f9f9f9; /* Very light grey for a softer white */
--secondary-bg: #ffffff; /* Pure white for content areas */
--text-primary: #212121; /* Dark grey for primary text */
--text-secondary: #757575; /* Medium grey for secondary text */
--accent-color: #2962ff; /* A vibrant blue */
--hover-color: #5393ff; /* Lighter blue for hover states */
--border-color: #e0e0e0; /* Light grey for borders */
--code-bg: #f0f0f0; /* Very light grey for code backgrounds */
--code-text: #333333; /* Dark grey for code text */
--toc-active: #2962ff;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.3s ease-in-out;
}
body {
font-family: 'Roboto', sans-serif; /* A clean and modern sans-serif font */
line-height: 1.6;
margin: 0;
background-color: var(--primary-bg);
color: var(--text-primary);
padding-bottom: 40px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
overflow-x: hidden;
}
/* Custom Scrollbar - Light theme version */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #bdbdbd;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e;
}
.container {
max-width: 1200px;
margin: 50px auto;
padding: 60px;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-md);
border-radius: 8px;
display: grid;
grid-template-columns: minmax(250px, 300px) 1fr;
gap: 40px;
}
#table-of-contents {
padding: 30px;
background-color: var(--secondary-bg);
border-radius: 6px;
position: sticky;
top: 30px;
height: fit-content;
border: 1px solid var(--border-color);
}
/* Custom Scrollbar for Table of Contents */
#table-of-contents::-webkit-scrollbar {
width: 6px; /* Thinner scrollbar */
}
#table-of-contents::-webkit-scrollbar-track {
background: #f1f1f1; /* Light background for the track */
border-radius: 3px; /* Slightly rounded track */
}
#table-of-contents::-webkit-scrollbar-thumb {
background-color: #bdbdbd; /* Medium grey for the thumb */
border-radius: 3px; /* Slightly rounded thumb */
}
#table-of-contents::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e; /* Darker grey on hover */
}
#table-of-contents > h2 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 15px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
text-align: left;
}
#table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}
#table-of-contents li {
margin-bottom: 10px;
padding-left: 0;
border-left: 3px solid transparent;
transition: border-left-color var(--transition-fast), color var(--transition-fast);
}
#table-of-contents li:hover,
#table-of-contents li.active {
border-left-color: var(--toc-active);
}
#table-of-contents li.active > a {
color: var(--toc-active);
font-weight: 500;
}
#table-of-contents a {
text-decoration: none;
color: var(--text-secondary);
display: block;
padding: 6px 0;
transition: color var(--transition-fast);
}
#table-of-contents a:hover {
color: var(--hover-color);
}
#table-of-contents ul ul {
margin-left: 15px;
margin-top: 6px;
}
/* Main content styles - Focus on readability */
main {
padding: 40px;
border-radius: 6px;
overflow: hidden;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-sm);
}
main > *:not(:last-child) {
margin-bottom: 2em;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
h1 {
font-size: 2.5rem;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.4em;
margin-bottom: 1em;
}
h2 {
font-size: 24px;
border-bottom: 1px solid var(--accent-color);
padding-bottom: 0.3em;
margin-bottom: 0.9em;
color: var(--accent-color);
}
h3 {
font-size: 1.6rem;
margin-bottom: 0.7em;
}
h4 {
font-size: 1.4rem;
margin-bottom: 0.6em;
}
p {
margin-bottom: 1.5em;
color: var(--text-secondary);
orphans: 3;
widows: 3;
word-break: break-word;
}
ul, ol {
margin-left: 25px;
margin-bottom: 1.7em;
}
li {
margin-bottom: 0.7em;
color: var(--text-secondary);
line-height: 1.5;
word-break: break-word;
}
strong {
font-weight: 600;
color: var(--text-primary);
}
em {
font-style: italic;
color: var(--accent-color);
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-fast);
border-bottom: 1px solid transparent; /* Subtle underline on hover */
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2em;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--secondary-bg);
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
word-break: break-word;
}
th {
background-color: #f5f5f5; /* Lighter header background */
font-weight: 600;
color: var(--text-primary);
}
tbody tr:nth-child(even) {
background-color: #fafafa; /* Very light grey for even rows */
}
/* Code blocks - Light theme styling */
pre {
background-color: var(--code-bg);
color: var(--code-text);
padding: 12px 18px;
border-radius: 4px;
overflow-x: auto;
font-family: 'Menlo', monospace;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.6em;
white-space: pre-wrap;
border: 1px solid var(--border-color);
}
code {
font-family: 'Menlo', monospace;
background-color: #e8e8e8; /* Even lighter background for inline code */
color: var(--code-text);
padding: 3px 6px;
border-radius: 3px;
word-break: break-word;
}
pre code {
background-color: transparent;
padding: 0;
}
/* Horizontal rules - Simpler style */
hr {
border: none;
height: 1px;
background-color: var(--border-color);
margin: 2em 0;
}
/* Blockquotes - Clean separation */
blockquote {
border-left: 3px solid var(--accent-color);
padding: 10px 15px;
margin: 1.5em 0;
font-style: italic;
background-color: #f5f5f5;
border-radius: 3px;
color: var(--text-secondary);
}
blockquote p {
margin-bottom: 0;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.container {
max-width: 90%;
padding: 50px;
grid-template-columns: 1fr;
gap: 30px;
}
#table-of-contents {
position: static;
margin-bottom: 30px;
}
#table-of-contents > h2 {
text-align: center;
}
}
@media (max-width: 768px) {
main {
padding: 30px;
}
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 22px;
}
nav{
display:none;
}
}
@media (max-width: 480px) {
.container {
padding: 30px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 20px;
}
}
</style>
This is just basic styling, with some changes to the header, and the main content, to ensure, the elements are readable, not too distracting and is consistent across the website.
I've also added CSS for table, blockquotes, and code blocks to improve readability.
I also wanted to add a script to make the table of contents on the left interactive. So, I added this script to the bottom of the body tag:
<script>
// script.js
document.addEventListener('DOMContentLoaded', () => {
const mainContent = document.querySelector('main');
const tableOfContents = document.getElementById('table-of-contents');
if (!mainContent || !tableOfContents) {
console.error('Main content or table of contents element not found.');
return;
}
const headings = mainContent.querySelectorAll('h2, h3, h4');
const tocList = document.createElement('ul');
let currentList = tocList;
const stack = [currentList];
headings.forEach(heading => {
const tagName = heading.tagName;
const id = heading.id;
const text = heading.textContent;
if (id) {
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = `#${id}`;
link.textContent = text;
listItem.appendChild(link);
if (tagName === 'H2') {
while (stack.length > 1) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H3') {
while (stack.length > 2) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H4') {
while (stack.length > 3) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
}
}
});
// Remove any empty ul elements that might have been created
function removeEmptyLists(list) {
Array.from(list.children).forEach(item => {
if (item.tagName === 'UL' && item.children.length === 0) {
item.remove();
} else if (item.tagName === 'LI') {
const childUl = item.querySelector('ul');
if (childUl) {
removeEmptyLists(childUl);
}
}
});
}
removeEmptyLists(tocList);
const tocTitle = document.createElement('h2');
tocTitle.textContent = 'Table of Contents';
tableOfContents.appendChild(tocTitle);
tableOfContents.appendChild(tocList);
});
</script>
This script automatically generates a nested table of contents from the headings in the main element, which works seamlessly. The script automatically populates the table-of-contents aside tag, which I created earlier.
Finally, I added support for LaTeX formulas and equations by adding these script and link tags inside the head tag.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
delimiters: [
{ left: "$", right: "$", display: false },
{ left: "$$", right: "$$", display: true }
]
});
});
</script>
And with that, the content page is done. I like that the design is very minimal, doesn't distract from the content and still has all the necessary features.
If you want to see how, it looks in the live version, instead of just copying content yourself, see here: Periodicity Of Elements - Question and Answers
Hour 21 to 25: Completing a Chemistry Content Page
I'll create the periodicity-of-elements-notes.html file inside Chemistry/3/ folder. This will contain the notes on periodicity of elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Notes</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div class="logo">Neuron IQ</div>
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/subjects.html">Subjects</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<aside id="table-of-contents">
<!-- Table of contents will be generated here -->
</aside>
<main>
<!-- content goes here -->
</main>
</div>
<!-- script to generate the toc -->
</body>
</html>
This is the same base HTML structure as the previous file, periodicity-of-elements-qa.html.
Now, for the most time consuming part, copying over the massive text of the notes and formating it with headings, paragraphs, and lists. I've also used LaTeX syntax where appropriate.
<h1>
Structure of Periodic Table
</h1>
<h2 id="early-attempts-at-organization">Early Attempts at
Organization</h2>
<!-- Previous attempts go here -->
<h2 id="mendeleevs-periodic-law-and-his-periodic-table">Mendeleev's
Periodic Law and His Periodic Table</h2>
<!-- Mendeleev's section goes here -->
<h2 id="modern-periodic-law-and-moseleys-experiment-explained">Modern
Periodic Law and Moseley's Experiment Explained</h2>
<div class="calculator-container">
<h2>Element Properties Calculator</h2>
<div class="calculator-controls">
<input type="text" id="element-input" placeholder="Enter Element Symbol (e.g., H, He, Li)">
<button id="calculate-btn">Calculate</button>
</div>
<div id="calculator-output">
<!-- Table will be inserted here -->
</div>
<strong>Note:</strong> The calculator's data is derived from general trends and Quantum Mechanical Calculations rather than experimental data. While it is approximately accurate, it is important to emphasize that it is not based on experimental results.
</div>
<!-- Moseleys and Modern periodic law section goes here -->
<h2 id="periods-horizontal-rows-and-electron-shells">Periods (Horizontal
Rows) and Electron Shells</h2>
<!-- Periods information goes here -->
<h2 id="groups-vertical-columns-and-valence-electrons">Groups (Vertical
Columns) and Valence Electrons</h2>
<!-- Groups information goes here -->
<h2 id="numbering-systems-for-groups">Numbering Systems for Groups</h2>
<!-- Numbering System information goes here -->
<h2 id="blocks-of-periodic-table">Blocks of Periodic Table</h2>
<!-- Blocks of periodic table information goes here -->
<h1> Key Groups and Their Properties </h1>
<h2 id="alkali-metals-group-1">Alkali Metals (Group 1)</h2>
<!-- Alkali Metals information goes here -->
<h2 id="alkali-earth-metals-groups-2">Alkali-Earth Metals (Groups
2)</h2>
<!-- Alkali-Earth metals information goes here -->
<h2 id="transition-metals-d-block">Transition Metals (d-block)</h2>
<!-- transition metals information goes here -->
<h2 id="halogens-group-17">Halogens (Group 17)</h2>
<!-- Halogens information goes here -->
<h2 id="noble-gases-group-18">Noble Gases (Group 18)</h2>
<!-- Noble gases information goes here -->
<h2 id="f-other-notable-groupselements">F. Other Notable
Groups/Elements</h2>
<!--Other notable elements goes here-->
<h1>Periodic Trends</h1>
<h2 id="a-types-of-atomic-radii">A. Types of Atomic Radii</h2>
<h3 id="1-covalent-radius">1. Covalent Radius</h3>
<!--covalent radius section goes here-->
<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>
<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>
<h3 id="2-metallic-radius">2. Metallic Radius</h3>
<!--metallic radius section goes here-->
<h3 id="3-van-der-waals-radius">3. Van der Waals Radius</h3>
<!--van der waals radius section goes here-->
<h3 id="4-ionic-radius">4. Ionic Radius</h3>
<!--ionic radius section goes here-->
<h2 id="b-trends-in-atomic-radius">B. Trends in Atomic Radius</h2>
<h3 id="1-trend-down-a-group">1. Trend Down a Group</h3>
<!--trend down a group goes here-->
<h3 id="2-trend-across-a-period">2. Trend Across a Period</h3>
<!--trend across a period goes here-->
<h2 id="ionic-radius">Ionic Radius</h2>
<h3 id="relationship-between-atomic-radius-and-ion-size">Relationship
between Atomic Radius and Ion Size</h3>
<!--Relation between ionic and atomic size goes here-->
<h3 id="trends-in-ionic-radius-down-a-group">Trends in Ionic Radius Down
a Group</h3>
<!--ionic radius trend down a group goes here-->
<h3 id="trends-in-ionic-radius-across-a-period">Trends in Ionic Radius
Across a Period</h3>
<!--ionic radius trend across a period goes here-->
<h2 id="ionization-energy">Ionization Energy</h2>
<h3 id="definition-of-ionization-energy">Definition of Ionization
Energy</h3>
<!--definition of IE goes here-->
<h3 id="trends-in-ionization-energy">Trends in Ionization Energy</h3>
<h4 id="1-trend-down-a-group-1">1. Trend Down a Group</h4>
<!--IE trend down a group goes here-->
<h4 id="2-trend-across-a-period-1">2. Trend Across a Period</h4>
<!--IE trend across a period goes here-->
<h2 id="electronegativity">Electronegativity</h2>
<h3 id="definition-of-electronegativity">Definition of
Electronegativity</h3>
<!--definition of electronegativity goes here-->
<h3 id="trends-in-electronegativity">Trends in Electronegativity</h3>
<h4 id="1-trend-down-a-group-2">1. Trend Down a Group</h4>
<!--Trend in EN down a group goes here-->
<h4 id="2-trend-across-a-period-2">2. Trend Across a Period</h4>
<!--trend in EN across a period goes here-->
<h2 id="metallic-character">Metallic Character</h2>
<!--metallic character goes here-->
<h3 id="trends-in-metallic-character">Trends in Metallic Character</h3>
<!--trend in metallic character goes here-->
<h4 id="1-trend-down-a-group-3">1. Trend Down a Group</h4>
<!--Metallic character trend down a group goes here-->
<h4 id="2-trend-across-a-period-3">2. Trend Across a Period</h4>
<!--Metallic character trend across a period goes here-->
<h2 id="reactivity-trends-relating-to-other-periodic-trends">Reactivity
Trends: Relating to Other Periodic Trends</h2>
<!--Reactivity trends goes here-->
<h1 id="advanced-topics">Advanced Topics</h1>
<h2 id="quantum-mechanics-and-electron-configurations">Quantum Mechanics
and Electron Configurations</h2>
<!-- Quantum mechanics explanation here-->
<h2 id="anomalies-in-periodic-trends">Anomalies in Periodic Trends</h2>
<!-- Anomalies explanation here-->
<h2 id="advanced-bonding-theories-molecular-orbital-theory-and-the-role-of-the-periodic-table">Advanced
Bonding Theories: Molecular Orbital Theory and the Role of the Periodic
Table</h2>
<!--Advanced bonding explanation here-->
<h2 id="about-author">
About the author
</h2>
<p> Written by <strong>Noah Kleij, PhD </strong></p>
<p>Noah Kleij holds a Doctorate in Organic and General Chemistry from the prestigious University of Manchester, United Kingdom. With a deep passion for chemical sciences, Noah has contributed significantly to advancing knowledge in both organic synthesis and general chemistry principles. Their research encompasses cutting-edge methodologies and innovative problem-solving approaches.</p>
<p>In addition to their academic achievements, Noah is an accomplished author and educator, committed to sharing complex chemical concepts in accessible and engaging ways. Their work not only bridges theoretical and practical chemistry but also inspires the next generation of chemists to explore the field's transformative potential.</p>
</main>
I've added the base CSS from before, but I also added new CSS to style the calculator container, did I mention, this page also has a calculator, for interactivity:
<style for="Calculator">
/* Light Mode Styles */
.calculator-container {
background-color: #f5f5f5; /* Light background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
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 #ccc; /* Light border */
background-color: #fff; /* White background */
color: #333; /* Dark text */
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
}
.calculator-controls input:focus,
.calculator-controls button:focus {
outline: none;
box-shadow: 0 0 5px #3498db; /* Focus highlight (same as dark mode) */
}
.calculator-controls input {
flex: 2;
}
.calculator-controls button {
flex: 1;
}
.calculator-controls button:hover {
background-color: #e0e0e0; /* Slightly darker on hover */
cursor: pointer;
}
#calculator-output {
overflow-x: auto;
}
#calculator-output table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
#calculator-output th,
#calculator-output td {
border: 1px solid #ccc; /* Light border */
padding: 8px;
text-align: left;
}
#calculator-output th {
background-color: #3498db; /* Header color (same as dark mode) */
color: white;
}
#calculator-output tr:nth-child(even) {
background-color: #f0f0f0; /* Slightly darker for even rows */
}
#calculator-output tr:hover {
background-color: #e8e8e8; /* Slightly darker on hover */
}
/* Loading Spinner */
.loading-spinner {
border: 4px solid #ccc; /* Light border */
border-top: 4px solid #3498db; /* Spinner color (same as dark mode) */
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;
color: #333; /* Darker text color for heading */
}
</style>
This is a very basic style, but its fine for now.
Then, I added the JavaScript for the table of contents as before, and added a script to generate the table of the properties of elements:
<script>
document.addEventListener('DOMContentLoaded', function () {
let elementInput = document.getElementById('element-input');
let calculateBtn = document.getElementById('calculate-btn');
let calculatorOutput = document.getElementById('calculator-output');
const elementData = {
"H": {
"Hfg_298_15K": -241.8,
"Hfg_0K": -217.8,
"Entropy_298_15K": 130.7,
"Integrated_Heat_Capacity_0_to_298_15K": 25.7,
"Heat_Capacity_298_15K": 28.8,
"Electronic_Energy_Levels": [1216.5, 1025.7],
"Ionization_Energies": 13.6,
"Electron_Affinity": 0.75
},
"He": {
"Hfg_298_15K": 0,
"Hfg_0K": 0,
"Entropy_298_15K": 126.1,
"Integrated_Heat_Capacity_0_to_298_15K": 20.8,
"Heat_Capacity_298_15K": 20.8,
"Electronic_Energy_Levels": [159850, 169084, 171133],
"Ionization_Energies": 24.6,
"Electron_Affinity": -0.08
},
"Li": {
"Hfg_298_15K": 159.3,
"Hfg_0K": 155.3,
"Entropy_298_15K": 29.1,
"Integrated_Heat_Capacity_0_to_298_15K": 22.8,
"Heat_Capacity_298_15K": 24.8,
"Electronic_Energy_Levels": [14908, 17159],
"Ionization_Energies": 5.39,
"Electron_Affinity": 0.61
},
"Be": {
"Hfg_298_15K": 324.3,
"Hfg_0K": 315.3,
"Entropy_298_15K": 9.5,
"Integrated_Heat_Capacity_0_to_298_15K": 16.8,
"Heat_Capacity_298_15K": 16.7,
"Electronic_Energy_Levels": [21978, 38178],
"Ionization_Energies": 9.32,
"Electron_Affinity": -0.20
},
"B": {
"Hfg_298_15K": 565,
"Hfg_0K": 561.5,
"Entropy_298_15K": 5.9,
"Integrated_Heat_Capacity_0_to_298_15K": 11.1,
"Heat_Capacity_298_15K": 11.1,
"Electronic_Energy_Levels": [38144, 38178],
"Ionization_Energies": 8.30,
"Electron_Affinity": 0.28
},
"C": {
"Hfg_298_15K": 716.7,
"Hfg_0K": 711.2,
"Entropy_298_15K": 5.7,
"Integrated_Heat_Capacity_0_to_298_15K": 8.5,
"Heat_Capacity_298_15K": 8.5,
"Electronic_Energy_Levels": [10193, 21648],
"Ionization_Energies": 11.3,
"Electron_Affinity": 1.26
},
"N": {
"Hfg_298_15K": 472.7,
"Hfg_0K": 472.7,
"Entropy_298_15K": 153.3,
"Integrated_Heat_Capacity_0_to_298_15K": 29.1,
"Heat_Capacity_298_15K": 29.1,
"Electronic_Energy_Levels": [19233, 28838],
"Ionization_Energies": 14.5,
"Electron_Affinity": -0.07
},
"O": {
"Hfg_298_15K": 249.2,
"Hfg_0K": 246.7,
"Entropy_298_15K": 161.1,
"Integrated_Heat_Capacity_0_to_298_15K": 29.4,
"Heat_Capacity_298_15K": 29.4,
"Electronic_Energy_Levels": [15867, 22698],
"Ionization_Energies": 13.6,
"Electron_Affinity": 1.46
},
"F": {
"Hfg_298_15K": 79.4,
"Hfg_0K": 77.2,
"Entropy_298_15K": 158.8,
"Integrated_Heat_Capacity_0_to_298_15K": 30.2,
"Heat_Capacity_298_15K": 30.2,
"Electronic_Energy_Levels": [404, 40889],
"Ionization_Energies": 17.4,
"Electron_Affinity": 3.40
},
"Ne": {
"Hfg_298_15K": 0,
"Hfg_0K": 0,
"Entropy_298_15K": 146.3,
"Integrated_Heat_Capacity_0_to_298_15K": 20.8,
"Heat_Capacity_298_15K": 20.8,
"Electronic_Energy_Levels": [134041, 136541, 138892],
"Ionization_Energies": 21.6,
"Electron_Affinity": -0.08
},
"Na":{
"Hfg_298_15K": 107.3,
"Hfg_0K": 107.7,
"Entropy_298_15K": 153.7,
"Integrated_Heat_Capacity_0_to_298_15K": 44.4,
"Heat_Capacity_298_15K": 44.4,
"Electronic_Energy_Levels": [16956, 17293],
"Ionization_Energies": 5.14,
"Electron_Affinity": 0.54
},
"Mg":{
"Hfg_298_15K": 147.7,
"Hfg_0K": 146.2,
"Entropy_298_15K": 32.7,
"Integrated_Heat_Capacity_0_to_298_15K": 24.9,
"Heat_Capacity_298_15K": 24.9,
"Electronic_Energy_Levels": [24581, 30994],
"Ionization_Energies": 7.65,
"Electron_Affinity": -0.30
},
"Al":{
"Hfg_298_15K": 324.3,
"Hfg_0K": 324.1,
"Entropy_298_15K": 28.3,
"Integrated_Heat_Capacity_0_to_298_15K": 24.4,
"Heat_Capacity_298_15K": 24.4,
"Electronic_Energy_Levels": [25057, 33951],
"Ionization_Energies": 5.99,
"Electron_Affinity": 0.43
},
"Si":{
"Hfg_298_15K": 450.0,
"Hfg_0K": 447.6,
"Entropy_298_15K": 18.8,
"Integrated_Heat_Capacity_0_to_298_15K": 20.2,
"Heat_Capacity_298_15K": 20.2,
"Electronic_Energy_Levels": [6209, 14300],
"Ionization_Energies": 8.15,
"Electron_Affinity": 1.39
},
"P":{
"Hfg_298_15K": 314.6,
"Hfg_0K": 314.6,
"Entropy_298_15K": 163.2,
"Integrated_Heat_Capacity_0_to_298_15K": 27.3,
"Heat_Capacity_298_15K": 27.3,
"Electronic_Energy_Levels": [11828, 19553],
"Ionization_Energies": 10.5,
"Electron_Affinity": 0.75
},
"S":{
"Hfg_298_15K": 278.3,
"Hfg_0K": 275.2,
"Entropy_298_15K": 167.7,
"Integrated_Heat_Capacity_0_to_298_15K": 29.2,
"Heat_Capacity_298_15K": 29.2,
"Electronic_Energy_Levels": [21394, 29394],
"Ionization_Energies": 10.4,
"Electron_Affinity": 2.08
},
"Cl":{
"Hfg_298_15K": 121.3,
"Hfg_0K": 119.1,
"Entropy_298_15K": 165.2,
"Integrated_Heat_Capacity_0_to_298_15K": 33.3,
"Heat_Capacity_298_15K": 33.3,
"Electronic_Energy_Levels": [882, 8823],
"Ionization_Energies": 13.0,
"Electron_Affinity": 3.62
},
"Ar": {
"Hfg_298_15K": 0,
"Hfg_0K": 0,
"Entropy_298_15K": 154.8,
"Integrated_Heat_Capacity_0_to_298_15K": 20.8,
"Heat_Capacity_298_15K": 20.8,
"Electronic_Energy_Levels": [93144, 93751, 95282],
"Ionization_Energies": 15.8,
"Electron_Affinity": -0.08
},
"K":{
"Hfg_298_15K": 89.2,
"Hfg_0K": 89.2,
"Entropy_298_15K": 160.3,
"Integrated_Heat_Capacity_0_to_298_15K": 46.2,
"Heat_Capacity_298_15K": 46.2,
"Electronic_Energy_Levels": [12985, 13042],
"Ionization_Energies": 4.34,
"Electron_Affinity": 0.50
},
"Ca":{
"Hfg_298_15K": 178.2,
"Hfg_0K": 177.3,
"Entropy_298_15K": 41.6,
"Integrated_Heat_Capacity_0_to_298_15K": 25.9,
"Heat_Capacity_298_15K": 25.9,
"Electronic_Energy_Levels": [15315, 23652],
"Ionization_Energies": 6.11,
"Electron_Affinity": -0.02
},
"Sc":{
"Hfg_298_15K": 0,
"Hfg_0K": 0,
"Entropy_298_15K": 33.2,
"Integrated_Heat_Capacity_0_to_298_15K": 3.80,
"Heat_Capacity_298_15K": 25.52,
"Electronic_Energy_Levels": [0, 11519.99],
"Ionization_Energies": 6.561,
"Electron_Affinity": 0.189
},
"Ti":{
"Hfg_298_15K": 473.00,
"Hfg_0K": 470.00 ,
"Entropy_298_15K": 180.30,
"Integrated_Heat_Capacity_0_to_298_15K": 7.54,
"Heat_Capacity_298_15K": 24.43,
"Electronic_Energy_Levels": [0, 170.132, 386.874, 6556.833, 6598.765, 6661.006, 6742.756, 6842.962, 7255.355, 8436.618, 8492.421, 8602.34],
"Ionization_Energies": 6.828,
"Electron_Affinity": 0.087
},
"Ti":{
"Hfg_298_15K": 473.00,
"Hfg_0K": 470.00 ,
"Entropy_298_15K": 180.30,
"Integrated_Heat_Capacity_0_to_298_15K": 7.54,
"Heat_Capacity_298_15K": 24.43,
"Electronic_Energy_Levels": [0, 170.132, 386.874, 6556.833, 6598.765, 6661.006, 6742.756, 6842.962, 7255.355, 8436.618, 8492.421, 8602.34],
"Ionization_Energies": 6.828,
"Electron_Affinity": 0.087
},
};
calculateBtn.addEventListener('click', function() {
let selectedElement = elementInput.value.trim();
if (!selectedElement) {
alert('Please enter an element symbol.');
return;
}
let normalizedElement = selectedElement.charAt(0).toUpperCase() + selectedElement.slice(1).toLowerCase();
calculatorOutput.innerHTML = '<div class="loading-spinner"></div>';
let loadingSpinner = calculatorOutput.querySelector('.loading-spinner');
// Simulate loading with spinner animation for 0.8 seconds
loadingSpinner.style.display = 'block';
setTimeout(() => {
const data = elementData[normalizedElement];
if (data) {
const tableHTML = generateTable(data);
calculatorOutput.innerHTML = tableHTML;
} else {
calculatorOutput.innerHTML = '<p> Compute Error. Timed Out </p>';
}
}, 800);
});
function generateTable(data) {
let tableHTML = '<table>';
tableHTML += '</tbody></table>';
return tableHTML;
}
});
</script>
<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');
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);
});
});
</script>
I've added a lot of content, along with the logic to generate the table of contents dynamically, and the logic to calculate the values for each element, for the calculator. Noah asked me if I could integrate basic calculator, for elements and their covalent radii and bond length. The page is now ready! Wanna see it, it is over here:
Periodicity of Elements - Notes
This marks the end of the coding for the day. I know, it feels a bit rushed, because it is. I couldn't accurately describe what all I did and why, because I don't remember most of that either. I just remember the basic changes.
Top comments (4)
you know you could save yourself days of work by just using wordpress with a couple of plugins for this?
I believe it is better to learn, than to just say I can add a few plugins in a blogging site. On the first day, also, I ruled out the possibility of using CMS or React, as I personally wanted to know how things like react-router and doms work, not a top-level understanding, but building it from the scratch makes me have low-level understanding of the things.
what an utterly stupid and unhelpful comment @ravavyr
Of course he knows it, but he tries to build from scratch.