Forem: Kavei Sahai

[Boost]

Kavei Sahai — Fri, 26 Sep 2025 20:04:30 +0000

What have I even learnt?

Kavei Sahai ・ Sep 26

#javascript #webdev #programming #beginners

What have I even learnt?

Kavei Sahai — Fri, 26 Sep 2025 20:04:20 +0000

A long time ago, I started a project named Neuron-IQ. The idea was to make a WordPress like site from scratch. I wanted to learn things and the best moment to learn them was in front of me, My friend. Since, January, I had been working on it day and night. As well as, I also have to give Physics lectures at University. But, I had a gentle idea. The current form of the site looks quite different from that in previous parts of this series. And honestly, this series had taught me a lot.

The current form of NeuronIQ, which you can visit obviously at NeuronIQ - What do you want to study? is quite new.

And the good part is all the functionality is maintained without any database. I have transcended from a regular static website to a dynamic one, while technically its still static. And also, there are no APIs. I wanted to keep the project free of them also.

One might think, where did this idea even come from? And you very correct to point that. This happened one fine night when I woke up at 2 a.m. and I opened a Google. Then I realised. In this modern era, the experience of a book like website, where one has to find contents is irrelevant and honestly weird. That's where I got this idea. Just like Google but for studies and free of AI slop.

All the content, I created myself, yes, Even Noah didn't even get to participate. He's a bit mad. As we had seen earlier also, his content is too long and honestly not suited. A rough idea I had like in January 20 only. As is visible from this Keep Note.

The current design is a bit better and arguably even good. I'm gonna be honest, in many instances like creating SVGs I took help of AI. And a bit in styling also. But the logic is something, we shall create ourselves. The code in itself is not something I'm really concerned about here. What I'm concerned about is the idea and logic.

How does the search even work? Again I had a very good idea of it in the beginning also. The modern version is just a bit different, which I wouldn't like to go in the specifics of.

The search I had idea for. I believe a good idea without complicating much for my small brain. JavaScript Objects inside of Arrays, for other language users, Object is basically a very light dictionary. The image itself is self explanatory and I really don't want to yap a lot. Try checking out, and having fun! One may also think why waste like 8 to 9 months on a single idea. And you are right. But the thing is I'm not unemployed. I can barely work for maximum 2 hours a day, so 8 to 9 months of mine is like 3 to 4 weeks of any other developer.

And ask me in the comments about anything, that feels weird about it. Because many things do? Like how does it happen? Obviously don't ask why there's no Quantum Mechanics. I haven't completed the content part yet!

A content page has also been attached. Lewis Structures. I know, the whole website is plain and simple. That's what I was hoping for. Not flashy animations, nothing like my past projects. Just a tranquil website, which serves its purpose, i.e., to educate the user.

In some pages, you may also see RDKIT.Js integration and MathJax too. Especially, the high school Chemistry ones. This is not a good post, I know, it doesn't have a lot of value to the end user. But maybe, it has a bit of value, just a bit. Apart from that, anyone can code, so this ain't a teaching lesson, but a talking session like people say in India, "Sankhya Samadhan" meaning sharing ideas and getting rid of confusion. Lots of love!

Kavya Sahai

[Boost]

Kavei Sahai — Tue, 14 Jan 2025 18:41:38 +0000

I Built the ULTIMATE Educational Website from Scratch — Day 5

Kavei Sahai ・ Jan 14

#webdev #javascript #programming #tutorial

I Built the ULTIMATE Educational Website from Scratch — Day 5

Kavei Sahai — Tue, 14 Jan 2025 18:41:25 +0000

Yesterday, we worked on Periodic Properties, a specific article. Today, let's focus back on the actual site design and pages.

We'll create the organic chemistry page. We'll start by setting up the basic HTML structure, including placeholders for the interactive elements.

Hour 23: Building the Organic Chemistry Page

First, I created organic.html inside the \Chemistry folder. This is the basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Organic Chemistry</title>
    <meta name="description" content="Explore the fascinating world of organic chemistry with interactive articles, quizzes, and 3D molecule visualizations.">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Stylesheets (Consider using a CSS preprocessor like Sass for better organization) -->
    <link rel="stylesheet" href="css/style-main.css">
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/specific-chemistry.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <a href="/index.html">Neuron IQ</a>
            </div>
            <button id="hamburger-btn" aria-label="Toggle navigation">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul id="nav-menu">
                <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>

  <!-- Content goes here -->

    <footer>
        <div class="footer-content">
            <p>© 2025 Neuron IQ. All rights reserved.</p>
            <ul class="footer-links">
                <li><a href="/about.html">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Use</a></li>
            </ul>
        </div>
    </footer>

    <!-- JavaScript (Load at the end of body for faster page load) -->
    <script src="https://www.lactame.com/lib/molgl/5.0.0/molgl.min.js"></script>
    <script src="js/scripts.js"></script> 
</body>
</html>

I've added basic structure, links to the main stylesheets, and CDN link to a 3D molecule viewer library molGL. I've also added a basic header and footer, consistent with our previous pages, and a button for hamburger menu.

Now, I'll add the main content area, divided into sections for articles, key topics, and an interactive molecule viewer.

<section class="specific-chemistry-page">
        <aside class="article-list">
            <h2>Organic Chemistry Articles</h2>
            <input type="text" id="article-search" placeholder="Search articles...">
            <ul id="article-links">
                <!-- Use JavaScript to dynamically populate this list based on search -->
                <li><a href="/Chemistry/organic/classification-and-nomenclature-of-organic-compounds.html">Classification and Nomenclature</a></li>
                <li><a href="#">Alkanes, Alkenes, Alkynes</a></li>
                <li><a href="#">Functional Groups</a></li>
                <!-- ... other articles ... -->
                <li><a href="#">Grignard Reagents</a></li>
            </ul>
        </aside>

        <main class="content-area">
            <div class="hero">
                <h1>Organic Chemistry</h1>
                <p>Explore the fascinating world of carbon compounds, their structure, properties, and reactions in an interactive way!</p>
                <button class="cta-button">Start Learning</button>
            </div>

            <div class="topic-list-grid">
                <h2>Key Topics</h2>
                <div class="topic-cards">
                    <!-- Example topic card -->
                    <div class="topic-card">
                        <a href="#">
                            <img src="images/hydrocarbons.jpg" alt="Hydrocarbons"> 
                            <h3>Hydrocarbons</h3>
                            <p>Learn about the simplest organic compounds.</p>
                        </a>
                    </div>
                    <div class="topic-card">
                        <a href="#">
                            <img src="images/functional.jpg" alt="Functional Groups"> 
                            <h3>Functional Groups</h3>
                            <p>Discover the key to organic reactivity.</p>
                        </a>
                    </div>

                    <div class="topic-card">
                        <a href="#">
                            <img src="images/alcohol.jpg" alt="Alcohols, Aldehydes, Ketones"> 
                            <h3>Alcohols, Aldehydes, Ketones</h3>
                            <p>Oxygen-containing functional groups and their properties.</p>
                        </a>
                    </div>

                    <div class="topic-card">
                        <a href="#">
                            <img src="images/reaction.jpg" alt="Reactions of Alkanes, Alkenes and Alkynes"> 
                            <h3>Reactions of Alkanes, Alkenes and Alkynes</h3>
                            <p>Explore addition, substitution, and other key reactions.</p>
                        </a>
                    </div>

                    <div class="topic-card">
                        <a href="#">
                            <img src="images/acid.jpg" alt="Carboxylic Acids and Esters"> 
<h3>Carboxylic Acids and Esters</h3>
                            <p>Acidity, esterification, and important derivatives.</p>
                        </a>
                    </div>

                    <div class="topic-card">
                        <a href="#">
                            <img src="images/amines.jpg" alt="Amines and Amides"> 
                            <h3>Amines and Amides</h3>
                            <p>Nitrogen-containing compounds and their basicity.</p>
                        </a>
                    </div>

                    <div class="topic-card">
                        <a href="#">
                            <img src="images/stereochemistry.jpg" alt="Stereochemistry"> 
                            <h3>Stereochemistry</h3>
                            <p>The 3D arrangement of atoms and its impact.</p>
                        </a>
                    </div>

                    <div class="topic-card">
                        <a href="#">
                            <img src="images/spectroscopy.jpg" alt="Spectroscopy"> 
                            <h3>Spectroscopy</h3>
                            <p>Techniques to identify and analyze organic compounds.</p>
                        </a>
                    </div>
                    <!-- ... more topic cards ... -->
                </div>
            </div>

            <!-- Interactive 3D Molecule Viewer (Example using MolGL) -->
            <div class="molecule-viewer">
                <h2>Interactive Molecule Viewer</h2>
                <div id="mol-container"></div>
                <p>Select a molecule: 
                    <select id="molecule-select">
                        <option value="methane">Methane</option>
                        <option value="ethanol">Ethanol</option>
                        <option value="benzene">Benzene</option>
                    </select>
                </p>
            </div>
        </main>
    </section>

This code adds a three-column layout. The left column will house the article list with a search bar. The middle column will have a hero section with a call-to-action button and a grid of topic cards with images. Finally, the right column will feature the interactive 3D molecule viewer.

I've also added placeholders for images within the topic cards (images/hydrocarbons.jpg, etc.). We'll need to replace these with actual images later.

Hour 24: Adding JavaScript for Interactivity

Now, let's add some basic JavaScript to handle the hamburger menu, the article search functionality, and the 3D molecule viewer. I'll add the following inside the <script> tag at the end of the body:

        // Hamburger Menu Toggle
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');

hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('show'); 
});

// Article Search Functionality (Basic Example)
const articleSearch = document.getElementById('article-search');
const articleLinks = document.getElementById('article-links').querySelectorAll('a');

articleSearch.addEventListener('input', () => {
  const searchTerm = articleSearch.value.toLowerCase();

  articleLinks.forEach(link => {
    const linkText = link.textContent.toLowerCase();
    if (linkText.includes(searchTerm)) {
      link.style.display = 'block';
    } else {
      link.style.display = 'none';
    }
  });
});

// 3D Molecule Viewer (MolGL Example)
const molContainer = document.getElementById('mol-container');
const moleculeSelect = document.getElementById('molecule-select');

// Initialize MolGL viewer 
let viewer = new MolGL({
  container: molContainer,
  style: {
    stick: {},
    sphere: { scale: 0.3 }
  }
});

// Load a default molecule
viewer.load('pdb:1crn'); // Example: Load a PDB structure

// Change molecule on selection
moleculeSelect.addEventListener('change', () => {
  const selectedMolecule = moleculeSelect.value;
  // We'll need to map molecule names to appropriate data sources (e.g., PDB IDs, SDF files)
  if (selectedMolecule === 'methane') {
    viewer.load('sdf:./molecules/methane.sdf'); // Example: Load from an SDF file
  } else if (selectedMolecule === 'ethanol') {
    viewer.load('pdb:1etn');
  } else if (selectedMolecule === 'benzene') {
    viewer.load('sdf:./molecules/benzene.sdf');
  }
});

Here's what this JavaScript does:

Hamburger Menu Toggle: Adds an event listener to the hamburger button to toggle the show class on the navigation menu, making it visible or hidden on small screens.
Article Search: Implements a simple search functionality that filters the article links based on the user's input in the search bar.
3D Molecule Viewer:
- Initializes a MolGL viewer instance within the mol-container element.
- Loads a default molecule (crambin protein, 1crn) in PDB format from external link.
- Adds an event listener to the molecule selection dropdown to load different molecules when the user makes a selection.
- Uses placeholder molecule data sources (./molecules/methane.sdf, etc.). We'll need to provide actual molecule data in the correct format (SDF, PDB, etc.) and map the molecule names accordingly.

Live page is over here, if you want to see:

Organic Chemistry - NeuronIQ

Hour 25: Creating the Inorganic Chemistry Page

Let's create a new page for inorganic chemistry, similar in structure to the organic chemistry page.

First, I created inorganic.html inside the \Chemistry folder with the following basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Inorganic Chemistry</title>
    <link rel="stylesheet" href="style.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style-main.css">
      <link rel="stylesheet" href="specific-chemistry.css">
</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>

    <section class="specific-chemistry-page">
        <aside class="article-list">
             <h2>Inorganic Chemistry Articles</h2>
            <ul>
                <li><a href="#">Introduction to Coordination Chemistry</a></li>
                <li><a href="#">The Structure of Metal Complexes</a></li>
                <li><a href="#">Bonding in Inorganic Compounds</a></li>
                <li><a href="#">Transition Metal Chemistry</a></li>
                 <li><a href="#">Main Group Elements</a></li>
                   <li><a href="#">Acid-Base Reactions</a></li>
                   <li><a href="#">Solid State Chemistry</a></li>
                      <li><a href="#">Bioinorganic Chemistry</a></li>
                       <li><a href="#">Organometallic Chemistry</a></li>
                           <li><a href="#">Catalysis</a></li>
            </ul>
        </aside>

       <main class="content-area">
             <h1>Inorganic Chemistry</h1>
            <p>Dive into the study of elements other than carbon, their compounds, and their properties.</p>
             <div class="topic-list-grid">
                 <h2>Key Topics</h2>
                  <ul>
                     <li><a href="#">Coordination Compounds</a></li>
                     <li><a href="#">Transition Metals</a></li>
                     <li><a href="#">Main Group Elements</a></li>
                     <li><a href="#">Solid State Structure</a></li>
                      <li><a href="#">Acid-Base Chemistry</a></li>
                     <li><a href="#">Organometallic Chemistry</a></li>
                      <li><a href="#">Bonding in Inorganic Compounds</a></li>
                      <li><a href="#">Applications of Inorganic Compounds</a></li>

                     </ul>
             </div>

        </main>

    </section>

  <footer>
          <p>© 2025 Neuron IQ. All rights reserved.</p>
        <ul>
            <li><a href="/about.html">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
        </ul>
    </footer>
</body>
</html>

This code sets up the HTML for the page with:

A basic header with navigation links.
An aside element for the article list.
A main content area with a heading, introductory text, and a grid for key topics.
Placeholder links for articles and topics.
A footer.

We are using style.css, style-main.css and specific-chemistry.css for the styling.

Next, I added some content to the page:

<section class="specific-chemistry-page">
    <aside class="article-list">
         <h2>Inorganic Chemistry Articles</h2>
        <input type="text" id="article-search" placeholder="Search articles...">
        <ul id="article-links">
            <li><a href="/Chemistry/inorganic/introduction-to-coordination-chemistry.html">Introduction to Coordination Chemistry</a></li>
            <li><a href="/Chemistry/inorganic/the-structure-of-metal-complexes.html">The Structure of Metal Complexes</a></li>
            <li><a href="/Chemistry/inorganic/bonding-in-inorganic-compounds.html">Bonding in Inorganic Compounds</a></li>
            <!-- ... other articles ... -->
        </ul>
    </aside>

    <main class="content-area">
         <h1>Inorganic Chemistry</h1>
        <p>Dive into the study of elements other than carbon, their compounds, and their properties.</p>
         <div class="topic-list-grid">
             <h2>Key Topics</h2>
              <ul>
                 <li><a href="#">Coordination Compounds</a></li>
                 <li><a href="#">Transition Metals</a></li>
                 <li><a href="#">Main Group Elements</a></li>
                 <li><a href="#">Solid State Structure</a></li>
                  <li><a href="#">Acid-Base Chemistry</a></li>
                 <li><a href="#">Organometallic Chemistry</a></li>
                  <li><a href="#">Bonding in Inorganic Compounds</a></li>
                  <li><a href="#">Applications of Inorganic Compounds</a></li>
                 </ul>
         </div>
    </main>
</section>

I also added a search bar and some links, that we will add later.

Hour 26: Adding JavaScript for Search Functionality

Since we used a similar structure to the organic chemistry page, I copied over the JavaScript code for the hamburger menu and the article search functionality from organic.html to this inorganic chemistry page, removing the 3D molecule viewer part.

// Hamburger Menu Toggle
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');

hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('show'); 
});

// Article Search Functionality (Basic Example)
const articleSearch = document.getElementById('article-search');
const articleLinks = document.getElementById('article-links').querySelectorAll('a');

articleSearch.addEventListener('input', () => {
  const searchTerm = articleSearch.value.toLowerCase();

  articleLinks.forEach(link => {
    const linkText = link.textContent.toLowerCase();
    if (linkText.includes(searchTerm)) {
      link.style.display = 'block';
    } else {
      link.style.display = 'none';
    }
  });
});

I had to adjust the selectors to match the IDs used in this page. This script now handles the basic hamburger menu toggle and article search filtering.

We now have a basic inorganic.html page with a similar structure to the organic chemistry page. We can further enhance it by:

Adding Content:
- Write the actual articles for the topics listed.
- Add images or diagrams to the topic grid.
Styling:
- Improve the visual presentation with CSS.
- Ensure responsiveness for different screen sizes.
More Interactivity:
- Add quizzes or interactive diagrams as needed.
Navigation:
- Implement a more robust navigation system if the site becomes more complex, as the current one is quite basic

Since our main focus for today was setting up the structure and basic functionality, we can consider these enhancements in the next steps. We can also improve on this by adding more relevant content, and working on the responsiveness of the page.

I Built the ULTIMATE Educational Website from Scratch — Day 4

Kavei Sahai — Mon, 13 Jan 2025 17:24:03 +0000

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&#39;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&#39;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&#39;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 &quot;Enter Molecule,&quot; type the chemical formula of the molecule you want to analyze. Be sure to use correct capitalization for element symbols (e.g., &#39;C&#39; for carbon, &#39;Cl&#39; for chlorine).</li>
            <li><strong>Click &quot;Calculate&quot;:</strong>  Press the &quot;Calculate&quot; 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="#">
        <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!

I Built the ULTIMATE Educational Website from Scratch — Day 3

Kavei Sahai — Fri, 10 Jan 2025 21:42:39 +0000

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.

[Boost]

Kavei Sahai — Thu, 09 Jan 2025 17:58:00 +0000

I Built the ULTIMATE Educational Website from Scratch — Day 2

Kavei Sahai ・ Jan 9

#webdev #javascript #tutorial #programming

I Built the ULTIMATE Educational Website from Scratch — Day 2

Kavei Sahai — Thu, 09 Jan 2025 17:57:33 +0000

Yesterday, we worked on index.html, and today we'll work on the subjects.html and about.html. We'll see if we have enough time left to work on on our SubjectPages like Chemistry, Mathematics etc.

Hour 14: Building the Subjects Page

I'll start with subjects.html. Just like before, I'll use my custom boilerplate, which I designed yesterday for this project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Subjects</title>
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</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>

   <!-- Content goes here -->

    <footer>
         <p>© 2025 Neuron IQ. All rights reserved.</p>
        <ul>
            <li><a href="about.html">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
        </ul>
    </footer>
</body>
</html>

I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.

Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:

    <section class="subject-hero">
        <div class="subject-hero-content">
             <h1>Explore Subjects</h1>
              <p>Delve into our extensive collection of educational notes and answers, tailored for a diverse range of disciplines</p>

        </div>
    </section>

This will serve as a good header for the page, and it looks consistent with the index page hero section.

Next up is the main content area: a grid of subjects, like the categories section on the home page:

  <section class="subject-list">
           <div class="subject-grid">
              <a href="#">
                   <img src="icons/maths.png" alt="Mathematics Icon">
                     <h3>Mathematics</h3>
                     <p>Explore a variety of mathematical concepts.</p>
              </a>
               <a href="#">
                    <img src="icons/physics.png" alt="Physics Icon">
                     <h3>Physics</h3>
                      <p>Discover the fascinating world of physics.</p>
                 </a>
               <a href="/Chemistry/">
                  <img src="icons/chemistry.png" alt="Chemistry Icon">
                     <h3>Chemistry</h3>
                    <p>Study the principles of chemistry.</p>
                </a>
                <a href="#">
                    <img src="icons/biology.png" alt="Biology Icon">
                       <h3>Biology</h3>
                    <p>Uncover the intricacies of life sciences.</p>
                </a>
                <a href="#">
                    <img src="icons/programming.png" alt="Programming Icon">
                       <h3>Computer Science</h3>
                      <p>Develop coding and logical thinking skills.</p>
                </a>
                <a href="#">
                    <img src="icons/history.png" alt="History Icon">
                       <h3>History</h3>
                     <p>Explore past civilizations and events.</p>
                </a>
                  <a href="#">
                    <img src="icons/english.png" alt="English Icon">
                        <h3>English Literature</h3>
                     <p>Appreciate classic and contemporary literature.</p>
                    </a>
                    <a href="#">
                     <img src="icons/economics.png" alt="Economics Icon">
                        <h3>Economics</h3>
                      <p>Understand the systems of production, distribution, and consumption.</p>
                   </a>
                   <a href="#">
                    <img src="icons/geography.png" alt="Geography Icon">
                        <h3>Geography</h3>
                      <p>Explore the earth and its different ecosystems and human societies.</p>
                   </a>
              </div>
        </section>

This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.

I'll keep the footer consistent with the rest of the site, and use the same code from index.html.

Hour 15: Building the About Page

Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - About Us</title>
     <link rel="stylesheet" href="style.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</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>

   <!-- Content goes here -->

     <footer>
         <p>© 2025 Neuron IQ. All rights reserved.</p>
        <ul>
            <li><a href="about.html">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
        </ul>
    </footer>
</body>
</html>

I've included a header and footer identical to the other pages. This keeps the navigation consistent.

For the about page, I start with a hero section, just like on the home and subject page:

    <section class="about-hero">
        <div class="about-hero-content">
            <h1>About Neuron IQ</h1>
             <p>Learn about our vision, mission, and the team behind providing quality education for everyone.</p>
        </div>
    </section>

The hero section includes a heading and a short paragraph to introduce the page.

Now, I'll add the main content section, divided into two sections: mission and values.

  <section class="about-content">
        <div class="about-container">
            <h2>Our Mission</h2>
            <p>At Neuron IQ, our mission is to democratize education by providing high-quality, accessible educational resources to learners worldwide. We are dedicated to creating a platform that not only supports academic success but also fosters a lifelong love of learning.</p>
        </div>
           <div class="about-container">
            <h2>Our Values</h2>
                <p><strong>Quality:</strong> We are committed to providing meticulously crafted notes and answers.
                </p>
                  <p><strong>Accessibility:</strong> We aim to make educational materials readily available to all learners.
                </p>
                  <p><strong>Innovation:</strong> We continuously seek new ways to improve the learning experience.</p>
                   <p><strong>Impact:</strong> We strive to empower students and educators through our resources.
                </p>

           </div>
  </section>

This is very standard design, with some bold elements to improve the user experience, which I liked very much.

I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.

  <!-- <div class="about-team">
            <h2>Meet the Team</h2>
            <div class="team-grid">
                <div class="team-member">
                    <img src="team-member1.jpg" alt="Team Member 1">
                    <h3>John Doe</h3>
                    <p>Founder & CEO</p>
                </div>
                 <div class="team-member">
                    <img src="team-member2.jpg" alt="Team Member 2">
                    <h3>Jane Smith</h3>
                    <p>Content Lead</p>
                </div>
                 <div class="team-member">
                    <img src="team-member3.jpg" alt="Team Member 3">
                    <h3>Alex Kim</h3>
                    <p>Technical Lead</p>
                </div>
            </div>
        </div> -->

And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.
Subjects Page
About Page

Okay, let's get started with the subject-specific pages.

Hour 16: Setting up the Chemistry Subject Page

First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Chemistry</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style-main.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</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>

    <!-- Content goes here -->

    <footer>
          <p>© 2025 Neuron IQ. All rights reserved.</p>
        <ul>
            <li><a href="/about.html">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
        </ul>
    </footer>
</body>
</html>

This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.

Now, let's add the structure for this page:

  <section class="chemistry-page">
        <aside class="article-list">
             <h2>Articles</h2>
            <ul>
                <li><a href="1.html">Introduction to Atomic Structure</a></li>
                <li><a href="#">Basic Principles of Chemical Bonding</a></li>
                <li><a href="3.html">Understanding the Periodic Table</a></li>
                <li><a href="#">Introduction to Organic Chemistry</a></li>
                 <li><a href="#">Reaction Kinetics Explained</a></li>
                   <li><a href="#">Acid-Base Chemistry</a></li>
                   <li><a href="#">Introduction to Analytical Chemistry</a></li>
                   <li><a href="#">Isomers and Nomenclature</a></li>
                      <li><a href="#">The Chemistry of Life</a></li>
                       <li><a href="#">Chemical Equilibrium</a></li>
                           <li><a href="#">Redox Reactions</a></li>
            </ul>
        </aside>

        <main class="content-grid">
            <div class="topic-grid">
                <a href="organic.html">
                    <img src="/icons/organic.png" alt="Organic Chemistry Icon">
                     <h3>Organic Chemistry</h3>
                     <p>Study of carbon-containing compounds.</p>
                </a>
                <a href="inorganic.html">
                    <img src="/icons/inorganic.png" alt="Inorganic Chemistry Icon">
                    <h3>Inorganic Chemistry</h3>
                     <p>Explore non-carbon based substances.</p>
                </a>
                  <a href="#">
                    <img src="/icons/physical.png" alt="Physical Chemistry Icon">
                    <h3>Physical Chemistry</h3>
                    <p>Study of the underlying physical principles in chemical systems.</p>
                </a>
                   <a href="#">
                    <img src="/icons/analytical.png" alt="Analytical Chemistry Icon">
                    <h3>Analytical Chemistry</h3>
                     <p>Study of chemical properties for identifying and quantifying chemical substances</p>
                </a>
                 <a href="#">
                    <img src="/icons/biochemistry.png" alt="Biochemistry Icon">
                    <h3>Biochemistry</h3>
                     <p>Study of the chemical processes within living organisms.</p>
                </a>

            </div>
        </main>

         <aside class="topic-list">
            <h2>Topics</h2>
             <ul>
                 <li><a href="#">Atomic Structure</a></li>
                <li><a href="#">Chemical Bonding</a></li>
                <li><a href="#">The Periodic Table</a></li>
                <li><a href="#">Organic Chemistry</a></li>
                 <li><a href="#">Reaction Kinetics</a></li>
                 <li><a href="#">Acid-Base Chemistry</a></li>
                   <li><a href="#">Analytical Chemistry</a></li>
                      <li><a href="#">Isomers and Nomenclature</a></li>
                       <li><a href="#">Biochemistry</a></li>
                        <li><a href="#">Chemical Equilibrium</a></li>
                </ul>
        </aside>
    </section>

This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;

Some href values are "1.html", "organic.html", and some are just "#". Answer: I used "1.html", "organic.html", etc., for links that are ready. The "#" is a placeholder for pages not yet developed. It keeps the structure consistent and visually complete, allowing me to see how the final site will look, while indicating that the content isn't available yet.

Finally, I'll keep the same footer as all of the other pages, to keep consistency.

Hour 17: Styling the Chemistry Page

Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.

I wanted a design that was distinct and visually appealing. Here’s what I came up with:

:root {
    --primary-color: #00bcd4; /* Vibrant yet professional */
    --secondary-color: #ffc107; /* Energetic accent */
    --background-dark: #1a1a1a; /* Deeper, richer dark */
    --background-light: #2e2e2e; /* Slightly lighter for contrast */
    --text-light: #f0f0f0; /* Softer off-white */
    --text-accent: #ffffff; /* Pure white for emphasis */
    --border-radius: 12px; /* More pronounced curves */
    --shadow-light: rgba(0, 0, 0, 0.15); /* Subtle shadow */
    --transition-duration: 0.3s;
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--background-dark);
    color: var(--text-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}

.chemistry-page {
    display: flex;
    max-width: 1200px;
    margin: 60px auto; /* Increased top/bottom margin */
    padding: 30px; /* Increased padding for spaciousness */
    background: linear-gradient(145deg, var(--background-dark), #111111); /* Subtle gradient */
    border-radius: var(--border-radius);
    box-shadow: 0 8px 16px var(--shadow-light); /* More pronounced shadow */
}

.article-list, .topic-list {
    flex: 1;
    padding: 30px; /* Increased padding */
    background: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px var(--shadow-light);
    margin: 0 15px; /* Increased horizontal margin */
    transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

.article-list:hover, .topic-list:hover {
    transform: translateY(-5px); /* Gentle lift on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.article-list h2, .topic-list h2 {
    margin-bottom: 25px; /* Increased bottom margin */
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: 1.8rem; /* Slightly larger */
    color: var(--text-accent);
    position: relative; /* For pseudo-element underline */
    padding-bottom: 10px;
}

.article-list h2::after, .topic-list h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    transform: translateX(-50%);
}

.article-list ul, .topic-list ul {
    list-style: none;
    padding: 0;
}

.article-list ul li, .topic-list ul li {
    margin-bottom: 15px; /* Increased bottom margin */
    border-bottom: 1px solid #444; /* Subtle divider */
    padding-bottom: 10px;
}
.article-list ul li:last-child, .topic-list ul li:last-child {
    border-bottom: none; /* Remove border from the last item */
    padding-bottom: 0;
    margin-bottom: 0;
}

.article-list ul li a, .topic-list ul li a {
    display: block;
    padding: 15px; /* Increased padding */
    text-decoration: none;
    color: var(--text-light);
    background: linear-gradient(to bottom right, #333, #222); /* Subtle gradient */
    border-radius: calc(var(--border-radius) / 2); /* Smaller radius for list items */
    transition: background var(--transition-duration), transform var(--transition-duration);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow to list items */
}

.article-list ul li a:hover, .topic-list ul li a:hover {
    background: linear-gradient(to bottom right, var(--primary-color), #0097a7); /* More vibrant hover */
    transform: scale(1.02); /* Gentle scale on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    color: var(--text-accent);
}

.content-grid {
    flex: 3;
    padding: 30px; /* Increased padding */
    margin: 0 15px; /* Increased horizontal margin */
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider min-width */
    gap: 25px; /* Increased gap */
}

.topic-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-light);
    background: var(--background-light);
    padding: 30px; /* Increased padding */
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px var(--shadow-light);
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.topic-grid a img {
    width: 60px; /* Larger icon */
    height: 60px; /* Larger icon */
    margin-bottom: 15px; /* Increased bottom margin */
    filter: brightness(1.1); /* Slightly brighten the icons */
    transition: transform var(--transition-duration);
}

.topic-grid a:hover {
    transform: scale(1.05); /* Gentle scale on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.topic-grid a:hover img {
    transform: scale(1.1); /* Scale the icon on hover */
}

/* Responsive adjustments with smoother transitions */
@media (max-width: 768px) {
    .chemistry-page {
        flex-direction: column;
        margin: 30px auto; /* Adjust margins for smaller screens */
        padding: 20px;
    }
    .article-list, .topic-list, .content-grid {
        margin: 15px 0;
        padding: 20px;
    }
    .topic-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller screens */
    }
}

/* Further refinements for smaller screens */
@media (max-width: 576px) {
    .chemistry-page {
        padding: 15px;
    }
    .article-list, .topic-list, .content-grid {
        padding: 15px;
    }
    .article-list h2, .topic-list h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    .topic-grid {
        gap: 15px;
    }
    .topic-grid a {
        padding: 20px;
    }
    .topic-grid a img {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }
}

I've added a vibrant and modern design, with a dark theme, and subtle gradients. The layout uses flexbox and grid for responsiveness. I also included some nice hover effects to make the page more interactive.
Before moving on, let's address few questions you may have;

Why use custom properties (variables) instead of just writing the color values directly in the rules?
How was the color scheme (vibrant yet professional) chosen? And what makes these colors work well together?

Answer: I chose to use custom properties (variables) for several reasons. Primarily, they enhance maintainability and consistency. Changing a color across the entire stylesheet becomes as simple as modifying the variable's value at the root. This is far more efficient than hunting down every instance of a specific color code. Additionally, variables improve readability by giving meaningful names to values, making the code's intent clearer. It also facilitates theming and allows for dynamic changes based on user preferences or different modes.
The color scheme was chosen with the goal of creating a "vibrant yet professional" aesthetic. I wanted a balance between energetic and trustworthy.

--primary-color: #00bcd4 (Vibrant Cyan): This is a bright, engaging color that evokes a sense of modernity and innovation, fitting for a science-related topic. It's not overly saturated, maintaining a degree of professionalism.
--secondary-color: #ffc107 (Energetic Yellow): This yellow acts as a complementary accent, adding a pop of energy and optimism. Yellow is often associated with creativity and intellect.
Dark Backgrounds (--background-dark, --background-light): The dark background provides a strong, stable foundation that allows the brighter colors to stand out. It also lends a sophisticated feel.
Light Text (--text-light, --text-accent): Off-white and pure white text on the dark background ensures high readability and a clean, modern look.

Why they work well together:

Complementary Contrast: The cyan and yellow are near-complementary colors, creating a visually appealing contrast that's dynamic but not jarring.
Analogous Harmony: The dark background shades are analogous, meaning they are close to each other on the color wheel, creating a harmonious and cohesive feel.
Value Contrast: The significant difference in value (lightness/darkness) between the text and background ensures excellent readability.
Balanced Saturation: The primary and secondary colors are vibrant but not overly saturated, avoiding a childish or overwhelming look. They are balanced by the more muted background.

Essentially, the combination of a bright, modern primary color, a warm accent, and a sophisticated dark background, along with carefully chosen text colors, creates a palette that is both visually engaging and appropriate for a professional, educational context.

However, these styles only work for the Chemistry page and not the entire website. So, I created another CSS file, style-main.css inside \Chemistry to override main styles.

/* ==================== Root Variables for Global Styling ==================== */
:root {
    --primary-bg: #1a1a1a;
    --secondary-bg: #2e2e2e; /* Slightly lighter for better definition */
    --text-color-light: #f0f0f0; /* Softer white for better readability */
    --accent-color: #64b5f6;
    --accent-hover-color: #42a5f5;
    --box-shadow-color: rgba(0, 0, 0, 0.15); /* Darker shadow for better contrast on dark backgrounds */
    --border-radius-base: 10px; /* Slightly more rounded */
    --transition-duration: 0.35s; /* Fine-tuned transition speed */
    --spacing-large: 50px; /* Increased spacing for a more open feel */
    --spacing-medium: 25px;
    --spacing-small: 12px;
    --font-family-base: 'Inter', sans-serif; /* A modern and versatile font */
    --font-family-heading: 'Poppins', sans-serif;
  }

  /* ==================== Base Styles ==================== */
  body {
    font-family: var(--font-family-base);
    margin: 0;
    padding: 0;
    line-height: 1.7; /* Improved line height for readability */
    color: var(--text-color-light);
    background-color: var(--primary-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth; /* Enable smooth scrolling */
  }

  /* ==================== Typography ==================== */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--spacing-small);
  }

  /* ==================== Selection Styling ==================== */
  ::selection {
    background-color: var(--accent-color);
    color: var(--secondary-bg);
  }

  /* ==================== Scrollbar Styling (Webkit Browsers) ==================== */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--secondary-bg);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-hover-color);
  }

  /* ==================== Header & Navigation ==================== */
  header {
    background: rgba(var(--secondary-bg-rgb, 46, 46, 46), 0.95); /* Use RGB for transparency */
    backdrop-filter: blur(10px); /* Apply a blur to the background */
    padding: 1.2rem 0;
    box-shadow: 0 3px 6px var(--box-shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow var(--transition-duration);
  }

  /* Extract RGB values from the variable */
  @supports not (backdrop-filter: blur(10px)) {
    header {
      background-color: var(--secondary-bg); /* Fallback for browsers that don't support backdrop-filter */
    }
  }

  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-medium);
  }

  .logo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    text-shadow: 0 0 5px rgba(var(--accent-color-rgb, 100, 181, 246), 0.8); /* Add a subtle glow */
    transition: transform var(--transition-duration);
  }

  .logo:hover {
    transform: scale(1.05);
  }

  /* Extract RGB values from the variable */
  :root {
    --secondary-bg-rgb: 46, 46, 46;
    --accent-color-rgb: 100, 181, 246;
  }

  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
  }

  nav ul li {
    margin-left: var(--spacing-medium);
  }

  nav ul li a {
    text-decoration: none;
    color: var(--text-color-light);
    position: relative; /* For underline animation */
    padding-bottom: 5px; /* Space for underline */
    transition: color var(--transition-duration);
  }

  nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition-duration);
  }

  nav ul li a:hover {
    color: var(--accent-color);
  }

  nav ul li a:hover::after {
    width: 100%;
  }

  /* ==================== Sections (General) ==================== */
  section {
    max-width: 1300px; /* Slightly wider for content */
    margin: var(--spacing-large) auto;
    padding: var(--spacing-medium);
    text-align: center;
  }

  /* ==================== Hero Section ==================== */
  .hero {
    background: linear-gradient(135deg, #2c3e50, #1a237e);
    padding: 100px var(--spacing-medium); /* Increased padding */
    color: var(--text-color-light);
    overflow: hidden; /* Prevent animation overflow */
    position: relative;
  }

  .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('path-to-your-abstract-background-image.jpg'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Subtle background texture */
    pointer-events: none; /* Make it non-interactive */
  }

  .hero-content {
    max-width: 800px; /* Wider content area */
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.215, 0.610, 0.355, 1), transform 1s cubic-bezier(0.215, 0.610, 0.355, 1); /* More natural easing */
    position: relative; /* Ensure content is above the background */
    z-index: 1;
  }

  .hero.loaded .hero-content {
    opacity: 1;
    transform: translateY(0);
  }

  .hero-content h1,
  .hero-content p,
  .hero-content .btn {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy effect */
  }

  .hero.loaded .hero-content h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }

  .hero.loaded .hero-content p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
  }

  .hero.loaded .hero-content .btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
  }

  .hero h1 {
    font-size: 3rem; /* Larger heading */
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .hero p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    color: rgba(var(--text-color-light-rgb, 240, 240, 240), 0.9); /* Slightly transparent text */
  }

  /* Extract RGB values from the variable */
  :root {
    --text-color-light-rgb: 240, 240, 240;
  }

  /* ==================== Buttons ==================== */
  .btn {
    display: inline-block;
    background: var(--accent-color);
    color: var(--secondary-bg);
    padding: 14px 30px; /* Slightly larger button */
    text-decoration: none;
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background var(--transition-duration), transform var(--transition-duration), box-shadow var(--transition-duration);
  }

  .btn:hover {
    background: var(--accent-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  /* ==================== Intro Grid ==================== */
  .intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Wider intro items */
    gap: var(--spacing-medium);
    text-align: left;
  }

  .intro-grid div {
    padding: var(--spacing-medium);
    border-radius: var(--border-radius-base);
    background: var(--secondary-bg);
    box-shadow: 0 2px 4px var(--box-shadow-color);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .intro-grid div.fade-in:nth-child(1) {
    transition-delay: 0.1s;
  }

  .intro-grid div.fade-in:nth-child(2) {
    transition-delay: 0.3s;
  }

  .intro-grid div.fade-in:nth-child(3) {
    transition-delay: 0.5s;
  }

  .intro-grid div.fade-in {
    opacity: 1;
    transform: translateY(0);
  }

  .intro-grid div img {
    width: 35px;
    height: 35px;
    margin-right: var(--spacing-small);
    float: left;
    filter: brightness(1.2);
  }

  .intro-grid div h3 {
    margin-bottom: 5px;
  }

  /* ==================== Categories Grid ==================== */
  .categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Slightly larger categories */
    gap: var(--spacing-medium);
    padding-top: var(--spacing-medium);
  }

  .categories-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-color-light);
    background: var(--secondary-bg);
    padding: var(--spacing-medium);
    border-radius: var(--border-radius-base);
    box-shadow: 0 3px 6px var(--box-shadow-color);
    transition: box-shadow var(--transition-duration), transform var(--transition-duration), opacity 0.5s ease;
    opacity: 0;
    transform: translateY(20px);
  }

  .categories-grid a:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    transform: scale(1.03);
  }

  .categories-grid a.fade-in:nth-child(odd) {
    transition-delay: 0.2s;
  }

  .categories-grid a.fade-in:nth-child(even) {
    transition-delay: 0.4s;
  }

  .categories-grid a.fade-in {
    opacity: 1;
    transform: translateY(0);
  }

  .categories-grid a img {
    width: 50px;
    height: 50px;
    margin-bottom: var(--spacing-small);
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
  }

  /* ==================== Testimonials ==================== */
  .testimonials {
    background-color: var(--secondary-bg);
    padding: var(--spacing-large) var(--spacing-medium);
    position: relative;
    overflow: hidden;
  }

  .testimonial-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%; /* Adjusted width */
    margin: var(--spacing-medium) auto;
    padding-bottom: var(--spacing-medium); /* Added padding for better visual spacing */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
  }

  .testimonial-slide {
    min-width: 80%; /* Take up more space on smaller screens */
    scroll-snap-align: start;
    text-align: left;
    padding: var(--spacing-medium);
    box-sizing: border-box;
    border-radius: var(--border-radius-base);
    background: var(--primary-bg);
    box-shadow: 0 3px 6px var(--box-shadow-color);
    margin-right: var(--spacing-medium); /* Add spacing between slides */
    opacity: 0.7;
    transform: scale(0.95);
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
  }

  .testimonial-slide:last-child {
    margin-right: 0; /* Remove margin from the last slide */
  }

  .testimonial-slide.active {
    opacity: 1;
    transform: scale(1);
  }

  .testimonial-slide p:first-of-type {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-small);
  }

  .testimonial-slide p:last-child {
    margin-top: var(--spacing-small);
    font-weight: 500;
    text-align: right;
    font-style: italic;
    color: var(--accent-color);
  }

  .slider-buttons {
    text-align: center;
    margin-top: var(--spacing-medium);
  }

  .slider-buttons button {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    margin: 0 var(--spacing-small);
    color: #aaa;
    transition: color var(--transition-duration);
  }

  .slider-buttons button:hover {
    color: var(--text-color-light);
  }

  /* ==================== Latest Grid ==================== */
  .latest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Wider latest cards */
    gap: var(--spacing-medium);
    text-align: left;
  }

  .latest-card {
    background: var(--secondary-bg);
    padding: var(--spacing-medium);
    border-radius: var(--border-radius-base);
    box-shadow: 0 3px 6px var(--box-shadow-color);
    transition: box-shadow var(--transition-duration), transform var(--transition-duration), opacity 0.5s ease;
    opacity: 0;
    transform: translateY(20px);
  }

  .latest-card:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(-5px);
  }

  .latest-card.fade-in:nth-child(odd) {
    transition-delay: 0.2s;
  }

  .latest-card.fade-in:nth-child(even) {
    transition-delay: 0.4s;
  }

  .latest-card.fade-in {
    opacity: 1;
    transform: translateY(0);
  }

  .latest-card h3 {
    margin-bottom: var(--spacing-small);
  }

  .latest-card p {
    color: rgba(var(--text-color-light-rgb, 240, 240, 240), 0.8);
  }

  .latest-card a {
    display: inline-block;
    margin-top: var(--spacing-medium);
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 500;
    transition: color var(--transition-duration);
  }

  .latest-card a:hover {
    color: var(--accent-hover-color);
  }

  /* ==================== Call to Action (CTA) ==================== */
  .cta {
    background: linear-gradient(90deg, var(--secondary-bg), #333); /* Softer gradient */
    color: #fff;
    padding: 80px var(--spacing-medium);
    margin-top: var(--spacing-large);
    border-radius: var(--border-radius-base);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
  }

  .cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    padding-bottom: 200%;
    background-color: rgba(var(--accent-color-rgb, 100, 181, 246), 0.1);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.6s ease-out;
  }

  .cta:hover::before {
    transform: scale(1);
  }

  .cta-content```
{% endraw %}
css
{
    position: relative; /* Ensure content is above the pseudo-element */
    z-index: 1;
  }

  .cta h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-medium);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }

  /* ==================== Footer ==================== */
  footer {
    background: #111; /* Darker footer */
    color: #bbb;
    padding: var(--spacing-medium);
    text-align: center;
  }

  footer ul {
    list-style: none;
    padding: 0;
    margin: var(--spacing-small) 0;
    display: flex;
    justify-content: center;
  }

  footer ul li {
    margin: 0 var(--spacing-small);
  }

  footer ul li a {
    color: #bbb;
    text-decoration: none;
    transition: color var(--transition-duration), transform var(--transition-duration);
  }

  footer ul li a:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
  }

  /* ==================== Responsive Design ==================== */
  @media (max-width: 768px) {
    nav {
      flex-direction: column;
      text-align: center;
    }

    nav ul {
      flex-direction: column;
      margin-top: var(--spacing-small);
    }

    nav ul li {
      margin: 7px 0;
    }

    .intro-grid {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .intro-grid div {
      padding: var(--spacing-medium);
    }

    .intro-grid div img {
      float: none;
      margin-right: 0;
    }

    .hero {
      padding: 80px var(--spacing-small);
    }

    .hero h1 {
      font-size: 2.5rem;
    }

    .categories-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .testimonial-slide {
      min-width: 100%;
      margin-right: 0; /* Ensure full width on smaller screens */
    }

    .latest-grid {
      grid-template-columns: 1fr;
    }

    .cta {
      padding: 60px var(--spacing-small);
    }

    .cta h2 {
      font-size: 2rem;
    }
  }

  /* ==================== Subject Page Specific Styles ==================== */
  .subject-hero {
    /* ... (rest of your subject page styles) ... */
    background: linear-gradient(135deg, #2c3e50, #1a237e);
    padding: 100px var(--spacing-medium);
    color: var(--text-color-light);
  }

  .subject-hero-content {
    max-width: 800px;
    margin: 0 auto;
  }

  .subject-list {
    margin: var(--spacing-large) auto;
  }

  .subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjusted minmax */
    gap: var(--spacing-medium);
  }

  .subject-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-color-light);
    background: var(--secondary-bg);
    padding: var(--spacing-medium);
    border-radius: var(--border-radius-base);
    box-shadow: 0 3px 6px var(--box-shadow-color);
    transition: box-shadow var(--transition-duration), transform var(--transition-duration);
  }

  .subject-grid a:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    transform: scale(1.05);
  }

  .subject-grid a img {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-small);
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
  }

  /* ==================== About Page Specific Styles ==================== */
  .about-hero {
    /* ... (rest of your about page styles) ... */
    background: linear-gradient(135deg, #2c3e50, #1a237e);
    padding: 100px var(--spacing-medium);
    color: var(--text-color-light);
  }

  .about-hero-content {
    max-width: 800px;
    margin: 0 auto;
  }

  .about-container {
    margin: var(--spacing-large) auto;
    max-width: 900px; /* Wider container */
    text-align: left;
  }

  .about-container h2 {
    margin-bottom: var(--spacing-medium);
    position: relative;
    padding-bottom: var(--spacing-small);
  }

  .about-container h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 50px;
    background-color: var(--accent-color);
  }

  .about-team {
    margin: var(--spacing-large) auto;
  }

  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjusted minmax */
    gap: var(--spacing-medium);
  }

  .team-member {
    background: var(--secondary-bg);
    padding: var(--spacing-medium);
    border-radius: var(--border-radius-base);
    box-shadow: 0 3px 6px var(--box-shadow-color);
    transition: box-shadow var(--transition-duration), transform var(--transition-duration);
    text-align: center;
  }

  .team-member:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(-5px);
  }

  .team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--spacing-small);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
{% raw %}

This style-main.css file overrides the style in the main style.css, and applies across all pages. Now let's talk about the need for style-main.css, experienced developers, may have understood, but for the not-so experienced developers out there;

The Problem: While style.css (in the root) provides the foundation, and the Chemistry-specific style.css handles unique elements, there's a need to modify some of the global styles specifically for the Chemistry section. Directly altering the root style.css would impact the entire website, which is undesirable.
The Solution: style-main.css is introduced to override certain global styles from the root style.css only on the Chemistry page. It also allows adding new styles that are more general than those in the Chemistry-specific style.css but still not applicable to the entire website.
Example:
- The root style.css might define a default button color.
- On the Chemistry page, you might want a different button color, or adjust the padding.
- style-main.css would contain the CSS rules to override the button's color and padding, but only for the Chemistry section.
Benefits:
- Modularity: Keeps style modifications organized and contained within the relevant subject folder.
- Maintainability: Easier to update or change styles for a specific section without affecting others.
- Specificity: Overrides are targeted and don't require complex CSS selectors to achieve the desired effect.
- Avoids Code Duplication: Common overrides or additions for a subject area can be placed in style-main.css instead of being repeated in multiple subject-specific stylesheets.

Hour 18: Specific Chemistry Page Styling

To avoid making the styles too complex, I decided to use another style-sheet file, specific-chemistry.css inside the \Chemistry folder. This will style the subject page, and keep the other files clutter-free.


css
.specific-chemistry-page{
    display: flex;
    max-width: 1200px;
     margin: 40px auto;
     padding: 0 20px;
}
.specific-chemistry-page .article-list {
    flex: 1;
    padding: 20px;
    background: #252525;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    margin: 0 10px;
}

.specific-chemistry-page .article-list h2 {
    margin-bottom: 15px;
}

.specific-chemistry-page .article-list ul {
    list-style: none;
    padding: 0;
}

.specific-chemistry-page .article-list ul li {
    margin-bottom: 10px;
}

.specific-chemistry-page .article-list ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #e0e0e0;
    background: #333;
    border-radius: 5px;
    transition: background 0.3s;
}

.specific-chemistry-page .article-list ul li a:hover {
    background: #444;
}
.specific-chemistry-page .content-area{
    flex: 3;
    padding: 20px;
    margin: 0 10px;
}
.specific-chemistry-page .content-area h1{
   text-align: center;
}
.topic-list-grid{
     background: #252525;
      margin-top: 20px;
        border-radius: 8px;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
     padding: 20px;
}
.topic-list-grid h2{
     text-align: center;
    margin-bottom: 15px;
}
.topic-list-grid ul {
    list-style: none;
    padding: 0;
}
.topic-list-grid ul li{
    margin-bottom: 10px;
}

.topic-list-grid ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #e0e0e0;
    background: #333;
    border-radius: 5px;
     transition: background 0.3s;
}

.topic-list-grid ul li a:hover {
  background: #444;
}


@media (max-width: 768px) {
    .specific-chemistry-page {
      flex-direction: column;
    }
      .specific-chemistry-page .article-list, .specific-chemistry-page .content-area {
      margin: 10px 0;
        padding: 10px;
    }
}

This provides styling to the three-column layout, which I used in the index.html inside the \Chemistry folder. It makes the page look much cleaner and more professional. I have also added some responsive design for small screens.
For those who want the live preview:
Chemistry

As this was a basic page, I did not feel the need to add a script.js
That's all for today. I may see you tomorrow. Till then see ya'

I Built the ULTIMATE Educational Website from Scratch — Day 1

Kavei Sahai — Wed, 08 Jan 2025 18:31:00 +0000

A week ago, one of my friends, Noah Kleij, reached out to me about building a website where he could share his knowledge of chemistry and other subjects for free. Noah holds a PhD in General and Organic Chemistry from the University of Manchester and wanted to serve as a positive example to the world. He decided to create and publish educational content on a website without any ads.

This was a fantastic opportunity for me, as I had always wanted to create an educational site but lacked the expertise to make it worthwhile. I loved his idea and immediately started working on it for free because I wanted to contribute meaningfully to the noble cause he had undertaken.

Initially, I considered using React as a framework but soon realized it might not be necessary since he only wanted a basic website. I started with a simple concept and a name, which I got from ChatGPT—Neuron IQ, a fitting choice.

For the framework, I decided to stick with basic HTML, CSS, and JavaScript. I built tools using these technologies, like a professional developer. While I could have used React, working with plain HTML, CSS, and JavaScript allowed me to understand how routers and other features are crafted from the ground up. Interestingly, I didn’t use Node.js either, keeping the project lightweight and straightforward.

What I appreciated the most was that he gave me a lot of creative freedom in designing the site's layout and style. I truly valued this opportunity. While I’m not a professional UI/UX designer, I’ve developed enough websites to understand the basics of design and typography, and yeah, I choose, Dark theme, because, I didn't want to give myself seizure.

That's a lot of backstory, let's get straight to content;

Hour 1:

Like any good project, we started with the basics. I fired up VS Code and, using the ! shortcut, quickly generated my basic HTML boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <script src="script.js" defer></script>
</head>
<body>

</body>
</html>

I have a custom-modified version of this boilerplate with style.css and script.js already included, saving me the effort of adding them manually.

I started by setting the title, which is crucial for SEO and how the site appears in browser tabs. The title I settled on, with help from ChatGPT, was: "Neuron IQ - High-Quality Educational Notes and Answers."

Next, I focused on the user experience, starting with the header. A clear and user-friendly navigation is key to a good website—or at least, that’s what I’ve been taught.

<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>

I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.

I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:

<section class="hero">
    <div class="hero-content">
        <h1>Unlock Your Potential with Neuron IQ</h1>
        <p>Your Source for High-Quality Educational Notes and Answers</p>
        <a href="#" class="btn">Explore Our Resources</a>
    </div>
</section>

The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.

And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com

Hour 2

Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:

<section class="categories">
    <h2>Explore Our Subjects</h2>
    <div class="categories-grid">
        <a href="#">
            <img src="icons/maths.png" alt="Mathematics Icon">
            <h3>Mathematics</h3>
        </a>
        <a href="#">
            <img src="icons/physics.png" alt="Physics Icon">
            <h3>Physics</h3>
        </a>
        <a href="/Chemistry/index.html">
            <img src="icons/chemistry.png" alt="Chemistry Icon">
            <h3>Chemistry</h3>
        </a>
        <a href="#">
            <img src="icons/biology.png" alt="Biology Icon">
            <h3>Biology</h3>
        </a>
        <a href="#">
            <img src="icons/programming.png" alt="Programming Icon">
            <h3>Computer Science</h3>
        </a>
        <a href="#">
            <img src="icons/history.png" alt="History Icon">
            <h3>History</h3>
        </a>
        <a href="#">
            <img src="icons/english.png" alt="English Icon">
            <h3>English Literature</h3>
        </a>
    </div>
</section>

I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging.

Initially, I considered a more playful design:

However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look.

And, spent about 45 minutes in this.

Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.

<section class="testimonials">
        <h2>What Students Are Saying</h2>
        <div class="testimonial-slider">
            <div class="testimonial-slide">
                <p>"Neuron IQ helped me ace my exams! The notes are so clear and easy to understand."</p>
                <p class="author">- Sarah J.</p>
            </div>
            <div class="testimonial-slide">
                <p>"I love how comprehensive and helpful the resources are. I can always find what I need!"</p>
                <p class="author">- Alex M.</p>
            </div>
               <div class="testimonial-slide">
                <p>"I have been using this since last year and have gotten better at studies!"</p>
                <p class="author">- Mike</p>
            </div>
        </div>
        <div class="slider-buttons">
            <button class="prev-btn">←</button>
            <button class="next-btn">→</button>
        </div>
    </section>

Hour 3

Now, with basics done, I want a thing to present over there, a section showing the most recent resources:

 <section class="latest">
        <h2>Latest Resources</h2>
        <div class="latest-grid">
            <div class="latest-card">
                <h3>Introduction to Calculus</h3>
                <p>A brief introduction to the fundamental concepts of Calculus.</p>
                <a href="#">Read More</a>
            </div>
             <div class="latest-card">
                <h3>Quantum Mechanics</h3>
                <p>Introductory quantum mechanics notes for those interested in the subject.</p>
                <a href="#">Read More</a>
            </div>
              <div class="latest-card">
                <h3>History of World War II</h3>
                <p>An exploration of events that led to World War II and its consequences.</p>
                <a href="#">Read More</a>
            </div>
        </div>
    </section>

Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.

After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:

<footer>
    <p>© 2025 Neuron IQ. All rights reserved.</p>
    <ul>
        <li><a href="about.html">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Terms of Use</a></li>
    </ul>
</footer>

The footer includes a few important links that I felt were essential for the site.

Three hours into the project, we completed the basic HTML structure of the page. The next steps are to style the page, add the script file, and populate it with content.

Hour 4: Setting Up the Basics

I started by setting up the fundamental styling for the page. I always begin with the body to establish the overall look and feel.

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #e0e0e0;
    background-color: #1a1a1a;
}

Here, I set the font to ‘Poppins,’ removed default margins and padding, adjusted the line-height for readability, set the text color to a light grey, and used a dark background. I chose the dark theme to make sure no one gets seizure and also because it looks cooler, especially on a website dedicated to learning and STEM.

Next, I moved on to styling the header. A good header can make or break the first impression.

header {
    background: #252525;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

I added a dark grey background, padding, a subtle shadow, and set its position to sticky, to ensure that the navbar is always visible at the top as the user scrolls. This provides a continuous navigation experience, like the navbar is following you.

Now, I styled the navigation bar itself:

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

This uses flexbox to align the logo to the left and the navigation links to the right. I also added max-width for responsiveness and centering, ensuring it doesn't stretch too much on large screens.

For the logo, I used a unique font color for brand recognition:

.logo {
    font-size: 1.8rem;
    font-weight: 600;
    color: #64b5f6;
}

And the navigation links:

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #e0e0e0;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #64b5f6;
}

The style is standard and clean, but I always aim for simplicity rather than using overly complex designs. I removed default list styling, used flexbox to display the links horizontally, added spacing between each link and a nice hover effect.

For consistent spacing throughout the site, I styled the section:

section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

This gives all sections the same max-width, margin, and text alignment.

Hour 5: Styling the Hero Section

Moving on to the hero section, I wanted a striking visual element to capture attention:

.hero {
    background: linear-gradient(135deg, #2c3e50, #1a237e);
    padding: 80px 20px;
    color: #e0e0e0;
}

I used a linear gradient for the background, which provides depth and a modern feel, and added padding for better spacing.

.hero-content {
    max-width: 700px;
    margin: 0 auto;
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Slight move down */
    transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content {
    opacity: 1;
    transform: translateY(0); /* Move to original postition */
}

.hero-content h1, .hero-content p{
    opacity:0;
    transform: translateY(-20px);
    transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content h1, .hero.loaded .hero-content p{
        opacity: 1;
        transform: translateY(0); /* Move to original postition */
}
 .hero-content .btn{
    opacity:0;
    transform: translateY(20px);
        transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content .btn{
    opacity: 1;
    transform: translateY(0); /* Move to original postition */
}

This styles the hero’s text content, ensuring it doesn't spread too much, centers it horizontally and gives a smooth transition effect when hero-section is loaded.

The heading and paragraph styles are simple and standard:

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 25px;
}

Finally, the button:

.btn {
    display: inline-block;
    background: #64b5f6;
    color: #252525;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.btn:hover {
    background: #42a5f5;
}

This makes the button visually appealing and interactive, with the background changing on hover.

Hour 6: Styling the Introduction, Categories and Testimonials

Now, I needed to style the intro section.

.intro-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    text-align: left;
}

.intro-grid div{
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.intro-grid div.fade-in {
    opacity: 1;
    transform: translateY(0);
}
.intro-grid div img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
    float:left;
}
.intro-grid div h3{
    margin-bottom: 0;
    padding-bottom: 0px;
}

This creates a responsive grid for the intro section using a grid to align them side-by-side, and provides subtle fade-in animation for each intro-card.

For the categories section:

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding-top: 20px;
}

.categories-grid a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #e0e0e0;
    background: #252525;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    transition: box-shadow 0.3s;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.categories-grid a:hover{
    box-shadow: 0 4px 8px rgba(255,255,255,0.2);
}
 .categories-grid a.fade-in {
    opacity: 1;
    transform: translateY(0);
 }

.categories-grid a img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

This creates another responsive grid, ensuring subjects are displayed in an organized way with a subtle fade-in animation. I used flexbox to align the images and text, added padding and spacing and hover effects.

And now for the testimonial section, a carousel.

.testimonials{
    background-color: #252525;
    padding: 40px 20px;
}
.testimonial-slider{
    display: flex;
    overflow: hidden;
    width: 80%;
    margin: 20px auto;

}
.testimonial-slide{
    min-width: 100%;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0.7;
    transform: scale(0.95);
}
.testimonial-slide.active{
    opacity: 1;
    transform: scale(1);
}

.testimonial-slide p:last-child{
    margin-top: 10px;
    font-weight: 500;
    text-align: right;
    font-style: italic;
}
.slider-buttons{
    text-align: center;
    margin-top: 10px;
}
.slider-buttons button{
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    margin: 0 10px;
    color: #ddd;
}

This is a standard css for the testimonial carousel, with transition and scale effects for visual appeal.

Hour 7: Styling Latest Resources and CTA

I now style the latest resources section.

.latest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    text-align: left;
}

.latest-card {
    background: #252525;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    transition: box-shadow 0.3s;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.latest-card:hover {
    box-shadow: 0 4px 8px rgba(255,255,255,0.2);
}
.latest-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.latest-card h3 {
    margin-bottom: 10px;
}

.latest-card a {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #64b5f6;
    font-weight: 500;
    transition: color 0.3s;
}

.latest-card a:hover {
    color: #42a5f5;
}

Here, I implemented another responsive grid, styled the cards, added hover effects, and included a fade-in animation to bring these cards to life.

Now, for the call-to-action section, CTA:

.cta {
    background: #252525;
    color: #fff;
    padding: 60px 20px;
    margin-top: 40px;
}

.cta h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

This is a simple, distinct section for users to get more engaged with the site.

Hour 8: Finishing Touches

To complete the styling, I focused on the footer:

footer {
    background: #1a1a1a;
    color: #fff;
    padding: 20px;
    text-align: center;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    justify-content: center;
}

footer ul li {
    margin: 0 10px;
}

footer ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

footer ul li a:hover {
    color: #ccc;
}

This styles the footer, includes a list of links, and sets hover effects.

Next, I added responsive design using media queries:

@media (max-width: 768px){
    nav{
    flex-direction: column;
    text-align: center;
    }
    nav ul {
    flex-direction: column;
    margin-top: 10px;
    }
    nav ul li{
    margin: 5px 0;
    }
    .intro-grid{
    text-align: center;
    }
    .intro-grid div{
    padding: 20px 0;

    }
    .intro-grid div img{
    float: none;
        margin-right: 0px;
    }
}

This ensures the site looks good on smaller devices, adjusting navigation and grid layouts.

Hour 9: Subject and About Page Styling

Finally, I add the styling for subject and about pages, keeping them as minimal as possible, since the objective of this website is to promote the knowledge of Noah. So, the design is kept as minimal as possible.

.subject-hero{
   background: linear-gradient(135deg, #2c3e50, #1a237e);
    padding: 80px 20px;
    color: #e0e0e0;
}
.subject-hero-content{
   max-width: 700px;
    margin: 0 auto;
}

.subject-list{
    margin: 40px auto;
}
.subject-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.subject-grid a{
   display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #e0e0e0;
    background: #252525;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    transition: box-shadow 0.3s;
}
.subject-grid a img{
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}
.subject-grid a:hover{
    box-shadow: 0 4px 8px rgba(255,255,255,0.2);
}

/* About page */
.about-hero{
    background: linear-gradient(135deg, #2c3e50, #1a237e);
    padding: 80px 20px;
    color: #e0e0e0;
}
.about-hero-content{
    max-width: 700px;
    margin: 0 auto;
}
.about-container{
    margin: 40px auto;
    max-width: 800px;
    text-align: left;
}
.about-container h2{
    margin-bottom: 10px;
}
.about-team{
    margin: 40px auto;
}
.team-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.team-member{
    background: #252525;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    transition: box-shadow 0.3s;
    text-align: center;
}
.team-member:hover{
    box-shadow: 0 4px 8px rgba(255,255,255,0.2);
}
.team-member img{
  width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

These styles follow the same theme, creating a consistent look across all pages, with minor changes to reflect specific page elements.

And that completes the styling for Neuron IQ, taking about six hours to get everything where I wanted it. Now, it’s time to dive into the final piece of the puzzle: the JavaScript.

Before moving to the JS let's see our website looks right now:

Or, if you want to see the live-preview, its over here: NeuronIQ

This part, I gotta be honest, tested my patience a bit. I mean, I knew it wouldn't be a cakewalk, but still…

Hour 10: Starting with Animations and Scroll Effects

I started off with the goal to make the website feel alive, not just a static page. I began by setting up the hero section animation:

document.addEventListener('DOMContentLoaded', function() {
    // Hero Section animation
   const hero = document.querySelector('.hero');
         hero.classList.add('loaded');

This is straightforward—once the DOM is fully loaded, I add a class that triggers the animation for the hero section and it animates smoothly, just as planned.

Next, I aimed to add animations when sections scroll into the viewport. For this, I used the IntersectionObserver API. This part was a little more challenging.

// Intro section animation on scroll
    function handleIntersection(entries, observer){
             entries.forEach(entry => {
                if(entry.isIntersecting){
                   entry.target.classList.add('fade-in');
                   observer.unobserve(entry.target);
                }
             });
           }
            const observer = new IntersectionObserver(handleIntersection, {
                 threshold: 0.2
               });
           const introDivs = document.querySelectorAll('.intro-grid div');
           introDivs.forEach(div=> {
             observer.observe(div)
           })

This code sets up an observer for the .intro-grid div elements. When they come into view, it adds the fade-in class, triggering the animation, and then removes observer since its not needed again.

I did the same thing for categories section:

   // Category Section animation on scroll
   function handleIntersectionCategories(entries, observer){
     entries.forEach(entry => {
        if(entry.isIntersecting){
           entry.target.classList.add('fade-in');
           observer.unobserve(entry.target);
        }
     });
   }
   const observerCategories = new IntersectionObserver(handleIntersectionCategories, {
     threshold: 0.2
   });
   const categoryLinks = document.querySelectorAll('.categories-grid a');
   categoryLinks.forEach((link, index)=> {
     link.style.transitionDelay = `${index * 0.1}s`;
     observerCategories.observe(link)
   })

I used the same structure for the categories section and added a delay, with a very basic delay. It still needed a lot of refinement.

Hour 11: The Testimonial Slider

I then moved on to implement a testimonial carousel:

 // Testimonials slider
   const slider = document.querySelector('.testimonial-slider');
   const slides = document.querySelectorAll('.testimonial-slide');
   const prevBtn = document.querySelector('.prev-btn');
   const nextBtn = document.querySelector('.next-btn');
   let currentIndex = 0;


  function updateSlider() {
         slides.forEach((slide, index)=>{
          slide.classList.remove('active')
            });
         slides[currentIndex].classList.add('active');
      slider.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

   let autoSlideInterval;

  function startAutoSlide(){
      autoSlideInterval = setInterval(()=>{
         currentIndex = (currentIndex + 1) % slides.length;
             updateSlider();
      }, 5000)
  }
   function stopAutoSlide(){
       clearInterval(autoSlideInterval)
  }

   prevBtn.addEventListener('click', () => {
        stopAutoSlide();
       currentIndex = (currentIndex - 1 + slides.length) % slides.length;
        updateSlider();
        startAutoSlide();
   });

   nextBtn.addEventListener('click', () => {
        stopAutoSlide();
       currentIndex = (currentIndex + 1) % slides.length;
       updateSlider();
        startAutoSlide();
   });
  startAutoSlide();

This is a fairly standard setup for a slider. I added functions to update the slider, control movement, and set up automatic sliding with a 5-second delay between slides.

Lastly, I implemented the scroll effect for the latest resources section.

// Latest resource animation on scroll
     function handleIntersectionLatest(entries, observer){
       entries.forEach(entry => {
          if(entry.isIntersecting){
             entry.target.classList.add('fade-in');
             observer.unobserve(entry.target);
          }
       });
     }
     const observerLatest = new IntersectionObserver(handleIntersectionLatest, {
       threshold: 0.2
     });
     const latestCards = document.querySelectorAll('.latest-card');
     latestCards.forEach(card=> {
       observerLatest.observe(card)
     })

});

I followed a similar structure as before, observing and adding fade-in class to these cards, and unobserving it.

Hour 12 & 13: Frustration and Debugging

Here's where things got hairy. After testing, I realized that the scroll animations were not working consistently. Sometimes, the animations would trigger way too early, sometimes, they wouldn't trigger at all, and sometimes, they would just flicker on the page. It was a mess.

I spent the next two hours diving into the code, trying different values for the threshold, and even trying different methods to trigger the animations. I was getting frustrated because no matter what I did, the sections kept animating randomly.

Initially, I thought the threshold wasn't set correctly, since it was too low, and the elements would be seen by the observer even when the user hasnt scrolled to it. So, I thought, 0.2 threshold seems appropriate for all elements. Well, apparently not; some elements needed some other number.

I tried logging every step, inspecting the browser's developer console, and even Googled every possible error message I encountered (and Stack Overflow became my best friend during this time). It turns out, I was setting up each observer on multiple elements with only one threshold, and for some elements, that wasn't working. That's why it would flicker, animate randomly, or not animate at all.

My approach was clearly wrong, and I had to adjust it. I ended up spending about 2 hours debugging this mess. Eventually, I re-wrote my observer to get the specific target threshold. After the changes, finally, the animations were working as expected.

I had to modify each handleIntersection function to receive the proper threshold, and that fixed it.

So after 3 hours of JavaScript coding, and 2 hours of debugging, I'm finally done with my coding for this day!

I made a Component Library !

Kavei Sahai — Sat, 19 Oct 2024 19:45:16 +0000

After years of wondering, what to do in my life, I finally have reached to a notable conclusion, that I want to build a React component library, but how?
The journey begins today itself with understanding what makes a component library invaluable to developers: it’s not just about functionality, but also about consistency, reusability, and elegance in design.

Step 0: What make me different?

There are many component libraries out there—Shadcn/UI, Material UI, Tailwind CSS—each bringing something valuable to the table. But what problem am I solving with my library? The answer lies in flexibility and instant feedback. Imagine the best features of CodePen.io—its ability to modify code and instantly see the results—combined with the consistency, reusability, and elegance in design of a professional-grade component library.

My library will not just offer a collection of components but a seamless playground where developers can see real-time changes while building, experimenting, and testing. It's about more than just drag-and-drop components—it's about empowering developers with a platform to test, tweak, and perfect their code in real-time, all while maintaining design coherence and code reusability.
That’s the essence that will set my library apart most-probably, I don't assume 99% of the people to turn around and be like, I want to build my website, using this new-library which is not even good, it is!, but you get the point.
I don’t expect this library to immediately become everyone's first choice. But I believe that for developers who value flexibility and speed without sacrificing design, this tool will stand out.

Step 1: Setting the Foundation

The first question is: what problem am I solving with this library? A great component library starts with purpose. It could cater to enhancing the user experience, simplifying design consistency across projects, or providing a smooth developer experience for building modular components. For my journey, I want my library to strike a balance between flexibility and simplicity—a go-to for both beginners and experienced developers.

Step 2: The Core Tech Stack

Since I’ve chosen CSS and JavaScript as the building blocks, React becomes the perfect ecosystem to integrate with. React’s component-driven architecture makes it incredibly suitable for creating reusable elements, each encapsulated with its logic and styling. CSS Modules or Styled Components are natural choices for handling the styling, ensuring that each component can be styled independently yet harmoniously within the larger system.

But why stop at React alone? By adding support for JavaScript utility functions alongside CSS styling, this library can not only dictate the look but also augment the behavior of components, adding features like smooth animations, user interactions, and responsive design mechanisms.

Step 3: Modular Design Philosophy

The next step is deciding how to organize the components. A component library should follow a modular design philosophy: each piece should function independently, yet fit together seamlessly. It’s crucial to structure the library in a way that allows developers to cherry-pick the components they need without bringing in unnecessary dependencies.

One of my goals will be to create components that are customizable, allowing users to extend the base styles and behaviors to meet their needs. This also means thinking about accessibility from day one—building components that are inclusive, adaptable to various devices, and keyboard-friendly.

Step 4: Emphasizing Documentation and Usability

A library’s strength is not just in its code but in how easily it can be understood and implemented. Proper documentation with clear examples will be pivotal. The process of documenting each component—explaining its properties, usage examples, and the logic behind it—will make the library developer-friendly. I want to ensure that both seasoned professionals and beginners feel at ease when integrating the library into their projects.

Building a CSS-JavaScript-based React component library is not just a technical feat, it’s a design challenge—a fusion of functionality, flexibility, and beauty. This project is not merely about solving a problem today but about creating a resource that helps others build with ease, bringing design to life with each line of code. Now that the vision is clear, it’s time to bring it to reality, one component at a time, for free uploaded at dev.to.

50 System Design Terms That Will Make You Sound Like a Pro

Kavei Sahai — Sat, 28 Sep 2024 16:10:47 +0000

1. Scalability

Definition: A system can support increased load by adding resources.
Example: Add more servers to handle the increase in web traffic.
For More information, click here

2. Load Balancer

Definition: Dividing the incoming network traffic among multiple servers so that no one server processes a large amount of load.
Example: Load balancing web traffic across multiple EC2 instances using the AWS Elastic Load Balancer(ELB) Service.
For More Information, click here

3. Microservices

Definition: It is an architectural pattern forcing the structuring of an application as a collection of loosely coupled services.
Example: Breaking down a monolithic application into independent services responsible for user management, processing payments, and sending notifications.

For More Information, click here

4. CAP Theorem

Definition: It states that at best, only two out of three guarantees can be gained in a distributed system: Consistency, Availability, and Partition Tolerance.
Example: When to Trade Off Consistency for Availability — And Vice Versa — in Distributed Database Design.
For More Information, click here

5. Sharding

Definition: It involves breaking down a large database into smaller pieces called shards for better management.
Example: Sharding a user database based on geographic region.

For More Information, click here

6. Latency

Definition: This gets defined as the time that it takes for data to travel from point A to point B.
Example: Measuring the delay involved in message delivery through a chat application.
For More Information, click here

7. Throughput

Definition: A measure of the quantity of data a system processes in some timeframe
Example: Requests processed by a web server in one second.

For More Information, click here

8. Cache

Definition: Any hardware or software component that stores data to obviate future requests for the same data, serving It quickly.
Example: Implementing Redis caching for repeated database queries.
For More Information, click here

9. Content Delivery Network (CDN)

Definition: A server system, geographically dispersed, that shows Web content to a user based on the geographical location from which he is accessing.
Example: Using Cloudflare CDN for faster web page loading.
For More Information, click here

10. REST API

Definition: a type of architectural style designed to build web services where data is accessed and manipulated using HTTP requests.
Example: Designing the Social Media API by REST(Representational State Transfer) principles.
For More Information, click here

11. GraphQL

Definition: It is a language designed to query data, so it is much more powerful, efficient, and flexible than REST.
Example: Using GraphQL to query user information in a single request.
For More Information, click here

12. ACID

Definition: A set of properties ensuring reliable processing of database transactions. The properties are Atomicity, Consistency, Isolation, and Durability.
Example: Ensuring that a banking transaction has ACID properties prevents corrupted data.
For More Information, click here

13. BASE

Definition: An alternative to ACID that emphasizes Availability and Partition tolerance over strict consistency. Available, Soft state, Eventually consistent system.
Example: Design of a highly available, eventually consistent NoSQL database.

For More Information, click here

14. NoSQL

Definition: A type of database designed to promote storage and retrieval of data modelled in ways other than the tabular relationships used in relational databases.
Example: Using MongoDB for a document-based data store.
For More Information, click here

15. SQL

Definition: It is the standard language for storing, manipulating, and retrieving data in relational databases.
Example: Writing SQL queries to get data back from a relational database.
For More Information, click here

16. Database Indexing

Definition: It is a data structure technique that allows quick searching and access to data from a database.
Example: Create indexing in the user ID column for search speed enhancement.

For More Information, click here

17. Replication

Definition: A process of copying and maintaining database objects in a multitude of databases that make up a distributed database system.
Example: It involves allowing a database to be highly available across different geographical locations using replication.

For More Information, click here

18. Failover

Definition: A backup operational mode in which system component functions are taken over by other system components in case of loss of a primary system component.
Example: Built-in automatic failovers to standby servers in the event of a server failure of your internet applications.

For More Information, click here

19. API Gateway

Definition: A server that sits at the front of an API, receiving API requests, applying throttling and security policies, and then forwarding them to back-end services.
Example: Using AWS API Gateway to manage APIs.
For More Information, click here

20. Service Mesh

Definition: A dedicated infrastructure layer for facilitating service-to-service communications between microservices.
Example: Integrating Istio as a service mesh for the management of microservice interactions.
For More Information, click here

21. Serverless Computing

Definition: A Cloud computing implementation that “dynamically allows for the allotment of machine resources by the cloud provider”.
Example: Run backend code without any server provisioning at your end using AWS Lambda.

For More Information, click here

22. Event-Driven Architecture

Definition: A software architecture paradigm encouraging the generation, detection, and consumption of, and the reaction to, events in general.
Example: Design a system with event communications between microservices using Apache Kafka.
For More Information, click here

23. Monolithic Architecture

Definition: A software architecture wherein all the elements are fitted into a single application and run as a single service.
Example: Old traditional enterprise applications built as a single, large unit.
For More Information, click here

24. Distributed Systems

Definition: A model wherein components located on networked computers communicate with each other and coordinate their actions by passing messages.
Example: Designing a distributed file system like Hadoop.
For More Information, click here

25. Message Queue

Definition: This method allows asynchronous, service-to-service communication in both serverless and microservices architectures.
Example: Using RabbitMQ to queue messages between services.

For More Information, click here

26. Pub/Sub Model

Definition: A messaging pattern in which senders (publishers) publish messages so abstractly that any one of them can end up being accessed by recipients without the sender having to even know the identity of the destination receivers (subscribers).
Example: A notification system that uses Google Cloud Pub/Sub.
For More Information, click here

27. Data Partitioning

Definition: Division of a database into smaller, manageable parts.
Example: Partitioning a table in a database by date to allow super-fast query execution.
For More Information, click here

28. Horizontal Scaling

Definition: Increasing the capacity by adding more machines or nodes within a system.
Example: Adding more web servers to handle an increasing volume of user traffic.
For More Information, click here

29. Vertical Scaling

Definition: Upgrading an already existing machine with more power in the form of a CPU or RAM.
Example: Upgrading the RAM of a server so that it can handle more requests all at once.
For More Information, click here

30. Rate Limiting

Definition: It means controlling the rate of traffic that the network interface controller is sending or receiving.
Example: Throttling an API to prevent abusive behavior.
For More Information, click here

31. Circuit Breaker Pattern

Definition: A design pattern used in modern software development, applied to detect failures and encapsulate the logic of preventing a failure from constantly recurring.
Example: Handling failed remote service calls using a circuit breaker in a microservice architecture.

32. Data Consistency

Definition: Ensuring that data is the same across multiple instances and is not corrupted.
Example: Maintaining the consistency of user data through multiple replicas of a database.

For More Information, click here

33. Eventual Consistency

Definition: A model of consistency used in distributed computing toward the goal of high availability, stating that updates to a system will eventually propagate and be reflected by all nodes.
Example: Amazon DynamoDB provides an eventually consistent model for the read operation.
For More Information, click here

34. Strong Consistency

Definition: A consistency model ensuring every read gets the most recent write on a given unit of data.
Example: Using strong consistency in a financial transaction system.
For More Information, click here

35. Containerization

Definition: Basically, this is whenever an application and its dependencies are encapsulated into a container to be run on any computational environment.
Example: Using Docker to containerize the applications for deployment in various environments such as dev, test, prod etc.
For More Information, click here

36. Kubernetes

Definition: An open-source platform that automates the process of application container deployment, scaling, and operation.
Example: Run and deploy containerized applications using Kubernetes.
For More Information, click here

37. Autoscaling

Definition: Automatically adjusting the number of computational resources based on the user load.
Example: Utilizing AWS EC2 Auto Scaling feature to dynamically adjust the number of instances.

For More Information, click here

38. Multi-Tenancy

Definition: Architecture where a single instance of a software application serves multiple consumers/customers.
Example: SaaS applications, such as Salesforce, utilize multi-tenancy in their service provision toward their different categories of customers.
For More Information, click here

39. Load Shedding

Definition: Backing off some demands or degrading services to maintain the health of the overall system under high load.
Example: This will turn off all non-essential services during times of peak traffic.

For More Information, click here

40. Idempotence

Definition: A property for some mathematical and computer-science operations stating that it has the same effect if repeated more times than once.
Example: An HTTP DELETE request is idempotent.
For More Information, click here

41. Quorum

Definition: The minimum number of votes needed to commit a distributed transaction.
Example: Basically, quorum-based replication ensures that consistency exists in the distributed database.
For More Information, click here

42. Orchestration

Definition: A pattern of service interaction where a central coordinator controls the interaction between services.
Example: Using a workflow engine to manage some multi-step business process.

43. Choreography

Definition: A service interaction pattern in which every service is self-contained and interacts with others through events; there will not be any coordinator or orchestrator.
Example: Microservices communicating through an event bus in a choreography pattern.
For More Information, click here

44. Service Registry

Definition: A database that keeps track of instances of microservices.
Example: Using the Eureka service registry in a microservice architecture.

45. API Rate Limiting

Definition: It means controlling how many requests a client can make against an API within a certain timeframe.
Example: Limiting requests to an API to 100 per minute to prevent abuse.

46. Data Warehouse

Definition: A system that helps in the generation of reports and business data analytics; the hub of Business Intelligence.
Example: Amazon Redshift can be implemented in data warehousing.

47. Data Lake

Definition: A system or repository where data is kept in native/raw format, generally as object blobs or files.
Example: Petabyte scaling for storing and managing structured and unstructured data in a data lake.
For More Information, click here

48. OLAP

Definition: Online Analytical Processing : The software category that allows the analysis of data kept in a database.
Example: Use of the OLAP cubes for pointy analytical and arbitrary queries.

49. OLTP

Definition: Online Transaction Processing: a class of systems that manage transaction-oriented applications.
Example: Using OLTP systems for transaction data management, as in banking systems, etc.
For More Information, click here

50. Big Data

Definition: Large, complex data sets that cannot be efficiently managed by conventional data-processing software in the best of cases.
Example: Analyzing social media interactions to predict fashion trends.
For More Information, click here

Thanks for reading! Please share this guide with others if you, in any way, found it useful. This is an improved and more formatted version of the original posted here

How to Work with Multidimensional Arrays in JavaScript

Kavei Sahai — Wed, 18 Sep 2024 18:05:44 +0000

JavaScript doesn't natively provide multidimensional arrays. However, you can create one using a one-dimensional array. Essentially, a multidimensional array in JavaScript is an array within another array. To make an array behave like a multidimensional array, you can place arrays inside a parent array, effectively mimicking a multidimensional structure. Defining a multidimensional array is almost identical to defining a one-dimensional array.

One-Dimensional Array:

let arr = [];  // Empty 1D array
let arr1 = ["A", "B", "C", "D"]; // 1D array of alphabets
let arr2 = [1, 2, 3, 4, 5]; // 1D array of numbers

Multidimensional Array

Method 1: Using predefined 1D arrays

First, define some 1D arrays:

let arr1 = ["ABC", 24, 18000];
let arr2 = ["EFG", 30, 30000];
let arr3 = ["IJK", 28, 41000];
let arr4 = ["EFG", 31, 28000];
let arr5 = ["EFG", 29, 35000];

// Combine them into a multidimensional array
let salary = [arr1, arr2, arr3, arr4, arr5];

Here, arr1, arr2, ..., arr5 are 1D arrays inside the salary array.

Method 2: Defining directly

let salary = [
    ["ABC", 24, 18000],
    ["EFG", 30, 30000],
    ["IJK", 28, 41000],
    ["EFG", 31, 28000],
];

This is known as array literals notation.

Accessing Elements

To access elements, use index-based notation:

salary[0][2]; // Accesses the salary (18000) of "ABC"
salary[3][2]; // Accesses the salary (28000) of "EFG"

Iterating Through a Multidimensional Array

for (let i = 0; i < salary.length; i++) {
    for (let j = 0; j < salary[i].length; j++) {
        document.write(salary[i][j]);
    }
}

Adding Elements

You can add elements in two ways—either to the inner array or the outer array.

1. Adding to the Inner Array

Using square bracket notation:

salary[3][3] = "India";
document.write(salary[3]); 
// Output: ["EFG", 31, 28000, "India"]

Using push() method:

salary[3].push("India", "Mumbai");
document.write(salary[3]);
// Output: ["EFG", 31, 28000, "India", "Mumbai"]

2. Adding to the Outer Array

salary.push(["MNO", 29, 33300]);

Removing Elements

You can remove elements from both the inner and outer arrays.

1. Removing from the Inner Array

salary[3].pop(); // Removes the last element (28000) from the 4th sub-array

2. Removing from the Outer Array

salary.pop(); // Removes the last sub-array (["EFG", 31, 28000])

Examples

Example 1: Printing a Multidimensional Array

let salary = [
    ["ABC", 24, 18000],
    ["EFG", 30, 30000],
    ["IJK", 28, 41000],
    ["EFG", 31, 28000]
];
for (let i = 0; i < salary.length; i++) {
    console.log(salary[i]);
}

Output:

[ 'ABC', 24, 18000 ]
[ 'EFG', 30, 30000 ]
[ 'IJK', 28, 41000 ]
[ 'EFG', 31, 28000 ]

Example 2: Accessing Specific Values

let salary = [
    ["ABC", 24, 18000],
    ["EFG", 30, 30000],
    ["IJK", 28, 41000],
    ["EFG", 31, 28000]
];
console.log("Salary of 2nd person: " + salary[1][2]);
console.log("Salary of 4th person: " + salary[3][2]);

Output:

Salary of 2nd person: 30000
Salary of 4th person: 28000

Example 3: Adding Elements to an Array

let salary = [
    ["ABC", 24, 18000],
    ["EFG", 30, 30000],
    ["IJK", 28, 41000],
    ["EFG", 31, 28000]
];

// Add "India" to the 4th sub-array
salary[3][3] = "India";

console.log(salary);

// Add "USA" and "Canada" to the 3rd sub-array
salary[2].push("USA", "Canada");

console.log(salary);

Output:

[ 'ABC', 24, 18000 ]
[ 'EFG', 30, 30000 ]
[ 'IJK', 28, 41000, 'USA', 'Canada' ]
[ 'EFG', 31, 28000, 'India' ]

Example 4: Removing Elements

let salary = [
    ["ABC", 24, 18000],
    ["EFG", 30, 30000],
    ["IJK", 28, 41000],
    ["EFG", 31, 28000]
];

// Remove last element from the 4th sub-array
salary[3].pop();

// Remove the last sub-array
salary.pop();

console.log(salary);

Output:

[ 'ABC', 24, 18000 ]
[ 'EFG', 30, 30000 ]
[ 'IJK', 28, 41000 ]

Example 5: Adding a New Inner Array

let salary = [
    ["ABC", 24, 18000],
    ["EFG", 30, 30000],
    ["IJK", 28, 41000],
    ["EFG", 31, 28000]
];

// Print original array
console.log("Original array:");
for (let i = 0; i < salary.length; i++) {
    console.log(salary[i]);
}

// Add a new inner array
salary.push(["MNO", 29, 33300]);

console.log("After adding a new inner array:");
for (let i = 0; i < salary.length; i++) {
    console.log(salary[i]);
}

Output:

Original array:
[ 'ABC', 24, 18000 ]
[ 'EFG', 30, 30000 ]
[ 'IJK', 28, 41000 ]
[ 'EFG', 31, 28000 ]
After adding a new inner array:
[ 'ABC', 24, 18000 ]
[ 'EFG', 30, 30000 ]
[ 'IJK', 28, 41000 ]
[ 'EFG', 31, 28000 ]
[ 'MNO', 29, 33300 ]

Example 6: Removing a Single Element and an Entire Sub-array

let salary = [
    ["ABC", 24, 18000],
    ["EFG", 30, 30000],
    ["IJK", 28, 41000],
    ["EFG", 31, 28000]
];

// Print original array
console.log("Original array:");
for (let i = 0; i < salary.length; i++) {
    console.log(salary[i]);
}

// Remove the last element of the last inner array
salary[3].pop();

console.log("After removing the last element of the last inner array:");
for (let i = 0; i < salary.length; i++) {
    console.log(salary[i]);
}

// Remove the last inner array
salary.pop();

console.log("After removing the last inner array:");
for (let i = 0; i < salary.length; i++) {
    console.log(salary[i]);
}

Output:

Original array:
[ 'ABC', 24, 18000 ]
[ 'EFG', 30, 30000 ]
[ 'IJK', 28, 41000 ]
[ 'EFG', 31, 28000 ]
After removing the last element of the last inner array:
[ 'ABC', 24, 18000 ]
[ 'EFG', 30, 30000 ]
[ 'IJK', 28, 41000 ]
[ 'EFG', 31 ]
After removing the last inner array:
[ 'ABC', 24, 18000 ]
[ 'EFG', 30, 30000 ]
[ 'IJK', 28, 41000 ]

Summary (Generated Using AI)

Creating Multidimensional Arrays:
- Method 1: Define individual 1D arrays and combine them.
- Method 2: Directly use array literals.
Accessing Elements:
- Use index-based notation to access specific elements.
Iterating:
- Use nested loops to iterate through multidimensional arrays.
Adding Elements:
- Add elements to inner arrays using direct indexing or push().
- Add new inner arrays using push().
Removing Elements:
- Remove elements from inner arrays using pop().
- Remove entire inner arrays using pop().

These operations allow you to manipulate multidimensional arrays effectively in JavaScript.

Best Tools for Visualizing JavaScript Multidimensional Arrays

When working with multidimensional arrays in JavaScript, visualizing their structure can be highly beneficial for debugging and understanding the data. Here are some tools and techniques that can help you visualize JavaScript multidimensional arrays:

1. Browser Developer Tools

Console Logging

Usage: Directly log arrays to the browser console using console.log().
Example:

  let salary = [
      ["ABC", 24, 18000],
      ["EFG", 30, 30000],
      ["IJK", 28, 41000],
      ["EFG", 31, 28000]
  ];
  console.log(salary);

Benefits: Allows you to view array structures in a collapsible format.

Console.table()

Usage: Displays array data in a tabular format in the console.
Example:

  console.table(salary);

Benefits: Provides a clear, structured view of arrays with easy-to-read rows and columns.

2. Online Visualization Tools

JSON Viewer

Usage: Visualize multidimensional arrays in a structured format by pasting them into online JSON viewers.
Tools: JSONViewer, JSONLint
Benefits: Offers hierarchical visualization and formatting of JSON data.

DataTables

Usage: Use DataTables library to turn arrays into interactive tables with sorting, filtering, and searching capabilities.
Tools: DataTables
Example:

  <table id="example" class="display">
      <thead>
          <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Salary</th>
          </tr>
      </thead>
      <tbody>
          <!-- Populate rows with JavaScript -->
      </tbody>
  </table>
  <script>
      $(document).ready(function() {
          $('#example').DataTable({
              data: salary,
              columns: [
                  { title: "Name" },
                  { title: "Age" },
                  { title: "Salary" }
              ]
          });
      });
  </script>

Benefits: Provides an interactive and user-friendly way to view and manipulate array data.

3. Visualization Libraries

D3.js

Usage: Create custom visualizations of multidimensional data with charts, graphs, and interactive elements.
Tools: D3.js
Example:

  const data = [
      { name: "ABC", age: 24, salary: 18000 },
      { name: "EFG", age: 30, salary: 30000 },
      { name: "IJK", age: 28, salary: 41000 },
      { name: "EFG", age: 31, salary: 28000 }
  ];
  // Use D3.js to create visualizations such as bar charts or tables

Chart.js

Usage: Visualize data with charts and graphs to represent multidimensional arrays graphically.
Tools: Chart.js
Example:

  <canvas id="myChart"></canvas>
  <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ['ABC', 'EFG', 'IJK', 'EFG'],
              datasets: [{
                  label: 'Salary',
                  data: [18000, 30000, 41000, 28000],
                  backgroundColor: 'rgba(75, 192, 192, 0.2)',
                  borderColor: 'rgba(75, 192, 192, 1)',
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  y: {
                      beginAtZero: true
                  }
              }
          }
      });
  </script>

Benefits: Provides various chart types to represent multidimensional data visually.

4. Integrated Development Environments (IDEs)

Visual Studio Code Extensions

Usage: Use extensions like JSON Viewer or Code Outline to visualize and navigate multidimensional arrays.
Tools: JSON Viewer, Code Outline
Benefits: Integrates directly into your development environment for quick visualization and debugging.

Summary (Generated by AI)

Browser Developer Tools: Use console.log() and console.table() for quick inspection.
Online Visualization Tools: Use JSON viewers and interactive tables for structured views.
Visualization Libraries: Use libraries like D3.js and Chart.js for custom and graphical representations.
IDEs: Leverage extensions in IDEs like Visual Studio Code for enhanced visualization and navigation.

These tools can significantly aid in understanding and debugging multidimensional arrays in JavaScript by providing clear and interactive visualizations.

Best Practices for Working with Nested Arrays in JavaScript

When working with nested arrays in JavaScript, it's crucial to follow best practices to ensure your code is clean, efficient, and maintainable. Here are some best practices for handling nested arrays:

1. Understand the Structure

Define Array Structure Clearly: Be explicit about the structure of nested arrays to avoid confusion. Document what each level of nesting represents.

Example:

// Array of employee records, each containing personal info and job details
const employees = [
    ["John Doe", 30, ["Engineer", "Frontend"]],
    ["Jane Smith", 28, ["Designer", "UX/UI"]],
    ["Emily Davis", 35, ["Manager", "Sales"]]
];

2. Use Descriptive Variable Names

Choose Meaningful Names: Name variables and arrays descriptively to make the code more readable.

Example:

const companyEmployees = [
    ["John Doe", 30, ["Engineer", "Frontend"]],
    ["Jane Smith", 28, ["Designer", "UX/UI"]]
];

3. Accessing Elements Safely

Check for Undefined Values: Before accessing nested array elements, ensure that each level exists to prevent runtime errors.

Example:

const getEmployeeRole = (index) => {
    if (companyEmployees[index] && companyEmployees[index][2]) {
        return companyEmployees[index][2][0]; // Returns the role
    }
    return 'Role not found';
};

4. Use Array Methods

Leverage Built-in Methods: Use JavaScript array methods like map(), filter(), and reduce() to work with nested arrays more effectively.

Example:

// Extract all roles from the nested array
const roles = companyEmployees.map(employee => employee[2][0]);
console.log(roles); // ["Engineer", "Designer"]

5. Avoid Deep Nesting

Flatten Arrays When Possible: Deeply nested arrays can be hard to manage. Consider flattening the array or using objects to represent hierarchical data.

Example:

const employees = [
    { name: "John Doe", age: 30, role: "Engineer", department: "Frontend" },
    { name: "Jane Smith", age: 28, role: "Designer", department: "UX/UI" }
];

6. Use Functions for Nested Operations

Encapsulate Logic in Functions: Create functions to handle operations on nested arrays to make the code reusable and easier to maintain.

Example:

const getEmployeeInfo = (index) => {
    const employee = companyEmployees[index];
    if (employee) {
        return {
            name: employee[0],
            age: employee[1],
            role: employee[2][0],
            department: employee[2][1]
        };
    }
    return null;
};

7. Validate Input Data

Ensure Data Integrity: Validate the input data before processing it to ensure it matches the expected structure.

Example:

const isValidEmployee = (employee) => {
    return Array.isArray(employee) &&
           employee.length === 3 &&
           typeof employee[0] === 'string' &&
           typeof employee[1] === 'number' &&
           Array.isArray(employee[2]);
};

8. Document Your Code

Add Comments: Document the purpose and structure of nested arrays in your code to make it easier for others (and yourself) to understand.

Example:

// Array structure: [Name, Age, [Role, Department]]
const companyEmployees = [
    ["John Doe", 30, ["Engineer", "Frontend"]],
    ["Jane Smith", 28, ["Designer", "UX/UI"]]
];

9. Optimize Performance

Consider Complexity: Be mindful of the performance implications when working with large or deeply nested arrays. Optimize your algorithms to handle data efficiently.
- Example:
```
// Efficiently iterate through large nested arrays
companyEmployees.forEach(employee => {
    console.log(`Name: ${employee[0]}, Role: ${employee[2][0]}`);
});
```

10. Handle Edge Cases

Manage Special Cases: Account for edge cases, such as empty arrays or missing elements, to ensure robust code.

Example:

const getEmployeeRoleSafely = (index) => {
    return companyEmployees[index]?.[2]?.[0] || 'Role not available';
};

Summary (Generated by AI)

Understand the Structure: Define and document the nested array structure clearly.
Use Descriptive Names: Name arrays and variables meaningfully.
Access Safely: Check for undefined values when accessing nested elements.
Utilize Array Methods: Use methods like map(), filter(), and reduce() for efficient processing.
Avoid Deep Nesting: Flatten arrays or use objects when possible.
Encapsulate Logic: Use functions to handle operations on nested arrays.
Validate Data: Ensure input data matches the expected structure.
Document Your Code: Add comments and documentation for clarity.
Optimize Performance: Be aware of performance implications and optimize algorithms.
Handle Edge Cases: Manage special cases and ensure robustness.

Following these best practices will help you manage nested arrays effectively and write more maintainable and readable code in JavaScript.

Best JavaScript Libraries for Handling Multidimensional Arrays

When dealing with multidimensional arrays in JavaScript, several libraries can help you manage, manipulate, and visualize data effectively. Here are some of the best JavaScript libraries for handling multidimensional arrays:

1. Lodash

Overview: Lodash is a powerful utility library that provides a wide range of functions for manipulating arrays and objects, including multidimensional arrays.
Features:
- Deep cloning and merging.
- Iteration and transformation methods.
- Utility functions for checking and manipulating data.
Example:

  const _ = require('lodash');
  let nestedArray = [[1, 2], [3, 4], [5, 6]];

  // Flatten the nested array
  let flattened = _.flatten(nestedArray);
  console.log(flattened); // [1, 2, 3, 4, 5, 6]

Website: Lodash

2. Underscore.js

Overview: Underscore.js is a utility-belt library for JavaScript that provides functional programming helpers, including support for multidimensional arrays.
Features:
- Utility functions for manipulating and querying arrays.
- Support for deep operations and transformations.
Example:

  const _ = require('underscore');
  let matrix = [[1, 2], [3, 4], [5, 6]];

  // Transpose a 2D matrix
  let transposed = _.zip.apply(_, matrix);
  console.log(transposed); // [[1, 3, 5], [2, 4, 6]]

Website: Underscore.js

3. Danfo.js

Overview: Danfo.js is a library for manipulating and analyzing data in JavaScript, similar to Pandas in Python. It is designed for handling multidimensional data structures like DataFrames and Series.
Features:
- Powerful data manipulation and analysis capabilities.
- Supports operations on DataFrames, which are essentially multidimensional arrays.
Example:

  const dfd = require("danfojs-node");
  let df = new dfd.DataFrame({
      A: [1, 2, 3],
      B: [4, 5, 6]
  });

  // Display DataFrame
  df.print();

Website: Danfo.js

4. Math.js

Overview: Math.js is a comprehensive math library for JavaScript and Node.js, providing extensive support for mathematical operations, including those on multidimensional arrays.
Features:
- Matrix operations and algebra.
- Arithmetic, statistical, and functional operations.
Example:

  const math = require('mathjs');
  let matrix = math.matrix([[1, 2], [3, 4]]);

  // Matrix transpose
  let transpose = math.transpose(matrix);
  console.log(transpose.valueOf()); // [[1, 3], [2, 4]]

Website: Math.js

5. Array.prototype.flat() and Array.prototype.flatMap()

Overview: These are native JavaScript methods for flattening arrays, introduced in ECMAScript 2019. They can be particularly useful for working with nested arrays.
Features:
- flat(): Flattens nested arrays up to a specified depth.
- flatMap(): Maps each element using a mapping function and then flattens the result.
Example:

  let nestedArray = [[1, 2], [3, 4], [5, 6]];

  // Flatten the array
  let flat = nestedArray.flat();
  console.log(flat); // [1, 2, 3, 4, 5, 6]

Documentation: MDN Web Docs: Array.prototype.flat()

6. Three.js

Overview: Three.js is a 3D library that can be used for visualizing multidimensional arrays as 3D objects and scenes.
Features:
- Create and render 3D graphics.
- Useful for visualizing multidimensional data in a 3D context.
Example:

  import * as THREE from 'three';

  // Create a 3D scene
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // Create a 3D cube
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);

  scene.add(cube);
  camera.position.z = 5;

  function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
  }

  animate();

Website: Three.js

7. Recharts

Overview: Recharts is a composable charting library built on React components, which can be used to visualize multidimensional data in charts.
Features:
- Easy to integrate with React applications.
- Supports various chart types like line charts, bar charts, and scatter plots.
Example:

  import React from 'react';
  import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

  const data = [
    { name: 'Jan', uv: 4000, pv: 2400, amt: 2400 },
    { name: 'Feb', uv: 3000, pv: 1398, amt: 2210 },
    { name: 'Mar', uv: 2000, pv: 9800, amt: 2290 },
  ];

  function App() {
    return (
      <LineChart width={600} height={300} data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
      </LineChart>
    );
  }

  export default App;

Website: Recharts

Summary (Generated by AI)

Lodash: Versatile utility library for manipulating and querying arrays.
Underscore.js: Utility-belt library with support for multidimensional arrays.
Danfo.js: Data manipulation and analysis library similar to Pandas.
Math.js: Comprehensive math library with matrix operations.
Native Array Methods: flat() and flatMap() for flattening arrays.
Three.js: 3D library for visualizing multidimensional data.
Recharts: Charting library for visualizing data in React applications.

These libraries and tools can help you manage, analyze, and visualize multidimensional arrays more effectively in JavaScript.

Best Debugging Techniques for JavaScript Multidimensional Arrays

Debugging multidimensional arrays in JavaScript can be challenging due to their complex structure. Here are some of the best debugging techniques to help you effectively troubleshoot issues with multidimensional arrays:

1. Use `console.log()` Strategically

Overview: Utilize console.log() to print out the structure and content of your multidimensional arrays at various stages of your code.
Tips:
- Log the entire array or specific elements to inspect their values.
- Use console.log(JSON.stringify(array, null, 2)) for a more readable, formatted output.

  let array = [[1, 2], [3, 4], [5, 6]];
  console.log(array); // Log entire array
  console.log(array[1]); // Log specific sub-array
  console.log(array[1][0]); // Log specific element

2. Inspect with Browser DevTools

Overview: Use browser developer tools to inspect and debug multidimensional arrays interactively.
Tips:
- Set breakpoints in your code to pause execution and inspect variables.
- Use the Console panel to evaluate expressions and view array contents.
- Utilize the Sources panel to step through code and observe changes to arrays.

3. Use Debugger Statements

Overview: Insert debugger statements in your code to trigger the debugger and pause execution at specific points.
Tips:
- Place debugger; before the line where you want to start debugging.
- This allows you to inspect the state of multidimensional arrays when execution pauses.

  let array = [[1, 2], [3, 4], [5, 6]];
  debugger; // Execution will pause here
  console.log(array[1][1]);

4. Employ Array Methods for Debugging

Overview: Use built-in array methods to simplify the inspection and manipulation of multidimensional arrays.
Tips:
- Use forEach() or map() to iterate over arrays and log elements.
- Apply flat() to flatten nested arrays for easier inspection.

  let array = [[1, 2], [3, 4], [5, 6]];
  array.forEach(subArray => console.log(subArray));

5. Validate Array Structure

Overview: Check the integrity of your multidimensional array to ensure it matches the expected structure.
Tips:
- Verify that each level of nesting exists and contains the correct data types.
- Use conditionals or validation functions to check array length and structure.

  const isValidArray = (arr) => {
    return Array.isArray(arr) && arr.every(subArr => Array.isArray(subArr));
  };
  console.log(isValidArray(array)); // Should be true if structure is valid

6. Write Unit Tests

Overview: Develop unit tests to verify the behavior and integrity of functions that work with multidimensional arrays.
Tips:
- Use testing frameworks like Jest or Mocha to write tests.
- Test edge cases and ensure functions handle arrays as expected.

  test('flatten nested arrays', () => {
    const array = [[1, 2], [3, 4], [5, 6]];
    expect(array.flat()).toEqual([1, 2, 3, 4, 5, 6]);
  });

7. Break Down Complex Operations

Overview: Simplify complex operations on multidimensional arrays by breaking them into smaller, manageable steps.
Tips:
- Refactor code to handle smaller pieces of the array.
- Test each step independently to ensure correctness.

  // Example: Sum of all elements in a 2D array
  let array = [[1, 2], [3, 4], [5, 6]];
  let sum = 0;
  array.forEach(subArray => {
    subArray.forEach(value => {
      sum += value;
    });
  });
  console.log(sum); // 21

8. Visualize Data

Overview: Use visualization tools to better understand the structure and content of multidimensional arrays.
Tips:
- Convert arrays to tables or charts for a clearer view of data.
- Libraries like DataTables or charting libraries can help visualize array data.

  // Using DataTables to visualize a 2D array
  $(document).ready(function() {
    $('#example').DataTable({
      data: array,
      columns: [
        { title: "Column 1" },
        { title: "Column 2" }
      ]
    });
  });

9. Debug with Custom Functions

Overview: Create custom functions to assist with debugging by logging and validating array data.
Tips:
- Write utility functions to check array contents or calculate summaries.
- Use these functions to gain insights into your data.

  const printArray = (arr) => {
    arr.forEach((subArr, index) => {
      console.log(`Sub-array ${index}: ${subArr}`);
    });
  };

  printArray(array);

10. Consult Documentation and Community

Overview: Refer to documentation and seek help from the developer community for issues related to multidimensional arrays.
Tips:
- Consult JavaScript documentation for array methods and debugging techniques.
- Participate in forums or Stack Overflow to ask questions and find solutions.

Summary(Generated by AI)

Use console.log(): Print array structure and elements for inspection.
Inspect with Browser DevTools: Utilize interactive debugging tools in your browser.
Use debugger Statements: Pause execution and inspect array state.
Employ Array Methods: Use methods like forEach() and flat() for easier manipulation.
Validate Array Structure: Ensure arrays match expected formats and data types.
Write Unit Tests: Verify array operations and functions through tests.
Break Down Complex Operations: Simplify and test complex array manipulations.
Visualize Data: Use tools to convert arrays into readable formats.
Debug with Custom Functions: Create functions to log and validate array data.
Consult Documentation and Community: Use available resources and seek help when needed.

By employing these techniques, you can more effectively debug issues related to multidimensional arrays in JavaScript and ensure your code behaves as expected.

Accessing data in nested JavaScript arrays can be intricate due to their hierarchical structure. Here are some of the best methods and techniques for accessing and manipulating data in nested arrays:

1. Index Notation

Overview: Use index notation to access specific elements in nested arrays.
How-To:
- Access elements in nested arrays using multiple indices.
- Example: array[i][j][k] where i, j, and k are indices at different levels.

  let nestedArray = [
    [1, 2, [3, 4]],
    [5, 6, [7, 8]]
  ];
  console.log(nestedArray[1][2][0]); // Output: 7

2. Array Destructuring

Overview: Use array destructuring to extract values from nested arrays into variables.
How-To:
- Apply destructuring assignment to retrieve values from nested arrays.

  let nestedArray = [
    [1, 2, [3, 4]],
    [5, 6, [7, 8]]
  ];
  let [[, , [value1]], [, , [value2]]] = nestedArray;
  console.log(value1); // Output: 3
  console.log(value2); // Output: 7

3. Using `flat()` Method

Overview: Flatten nested arrays to simplify access to data.
How-To:
- Use flat() to reduce the nesting level of arrays.

  let nestedArray = [[1, 2], [3, 4, [5, 6]]];
  let flatArray = nestedArray.flat(2); // Flatten to level 2
  console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

4. Recursive Function

Overview: Implement recursive functions to access deeply nested data.
How-To:
- Create a function that calls itself to traverse arrays of arbitrary depth.

  function findValue(arr, target) {
    for (let item of arr) {
      if (Array.isArray(item)) {
        let result = findValue(item, target);
        if (result !== undefined) return result;
      } else if (item === target) {
        return item;
      }
    }
  }

  let nestedArray = [1, [2, [3, [4]]]];
  console.log(findValue(nestedArray, 3)); // Output: 3

5. Using `map()` and `forEach()`

Overview: Utilize array methods like map() and forEach() to iterate through and access nested array elements.
How-To:
- Use map() to transform and access nested data.
- Use forEach() to perform actions on each element.

  let nestedArray = [[1, 2], [3, 4], [5, 6]];

  // Using map() to double each number
  let doubled = nestedArray.map(subArray => subArray.map(num => num * 2));
  console.log(doubled); // Output: [[2, 4], [6, 8], [10, 12]]

  // Using forEach() to log each element
  nestedArray.forEach(subArray => {
    subArray.forEach(num => console.log(num));
  });

6. Using `reduce()` for Flattening

Overview: Apply reduce() to flatten nested arrays or aggregate data.
How-To:
- Use reduce() to recursively flatten arrays or perform operations on nested data.

  let nestedArray = [[1, 2], [3, 4, [5, 6]]];

  // Flatten array using reduce()
  let flatArray = nestedArray.reduce((acc, val) => acc.concat(Array.isArray(val) ? val.reduce((a, v) => a.concat(Array.isArray(v) ? v : [v]), []) : val), []);
  console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

7. Array Access Using `find()`

Overview: Use find() to locate and access elements in nested arrays based on a condition.
How-To:
- Apply find() to locate the first matching element in nested arrays.

  let nestedArray = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ];

  // Find a sub-array containing the number 5
  let result = nestedArray.find(subArray => subArray.includes(5));
  console.log(result); // Output: [4, 5, 6]

8. Using `findIndex()` for Positioning

Overview: Use findIndex() to locate the index of a sub-array or element.
How-To:
- Find the index of a sub-array or element in a nested structure.

  let nestedArray = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ];

  // Find index of sub-array containing the number 5
  let index = nestedArray.findIndex(subArray => subArray.includes(5));
  console.log(index); // Output: 1

9. Using `slice()` for Sub-array Extraction

Overview: Use slice() to extract portions of nested arrays.
How-To:
- Extract specific sub-arrays or elements using slice().

  let nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
  let extracted = nestedArray.slice(1, 2); // Extract second sub-array
  console.log(extracted); // Output: [[4, 5, 6]]

10. Accessing Data with ES6 Proxy

Overview: Use ES6 Proxy to create custom access behavior for nested arrays.
How-To:
- Define a Proxy to intercept and manage access to nested array data.

  let handler = {
    get: function(target, prop, receiver) {
      if (typeof prop === 'string' && !isNaN(prop)) {
        return target[Number(prop)];
      }
      return Reflect.get(...arguments);
    }
  };

  let nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
  let proxyArray = new Proxy(nestedArray, handler);

  console.log(proxyArray[1][2]); // Output: 6

Summary (Generated by AI)

Index Notation: Access elements with multiple indices.
Array Destructuring: Extract values into variables.
Using flat() Method: Flatten nested arrays for simplified access.
Recursive Function: Traverse deeply nested arrays.
Using map() and forEach(): Iterate and manipulate nested data.
Using reduce() for Flattening: Flatten or aggregate data with reduce().
Array Access Using find(): Locate elements based on conditions.
Using findIndex() for Positioning: Find indices of sub-arrays or elements.
Using slice() for Sub-array Extraction: Extract portions of arrays.
Accessing Data with ES6 Proxy: Create custom access behavior with Proxy.

By using these methods, you can efficiently access and manipulate data in nested JavaScript arrays, making it easier to handle complex data structures in your applications.

Best IDEs for JavaScript Development with Multidimensional Arrays

When working with JavaScript, especially involving complex data structures like multidimensional arrays, choosing the right Integrated Development Environment (IDE) can significantly enhance productivity and code management. Here’s a list of some of the best IDEs for JavaScript development, specifically focusing on handling multidimensional arrays:

1. Visual Studio Code (VS Code)

Overview: A highly popular and versatile code editor developed by Microsoft.
Features:
- IntelliSense: Provides smart code completions and inline documentation, which is helpful for navigating multidimensional arrays.
- Debugging: Integrated debugging tools with breakpoints and variable inspection.
- Extensions: Supports a wide range of extensions for JavaScript development, including those for array visualization and manipulation.
- Integrated Terminal: Allows running scripts and testing code without leaving the editor.

Recommended Extensions:

Prettier: Code formatting to maintain consistent style.
Debugger for Chrome: Debug JavaScript code running in Google Chrome.
Bracket Pair Colorizer: Helps in visualizing matching brackets, useful for nested arrays.

2. WebStorm

Overview: A powerful IDE for JavaScript and web development created by JetBrains.
Features:
- Advanced Code Analysis: Provides in-depth analysis of JavaScript code, including multidimensional arrays.
- Integrated Debugger: Advanced debugging features for client-side and server-side JavaScript.
- Code Refactoring: Tools for improving and optimizing code structure.
- Live Edit: Allows real-time preview of changes in the browser.

Recommended Features:

Live Templates: Save and reuse common code patterns, including complex array structures.
Built-in Terminal: Integrated terminal for running and testing code.

3. Sublime Text

Overview: A lightweight and fast text editor with extensive plugin support.
Features:
- Syntax Highlighting: Clear syntax highlighting for JavaScript code, aiding in readability of nested structures.
- Snippets: Custom code snippets to quickly insert common code patterns.
- Command Palette: Access to various commands and tools directly.

Recommended Plugins:

Emmet: For faster HTML and CSS writing, useful in conjunction with JavaScript.
SublimeCodeIntel: Provides intelligent code completion and navigation.

4. Atom

Overview: An open-source text editor developed by GitHub with a strong community of contributors.
Features:
- Package Manager: Easy access to a wide range of packages for JavaScript development.
- Git Integration: Built-in Git support for version control.
- Customizable: Highly customizable with themes and plugins.

Recommended Packages:

Hydrogen: For interactive code execution and debugging.
Jshint: Provides real-time linting for JavaScript code.

5. Brackets

Overview: A lightweight editor focused on web development, developed by Adobe.
Features:
- Live Preview: See changes in real-time as you edit your code.
- Inline Editors: Edit CSS and JavaScript inline with the HTML code.
- Extensions: Support for various extensions to enhance functionality.

Recommended Extensions:

Bracket Colorizer: Helps in managing nested structures with color-coded brackets.
JavaScript Refactoring: For improving and restructuring JavaScript code.

6. Eclipse with JSDT

Overview: A versatile IDE that can be extended for JavaScript development with plugins.
Features:
- Project Management: Handles complex project structures effectively.
- Debugging Tools: Integrated debugging for JavaScript.

Recommended Plugins:

Eclipse Wild Web Developer: Provides JavaScript, TypeScript, and other web development support.

7. NetBeans

Overview: An open-source IDE with support for multiple programming languages, including JavaScript.
Features:
- Code Templates: Predefined code templates for faster development.
- Debugger: Built-in debugging tools with breakpoints and variable inspection.

Recommended Features:

JavaScript Tools: Includes various tools for managing and analyzing JavaScript code.

Summary (Generated by AI)

Visual Studio Code (VS Code): Best for extensive extensions and integrated development features.
WebStorm: Ideal for advanced code analysis and integrated tools.
Sublime Text: Lightweight with powerful plugins for quick development.
Atom: Highly customizable with a strong community.
Brackets: Focused on web development with real-time preview.
Eclipse with JSDT: Versatile with strong project management.
NetBeans: Open-source with useful JavaScript tools.

These IDEs offer various features to streamline the development process, manage multidimensional arrays, and enhance productivity in JavaScript programming.

Best JavaScript Frameworks for Complex Array Structures

When working with complex array structures in JavaScript, using the right framework can simplify data management and enhance your application's performance. Here are some of the best JavaScript frameworks and libraries for handling complex array structures:

1. React

Overview: A popular library for building user interfaces, particularly single-page applications (SPAs).
Features:
- Component-Based Architecture: Helps in managing complex data structures by breaking down the UI into reusable components.
- State Management: Libraries like Redux or React's built-in useState and useReducer hooks are excellent for managing complex state, including arrays.
- Virtual DOM: Efficiently updates the UI by only re-rendering parts of the DOM that have changed.

Example: Managing a nested array of items and their state using React's state management.

  import React, { useState } from 'react';

  function App() {
    const [items, setItems] = useState([[1, 2], [3, 4]]);

    const addItem = (index, newItem) => {
      const updatedItems = [...items];
      updatedItems[index].push(newItem);
      setItems(updatedItems);
    };

    return (
      <div>
        {items.map((subArray, index) => (
          <div key={index}>
            {subArray.join(', ')}
            <button onClick={() => addItem(index, 5)}>Add Item</button>
          </div>
        ))}
      </div>
    );
  }

  export default App;

Also my personal favorite.

2. Angular
- Overview: A robust framework for building dynamic web applications.
- Features:
- Two-Way Data Binding: Synchronizes data between the model and the view, making it easy to manage and display complex array structures.
- Dependency Injection: Facilitates easier management of services and components that handle complex data.
- RxJS: Powerful library for handling asynchronous data and streams, useful for managing and manipulating arrays.

Example: Using Angular’s services to manage nested arrays.

  import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    template: `
      <div *ngFor="let subArray of items">
        {{ subArray | json }}
        <button (click)="addItem(0, 6)">Add Item</button>
      </div>
    `
  })
  export class AppComponent {
    items = [[1, 2], [3, 4]];

    addItem(index: number, item: number) {
      this.items[index].push(item);
    }
  }

3. Vue.js

Overview: A progressive framework for building UIs and SPAs.
Features:
- Reactivity System: Automatically updates the UI when the data changes, making it ideal for managing complex array structures.
- Vuex: State management pattern and library that works well with Vue to handle complex state, including nested arrays.

Example: Using Vue to handle and display nested arrays.

  <template>
    <div>
      <div v-for="(subArray, index) in items" :key="index">
        {{ subArray.join(', ') }}
        <button @click="addItem(index, 5)">Add Item</button>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        items: [[1, 2], [3, 4]]
      };
    },
    methods: {
      addItem(index, item) {
        this.items[index].push(item);
      }
    }
  };
  </script>

4. Ember.js

Overview: A framework for creating scalable and maintainable web applications.
Features:
- Data Layer: Provides a robust data management system with Ember Data, which simplifies the handling of complex data structures.
- Computed Properties: Allows you to create properties based on the state of the data, useful for working with nested arrays.

Example: Managing and displaying nested arrays with Ember.js.

  import Component from '@glimmer/component';
  import { action } from '@ember/object';

  export default class MyComponent extends Component {
    items = [[1, 2], [3, 4]];

    @action
    addItem(index, item) {
      this.items[index].push(item);
    }
  }

5. Svelte

Overview: A modern framework for building user interfaces that compiles to efficient vanilla JavaScript.
Features:
- Reactivity: Built-in reactivity system makes it easy to handle changes in complex data structures.
- Svelte Stores: Manage and react to changes in state, including arrays, with a simple and intuitive API.

Example: Managing nested arrays with Svelte’s reactivity.

  <script>
    let items = [[1, 2], [3, 4]];

    function addItem(index, item) {
      items[index].push(item);
    }
  </script>

  {#each items as subArray, index}
    <div>
      {#each subArray as item}
        {item} 
      {/each}
      <button on:click={() => addItem(index, 5)}>Add Item</button>
    </div>
  {/each}

6. Backbone.js

Overview: A lightweight framework that provides the minimal structure needed for JavaScript applications.
Features:
- Models and Collections: Useful for managing complex data, including nested arrays, with built-in methods for querying and updating.

Example: Using Backbone’s collections to manage nested arrays.

  var ItemCollection = Backbone.Collection.extend({
    initialize: function() {
      this.items = [[1, 2], [3, 4]];
    },
    addItem: function(index, item) {
      this.items[index].push(item);
    }
  });

  var myCollection = new ItemCollection();
  myCollection.addItem(0, 5);
  console.log(myCollection.items);

7. Aurelia

Overview: A modern framework for building robust applications with a focus on simplicity and ease of use.
Features:
- Two-Way Data Binding: Makes it straightforward to bind complex data structures to the UI.
- Custom Elements: Create reusable components for managing complex data.

Example: Managing nested arrays with Aurelia’s data-binding.

  <template>
    <div repeat.for="subArray of items">
      <div repeat.for="item of subArray">
        ${item}
      </div>
      <button click.delegate="addItem(0, 5)">Add Item</button>
    </div>
  </template>

  <script>
  export class App {
    items = [[1, 2], [3, 4]];

    addItem(index, item) {
      this.items[index].push(item);
    }
  }
  </script>

Summary (Generated by AI)

React: Great for component-based architecture and state management.
Angular: Offers powerful data binding and dependency injection.
Vue.js: Known for its reactivity and simple state management with Vuex.
Ember.js: Provides a robust data layer and computed properties.
Svelte: Features built-in reactivity and simple state management with stores.
Backbone.js: Lightweight with models and collections for data management.
Aurelia: Focuses on simplicity with data binding and custom elements.

These frameworks and libraries offer different features and approaches to handling complex array structures in JavaScript, helping you choose the best tool based on your project's requirements.

Best Sorting Algorithms for Multidimensional Arrays in JavaScript

Sorting multidimensional arrays in JavaScript can be complex, as it involves sorting based on one or more dimensions. Here’s a guide to some of the best sorting algorithms you can use for multidimensional arrays, along with their suitability for different scenarios:

1. Quick Sort

Overview: Quick sort is a highly efficient, divide-and-conquer algorithm that sorts arrays by selecting a 'pivot' and partitioning the array into sub-arrays.
Suitability: Good for large arrays and multidimensional arrays where you need to sort based on a specific dimension.

Example: Sorting a 2D array by the second element in each sub-array.

  function quickSort(arr, colIndex) {
    if (arr.length <= 1) return arr;

    const pivot = arr[Math.floor(arr.length / 2)][colIndex];
    const left = arr.filter(row => row[colIndex] < pivot);
    const middle = arr.filter(row => row[colIndex] === pivot);
    const right = arr.filter(row => row[colIndex] > pivot);

    return [...quickSort(left, colIndex), ...middle, ...quickSort(right, colIndex)];
  }

  const array = [[1, 4], [3, 2], [5, 1]];
  console.log(quickSort(array, 1)); // Sort by second element

2. Merge Sort

Overview: Merge sort is a stable, divide-and-conquer algorithm that divides the array into smaller arrays, sorts them, and merges them back together.
Suitability: Ideal for large arrays and cases where stability (preserving the order of equal elements) is important.

Example: Sorting a 2D array by the first element in each sub-array.

  function mergeSort(arr, colIndex) {
    if (arr.length <= 1) return arr;

    const middle = Math.floor(arr.length / 2);
    const left = mergeSort(arr.slice(0, middle), colIndex);
    const right = mergeSort(arr.slice(middle), colIndex);

    return merge(left, right, colIndex);
  }

  function merge(left, right, colIndex) {
    let result = [];
    while (left.length && right.length) {
      if (left[0][colIndex] < right[0][colIndex]) {
        result.push(left.shift());
      } else {
        result.push(right.shift());
      }
    }
    return result.concat(left, right);
  }

  const array = [[1, 4], [3, 2], [5, 1]];
  console.log(mergeSort(array, 0)); // Sort by first element

3. Bubble Sort

Overview: Bubble sort repeatedly compares and swaps adjacent elements if they are in the wrong order.
Suitability: Best for small arrays or as a teaching tool; not efficient for large multidimensional arrays.

Example: Sorting a 2D array by the first element using bubble sort.

  function bubbleSort(arr, colIndex) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
      for (let j = 0; j < len - 1; j++) {
        if (arr[j][colIndex] > arr[j + 1][colIndex]) {
          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        }
      }
    }
    return arr;
  }

  const array = [[1, 4], [3, 2], [5, 1]];
  console.log(bubbleSort(array, 0)); // Sort by first element

4. Insertion Sort

Overview: Insertion sort builds the sorted array one item at a time by repeatedly picking the next item and inserting it into the correct position.
Suitability: Good for small to medium-sized arrays or nearly sorted arrays.

Example: Sorting a 2D array by the second element using insertion sort.

  function insertionSort(arr, colIndex) {
    for (let i = 1; i < arr.length; i++) {
      let key = arr[i];
      let j = i - 1;

      while (j >= 0 && arr[j][colIndex] > key[colIndex]) {
        arr[j + 1] = arr[j];
        j = j - 1;
      }
      arr[j + 1] = key;
    }
    return arr;
  }

  const array = [[1, 4], [3, 2], [5, 1]];
  console.log(insertionSort(array, 1)); // Sort by second element

5. Heap Sort

Overview: Heap sort involves building a heap from the array and then repeatedly extracting the maximum element from the heap to build the sorted array.
Suitability: Good for large arrays where performance is a concern.

Example: Sorting a 2D array by the first element using heap sort.

  function heapSort(arr, colIndex) {
    let len = arr.length;

    function heapify(arr, len, i) {
      let largest = i;
      let left = 2 * i + 1;
      let right = 2 * i + 2;

      if (left < len && arr[left][colIndex] > arr[largest][colIndex]) {
        largest = left;
      }

      if (right < len && arr[right][colIndex] > arr[largest][colIndex]) {
        largest = right;
      }

      if (largest !== i) {
        [arr[i], arr[largest]] = [arr[largest], arr[i]];
        heapify(arr, len, largest);
      }
    }

    for (let i = Math.floor(len / 2); i >= 0; i--) {
      heapify(arr, len, i);
    }

    for (let i = len - 1; i > 0; i--) {
      [arr[0], arr[i]] = [arr[i], arr[0]];
      heapify(arr, i, 0);
    }

    return arr;
  }

  const array = [[1, 4], [3, 2], [5, 1]];
  console.log(heapSort(array, 0)); // Sort by first element

6. Radix Sort

Overview: Radix sort is a non-comparative sorting algorithm that sorts numbers by processing individual digits.
Suitability: Efficient for sorting numbers and can be adapted for multidimensional arrays if elements are numeric.

Example: Sorting a 2D array by a specific column if elements are numeric.

  function radixSort(arr, colIndex) {
    const getMax = (arr) => Math.max(...arr.map(row => row[colIndex]));
    const countSort = (arr, exp) => {
      let output = Array(arr.length).fill([0, 0]);
      let count = Array(10).fill(0);

      for (let i = 0; i < arr.length; i++) {
        count[Math.floor(arr[i][colIndex] / exp) % 10]++;
      }

      for (let i = 1; i < 10; i++) {
        count[i] += count[i - 1];
      }

      for (let i = arr.length - 1; i >= 0; i--) {
        output[count[Math.floor(arr[i][colIndex] / exp) % 10] - 1] = arr[i];
        count[Math.floor(arr[i][colIndex] / exp) % 10]--;
      }

      for (let i = 0; i < arr.length; i++) {
        arr[i] = output[i];
      }
    };

    let max = getMax(arr);
    for (let exp = 1; Math.floor(max / exp) > 0; exp *= 10) {
      countSort(arr, exp);
    }

    return arr;
  }

  const array = [[1, 4], [3, 2], [5, 1]];
  console.log(radixSort(array, 0)); // Sort by first element

Summary (Generated by AI)

Quick Sort: Efficient for large arrays and multidimensional arrays with specific sorting criteria.
Merge Sort: Stable and good for large arrays where stability is important.
Bubble Sort: Simple but inefficient for large arrays; best for small or educational purposes.
Insertion Sort: Suitable for small or nearly sorted arrays.
Heap Sort: Effective for large arrays with performance concerns.
Radix Sort: Efficient for numeric arrays; can be adapted for multidimensional sorting if elements are numbers.

These sorting algorithms offer different trade-offs in terms of complexity, performance, and stability, allowing you to choose the best one based on your specific needs when working with multidimensional arrays in JavaScript.

Note:

Some sections of this article were generated using artificial intelligence, specifically Claude Sonnet. While I have manually reviewed most of the content, please verify the information under the "Generated by AI" sections to ensure accuracy.
This article is geared towards Beginners and their queries. More sophisticated methods for working with multidimensional arrays, such as dynamic memory allocation, recursion, and custom data structures haven't been discussed here.
Multidimensional Arrays are used in game development, data visualization, or machine learning.

Homework:

Compare the performance of different methods for handling multidimensional arrays and highlight their strengths and weaknesses.
The article doesn't provide many examples of how multidimensional arrays are used in real-world JavaScript applications. What are some real-world applications apart from those mentioned in note.