I created this solution for my own blog, and then I enhanced it for the WikiZEIT project. I also included the improved version in my Eleventy starter "Complite".

In this article, I'll explain how to create a dark mode toggle with just HTML and CSS with help from the new :has() selector. I will also use CSS variables.

Table of Contents

• Why Should Websites Work Without JavaScript?

• HTML Structure

• CSS Code

  • Styling the Toggle

  • CSS Variables and the Website Style

• Conclusion

Why Should Websites Work Without JavaScript?

If you're wondering why a website may benefit from using no JavaScript, there are several reasons, like accessibility (a11y), SEO, and AI visibility.

Modern screen readers can handle JavaScript websites, but this isn't the only thing you should care about. People might be using old computers or phones. Others might have poor internet connections and may disable JavaScript to use less bandwidth.

As for SEO, Google is one of the few major crawlers that can reliably render JavaScript-heavy pages, but rendering can still take extra time compared with indexing server-rendered HTML. Many AI crawlers and answer engines don't appear to execute JavaScript the way a browser does. They often work from the raw HTML response.

So if, for example, you have a React app that's purely client-side rendered, a bot that only reads the initial HTML may see little more than <div id="root"></div> until JavaScript runs.

To be clear, the issue isn't React itself, but client-side rendering. Server-side rendering, static generation, or prerendering can make your content available in the initial HTML so search engines and AI crawlers can read it more reliably.

But the point remains: if you want your website to be reliably more accessible to all people and machines, you should make it work even without JavaScript.

Note that your website doesn't need to be written in pure/only HTML and CSS. As mentioned above, if you use solutions like React, consider also using a framework like Next.js with Static Site Rendering (SSR) or a Static Site Generator (SSG) like Hugo. You can also consider modern SSG solutions like Eleventy that I'm using.

To learn more about Elventy and Hugo, you can read those two articles:

• How to Create Your First Hugo Blog: a Practical Guide

• Learn the Eleventy Static Site Generator by Building and Deploying a Portfolio Website

To learn more about Next.js, you can search videos on YouTube (but remember to check if they explain the modern App Router, not the old Page Router).

HTML Structure

Alright, now that you understand why this approach can be useful, let's dive in and build our dark mode toggle. The HTML of the toggle uses HTML radio buttons:

<div class="theme-toggle">
    <input type="radio" id="mode_dark"
           name="mode" value="dark">
    <label for="mode_dark"
           aria-label="Switch to dark mode">
      🌙
    </label>
    <input type="radio" id="mode_light"
            name="mode" value="light">
    <label for="mode_light"
           aria-label="Switch to light mode">
      ☀️
     </label>
</div>

The above code uses moon and sun emojis.

CSS Code

Now let's see the CSS part of the solution. The trick to making this work without JavaScript involves using this CSS :has pseudo-class:

:has(#mode_dark:checked)

The way this works is a bit like a parent selector that was always missing in CSS. If you have some code like this p:has(img), it will match all <p> tags that have images inside.

In our case, :has will match when there's a radio button or checkbox selected anywhere on the page. This is the :checked part and and #mode_dark is the id of the input for the dark mode that we have in the HTML Structure section.

So to summarize, you can add :has to any element that can be styled when dark mode is selected. Here's an example:

html:has(#mode_dark:checked) p {
  color: white;
  background: black;
}

This CSS will style all <p> tags when dark mode is enabled.

The above example (plus the HTML) is everything you need to create a CSS-only dark mode switch.

Styling the Toggle

Here's the CSS that styles the toggle so only one emoji (sun or moon) is displayed at a time. This is only to make the toggle look nice.

The code also makes sure that the initially selected value is always the system-preferred mode.

/* style of the toggle */
.theme-toggle {
  display: flex;
  align-items: center;
}

/* hide the input */
.theme-toggle input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-toggle label {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* icon visibility
 *
 * default light with system and radio button overwrite
 */
label[for="mode_light"] { display: none; }
label[for="mode_dark"] { display: grid; }

@media (prefers-color-scheme: dark) {
  label[for="mode_light"] { display: grid; }
  label[for="mode_dark"] { display: none; }
}
:root:has(#mode_dark:checked) label[for="mode_light"] {
   display: grid;
}
:root:has(#mode_dark:checked) label[for="mode_dark"] {
   display: none;
}
:root:has(#mode_light:checked) label[for="mode_light"] {
   display: none;
}
:root:has(#mode_light:checked) label[for="mode_dark"] {
   display: grid;
}

The :root selector above means the root of the HTML tree. It's often used instead of html.

The CSS code @media (prefers-color-scheme: dark) is a media query, a way to add CSS code when special conditions are met. Here the media query is checking whether the user has system settings set to dark mode.

The code hides the inputs, and the labels control the toggle of the radio button. This is a common way to style radio buttons and checkboxes.

CSS Variables and the Website Style

The last part is to style the website. Here we have CSS variables with only two colors. But in a real website, you might have all colors and settings for the dark/light mode that's applied to the whole page:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #252525; /* dark gray */
    --fg: #fff;    /* white */
  }
}
:root:has(#mode_dark:checked) {
  --bg: #252525; /* dark gray */
  --fg: #fff;    /* white */
}
:root:has(#mode_light:checked) {
  --bg: #fff;    /* white */
  --fg: #252525; /* dark gray */
}

It's useful to use CSS variables because you can put styles that change between dark and light mode in one place. And then you can use one variable instead of hardcoding each style all over your CSS file.

So instead of using code like this:

html:has(#mode_dark:checked) p {
  color: #fff;
  background: #252525;
}

You can use variables:

html:has(#mode_dark:checked) p {
    background: var(--bg);
    color: var(--fg);
}

In case of background and foreground colors, you only need this code:

body {
  background: var(--bg);
  color: var(--fg);
}

You can read more about CSS variables with the :root selector in this article:

• CSS Variables Definition – What are CSS Vars and How to Use Them?

Conclusion

When creating a website, it's always worth making it work without JavaScript. It's good for accessibility and SEO.

Now with modern CSS, most of the things a website needs can be done without JS. You should incorporate progressive enhancement and add JavaScript on top of the existing HTML/CSS foundation.

To read more about progressive enhancement, check this article: What is Progressive Enhancement, and why it matters.

And here is a CodePen demo of the whole solution.

If you have any questions, you can contact me on Twitter/X. My DMs are open. You can also check out my personal blog.

In this tutorial, you'll build your very own browser-based Text Compare Tool. It will take an original piece of text, compare it against a changed version, and instantly highlight exactly what was added or removed.

Building this project will help you level up your JavaScript skills. You'll also create a tool that's highly secure, because everything happens locally in the user's browser. No sensitive data is ever sent to a server.

Let’s get started.

Prerequisites

To follow along easily, you should know:

• Basic HTML and CSS knowledge: How to structure a page and use Flexbox to put items side-by-side.

• Basic JavaScript knowledge: How to write functions, use arrays, and listen for button clicks.

• Your Setup: A code editor (like VS Code) and a web browser to view your work.

Table of Contents

• Step 1: Set Up Your Project Files

• Step 2: Build the HTML Structure

• Step 3: Style the Tool with CSS

• Step 4: Write the JavaScript Engine

• Step 5: Test Your Application

• Conclusion

Step 1: Set Up Your Project Files

First, you need a place to store your code. Create a new folder on your computer and name it text-compare-tool.

Inside that folder, create three empty files:

• index.html (This holds the structure of your app)

• style.css (This makes your app look good)

• script.js (This makes your app actually work)

Step 2: Build the HTML Structure

Open your index.html file. You need to create a simple layout with two large text boxes: one for the original text, and one for the updated text.

Copy and paste this code into your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Compare Tool</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Text Compare Tool</h1>
    <p class="description">
        Quickly find every addition and deletion between two versions of your text. Just paste them into our tool, and we’ll show you exactly what’s been changed.
    </p>

    <div class="container">
        
        <div class="panels-wrapper">
            <!-- Left Side: Original Text -->
            <div class="panel">
                <textarea id="text1" placeholder="Paste your original text here..."></textarea>
                <div id="result1" class="result-box"></div>
            </div>
            
            <!-- Right Side: Changed Text -->
            <div class="panel">
                <textarea id="text2" placeholder="Paste your changed text here..."></textarea>
                <div id="result2" class="result-box"></div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="controls">
            <button class="btn-compare" onclick="compareText()">Compare</button>
            <button class="btn-clear" onclick="clearText()">Clear</button>
        </div>

    </div>

    <script src="script.js"></script>
</body>
</html>

Understanding the HTML:

• The two panels: Inside the .panels-wrapper, you have a left side and a right side.

• Textareas vs results: Each side has a <textarea> where the user can type. Right below the text area is a <div> with the class .result-box. Right now, those result boxes are invisible. Later, JavaScript will hide the text areas and show the result boxes instead.

• The buttons: The "Compare" and "Clear" buttons are hooked up to JavaScript functions using onclick.

Step 3: Style the Tool with CSS

A good utility tool should be easy on the eyes. You'll use a clean white and blue design, and apply soft red and green colors to highlight the text changes.

Open your style.css file and add this code:

:root {
    --primary-blue: #007bff;
    --background-color: #f8f9fa;
    --text-color: #202124;
    --border-color: #dadce0;
    
    /* Highlight Colors */
    --red-bg: #fce8e6;
    --red-text: #c5221f;
    --green-bg: #e6f4ea;
    --green-text: #137333;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    margin: 0;
}

h1 {
    margin-bottom: 10px;
}

.description {
    text-align: center;
    max-width: 600px;
    color: #5f6368;
    margin-bottom: 30px;
    line-height: 1.5;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 1000px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.panels-wrapper {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

textarea, .result-box {
    width: 100%;
    height: 300px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
    resize: vertical;
}

textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

/* Hidden by default */
.result-box {
    display: none; 
    background-color: #fafafa;
    overflow-y: auto;
    white-space: pre-wrap; 
}

.controls {
    display: flex;
    justify-content: center;
    gap: 15px;
}

button {
    padding: 10px 25px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-compare {
    background-color: var(--primary-blue);
    color: white;
}

.btn-clear {
    background-color: white;
    color: var(--primary-blue);
    border: 1px solid var(--border-color);
}

/* How the differences will look */
.deleted {
    background-color: var(--red-bg);
    color: var(--red-text);
    padding: 2px 4px;
    border-radius: 3px;
}

.added {
    background-color: var(--green-bg);
    color: var(--green-text);
    padding: 2px 4px;
    border-radius: 3px;
}

Understanding the CSS:

• Flexbox layout: display: flex; inside .panels-wrapper is what places your two text boxes neatly side-by-side.

• The highlighters: The .deleted and .added classes are the most important part of the visual design. When a user deletes a word, we give it a soft red background. When they add a word, it gets a soft green background.

This is what your tool will look like once it's finished:

Step 4: Write the JavaScript Engine

Now you need to make the tool actually work. How does your computer know if a word has changed?

We have to write logic that breaks paragraphs down into individual words. The code will look at the original list of words and compare it to the new list. If a word from the original text is missing, it gets marked as "deleted." If a brand new word appears, it gets marked as "added."

Open your script.js file and paste in this complete, working code:

function compareText() {
    // 1. Grab the text from the text boxes
    const text1 = document.getElementById('text1').value;
    const text2 = document.getElementById('text2').value;

    // 2. Chop the text up into an array of words (and keep the spaces)
    const words1 = text1.split(/(\s+)/);
    const words2 = text2.split(/(\s+)/);

    // 3. Find the differences
    const { diff1, diff2 } = calculateDifferences(words1, words2);

    const resultBox1 = document.getElementById('result1');
    const resultBox2 = document.getElementById('result2');
    
    // 4. Turn those differences into HTML with colors
    resultBox1.innerHTML = createColoredHTML(diff1, 'deleted');
    resultBox2.innerHTML = createColoredHTML(diff2, 'added');

    // 5. Hide the text boxes and show the final results
    document.getElementById('text1').style.display = 'none';
    document.getElementById('text2').style.display = 'none';
    resultBox1.style.display = 'block';
    resultBox2.style.display = 'block';
}

// The engine that compares the two lists of words
function calculateDifferences(arr1, arr2) {
    const n = arr1.length;
    const m = arr2.length;
    
    // Create a grid to keep track of matching words
    const grid = Array.from({ length: n + 1 }, () => Array(m + 1).fill(0));

    for (let i = 1; i <= n; i++) {
        for (let j = 1; j <= m; j++) {
            if (arr1[i - 1] === arr2[j - 1]) {
                grid[i][j] = grid[i - 1][j - 1] + 1;
            } else {
                grid[i][j] = Math.max(grid[i - 1][j], grid[i][j - 1]);
            }
        }
    }

    let i = n, j = m;
    const diff1 = [];
    const diff2 = [];

    // Walk backwards through the grid to mark what changed
    while (i > 0 || j > 0) {
        if (i > 0 && j > 0 && arr1[i - 1] === arr2[j - 1]) {
            diff1.unshift({ value: arr1[i - 1], type: 'equal' });
            diff2.unshift({ value: arr2[j - 1], type: 'equal' });
            i--;
            j--;
        } else if (j > 0 && (i === 0 || grid[i][j - 1] >= grid[i - 1][j])) {
            diff2.unshift({ value: arr2[j - 1], type: 'changed' });
            j--;
        } else if (i > 0 && (j === 0 || grid[i][j - 1] < grid[i - 1][j])) {
            diff1.unshift({ value: arr1[i - 1], type: 'changed' });
            i--;
        }
    }

    return { diff1, diff2 };
}

// Packages the text safely into HTML span elements
function createColoredHTML(diffArray, colorClass) {
    return diffArray.map(wordItem => {
        // Replace dangerous characters so the browser doesn't crash
        const safeText = wordItem.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
        
        // If the word was changed (and isn't just a blank space), wrap it in color
        if (wordItem.type === 'changed' && !/^\s+$/.test(wordItem.value)) {
            return `<span class="${colorClass}">${safeText}</span>`;
        }
        return safeText;
    }).join('');
}

// Puts the tool back to its default state
function clearText() {
    document.getElementById('text1').value = '';
    document.getElementById('text2').value = '';
    
    document.getElementById('text1').style.display = 'block';
    document.getElementById('text2').style.display = 'block';
    
    document.getElementById('result1').style.display = 'none';
    document.getElementById('result2').style.display = 'none';
}

Understanding the JavaScript:

1. Keeping the formatting: In the first function, you see .split(/(\s+)/). This splits the text up by spaces, but keeps the spaces and line-breaks. If you don't do this, all of the user's paragraphs will mash into one giant block of text!

2. The grid system: The calculateDifferences function creates an invisible grid. It compares every word in the first box with every word in the second box. If it sees the same word in the same order, it leaves it alone. If it hits a snag, it marks the word as a change.

3. Safety first: The createColoredHTML function wraps our changed words in <span class="added"> or <span class="deleted"> so CSS can color them. But before it does that, it removes any < or > symbols using .replace(). This stops hackers from pasting malicious code into your app.

Step 5: Test Your Application

You're completely done coding! Now it’s time to see it in action.

1. Open your text-compare-tool folder.

2. Double-click the index.html file. It will open in your default web browser.

3. Type a sentence into the left box: "The quick brown fox jumps over the lazy dog."

4. Type a slightly different sentence into the right box: "The fast brown fox jumps over the sleepy dog."

5. Click Compare.

You will instantly see the word "quick" highlight in red on the left, and the word "fast" highlight in green on the right. If you want to start over, just click Clear.

Conclusion

Great job! You just built a highly practical, browser-based text comparison utility using nothing but pure HTML, CSS, and JavaScript.

You learned how to break text into arrays, compare them using a grid-based algorithm, and manipulate the DOM to show those differences to the user safely. Because this tool relies on local browser processing, it's incredibly fast and 100% private.

If you want to see this exact logic running in a live production environment, or if you need to bookmark a fast tool for your own writing tasks, check out the live Text Compare Tool. Keep experimenting with the code, and happy building!

We'll code a fully functional Case Converter Tool from scratch using only HTML, CSS, and vanilla JavaScript.

This lightweight application allows users to paste their content and immediately transform it into standard formats like UPPERCASE, lowercase, Title Case, and Sentence case.

Alongside the text formatting, we'll integrate a live character counter and set up functionality to export the final text as a PDF or Word document.

Grab your favorite code editor, and let's dive in.

Prerequisites

Before you begin, you should have a basic familiarity with the following tools and concepts:

• Core Web Technologies: A fundamental understanding of HTML structure, basic CSS styling, and JavaScript concepts like functions, array methods, and string manipulation.

• Development Environment: A code editor installed on your computer (for example, Visual Studio Code) and a modern web browser to test your application locally.

Table of Contents

• Step 1: Set Up Your Project

• Step 2: Build the HTML Structure

• Step 3: Style the Tool with CSS

• Step 4: Add JavaScript Functionality

• Step 5: Test Your Tool

• Conclusion

Step 1: Set Up Your Project

Before writing any code, you need to establish a clean directory structure for your application files.

First, you'll need to initialize a workspace. Open your file manager and create a brand new directory to keep your work organized. Let's name this directory case-converter-app.

Then you'll generate the required files. Inside your newly created directory, set up the following three blank files:

• index.html

• styles.css

• script.js

Step 2: Build the HTML Structure

Open the index.html file in your code editor. You'll add the structural foundation of the tool here.

Add the following code into your 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>Case Converter Tool</title>
    <link rel="stylesheet" href="styles.css">
    
    <!-- jsPDF library for generating PDF files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <!-- Google Fonts for a modern look -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>

    <div class="app-container">
        
        <div class="editor-section">
            <div class="textarea-header">
                <span class="tip-badge">💡 Tip: Use Download buttons to save results</span>
            </div>
            <textarea id="inputText" placeholder="Type or paste your content here..."></textarea>
        </div>
        
        <!-- Case Conversion Buttons -->
        <div class="button-grid case-buttons">
            <button class="case-btn" onclick="convertCase(event, 'upper')">UPPER CASE</button>
            <button class="case-btn" onclick="convertCase(event, 'lower')">lower case</button>
            <button class="case-btn" onclick="convertCase(event, 'capitalized')">Capitalized Case</button>
            <button class="case-btn" onclick="convertCase(event, 'title')">Title Case</button>
            <button class="case-btn" onclick="convertCase(event, 'sentence')">Sentence case</button>
            <button class="case-btn" onclick="convertCase(event, 'inverse')">iNvErSe CaSe</button>
            <button class="case-btn" onclick="convertCase(event, 'alternate')">aLtErNaTiNg cAsE</button>
        </div>

        <div class="divider"></div>

        <!-- Action Buttons -->
        <div class="button-grid action-buttons">
            <button class="action-btn primary-action copy-btn" onclick="copyToClipboard()">Copy To Clipboard</button>
            <button class="action-btn" onclick="downloadPDF()">Download PDF</button>
            <button class="action-btn" onclick="downloadWord()">Download Word</button>
            <button class="action-btn danger-action" onclick="clearText()">Clear Text</button>
        </div>

        <!-- Real-time Statistics -->
        <div class="stats-panel">
            <div class="stat-box">
                <span class="stat-value" id="charCount">0</span>
                <span class="stat-label">Characters</span>
            </div>
            <div class="stat-box">
                <span class="stat-value" id="wordCount">0</span>
                <span class="stat-label">Words</span>
            </div>
            <div class="stat-box">
                <span class="stat-value" id="paragraphCount">0</span>
                <span class="stat-label">Paragraphs</span>
            </div>
            <div class="stat-box">
                <span class="stat-value" id="sentenceCount">0</span>
                <span class="stat-label">Sentences</span>
            </div>
        </div>

    </div>

    <script src="script.js"></script>
</body>
</html>

Understanding this HTML:

• <script src="...jspdf..."></script>: This links to an external library that allows JavaScript to generate PDF files directly in the user's browser.

• <textarea id="inputText">: This creates the main text box where users will paste their content.

• <div class="stats-panel">: This section contains span elements with unique IDs. You'll target these IDs with JavaScript to update the text statistics in real-time.

Step 3: Style the Tool with CSS

Next, you'll give the tool a clean, professional design. Open your styles.css file and add the following code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: #1e293b;
}

.app-container {
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    padding: 2.5rem;
}

.textarea-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.tip-badge {
    background: #fef08a;
    color: #854d0e;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

textarea {
    width: 100%;
    height: 220px;
    padding: 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 1rem;
    resize: vertical;
    outline: none;
    transition: all 0.3s ease;
    background: #f8fafc;
}

textarea:focus {
    border-color: #007bff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
}

.button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

button {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.case-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.case-btn:hover { 
    background: #e2e8f0; 
}

/* The active class highlights the selected button */
.case-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
}

.divider {
    height: 1px;
    background: #e2e8f0;
    margin: 1.5rem 0;
}

.action-btn { 
    background: #fff; 
    border: 1px solid #cbd5e1; 
}

.action-btn:hover { 
    background: #f8fafc; 
    border-color: #94a3b8; 
}

.primary-action { 
    background: #007bff; 
    color: #fff; 
    border-color: #007bff; 
}

.primary-action:hover { 
    background: #0056b3; 
    border-color: #0056b3; 
}

.danger-action { 
    color: #ef4444; 
    border-color: #fca5a5; 
    background: #fef2f2; 
}

.danger-action:hover { 
    background: #fee2e2; 
    border-color: #f87171; 
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.stat-box { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.stat-value { 
    font-size: 1.75rem; 
    font-weight: 700; 
}

.stat-label { 
    font-size: 0.75rem; 
    color: #64748b; 
    text-transform: uppercase; 
}

Understanding this CSS:

• body: You use Flexbox to center the tool perfectly on the screen and apply a soft gradient background.

• .app-container: This creates a white, rounded card with a soft shadow to hold the user interface.

• .case-btn.active: You define an active state here. You'll use JavaScript to apply this class to the specific button the user clicks.

At this stage, we've completely structured and styled the user interface. The tool will look like this:

Right now, the front-end is visible, but the buttons are entirely static. To make the transformations actually work, we have to write the logic in JavaScript.

Step 4: Add JavaScript Functionality

Now you need to make the tool interactive. Open the script.js file and add this code:

const textArea = document.getElementById('inputText');

// Listen for typing to update statistics in real-time
textArea.addEventListener('input', updateStats);

function updateStats() {
    const text = textArea.value;
    
    document.getElementById('charCount').textContent = text.length;
    
    const words = text.trim().split(/\s+/).filter(word => word.length > 0);
    document.getElementById('wordCount').textContent = words.length;
    
    const sentences = text.split(/[.!?]+/).filter(sentence => sentence.trim().length > 0);
    document.getElementById('sentenceCount').textContent = sentences.length;
    
    const paragraphs = text.split(/\n+/).filter(paragraph => paragraph.trim().length > 0);
    document.getElementById('paragraphCount').textContent = paragraphs.length;
}

function convertCase(event, type) {
    let text = textArea.value;
    if (!text) return; 

    // Highlight the active button
    const buttons = document.querySelectorAll('.case-btn');
    buttons.forEach(btn => btn.classList.remove('active'));
    if (event) {
        event.target.classList.add('active');
    }

    // Process the text
    switch (type) {
        case 'upper':
            text = text.toUpperCase();
            break;
        case 'lower':
            text = text.toLowerCase();
            break;
        case 'capitalized':
            text = text.toLowerCase().replace(/\b\w/g, c => c.toUpperCase());
            break;
        case 'title':
            const minorWords = ['a', 'an', 'the', 'and', 'but', 'or', 'for', 'nor', 'on', 'at', 'to', 'from', 'by'];
            text = text.toLowerCase().split(' ').map((word, index) => {
                if (index !== 0 && minorWords.includes(word)) return word;
                return word.charAt(0).toUpperCase() + word.slice(1);
            }).join(' ');
            break;
        case 'sentence':
            text = text.toLowerCase().replace(/(^\s*\w|[\.\!\?]\n*\s*\w)/g, c => c.toUpperCase());
            break;
        case 'inverse':
            text = text.split('').map(c => c === c.toUpperCase() ? c.toLowerCase() : c.toUpperCase()).join('');
            break;
        case 'alternate':
            text = text.toLowerCase().split('').map((c, i) => i % 2 === 0 ? c : c.toUpperCase()).join('');
            break;
    }

    textArea.value = text;
    updateStats(); 
}

function copyToClipboard() {
    if (!textArea.value) return;
    textArea.select();
    document.execCommand('copy');
    
    const copyBtn = document.querySelector('.copy-btn');
    copyBtn.textContent = 'Copied!';
    setTimeout(() => copyBtn.textContent = 'Copy To Clipboard', 1500);
}

function clearText() {
    textArea.value = '';
    updateStats();
    document.querySelectorAll('.case-btn').forEach(btn => btn.classList.remove('active'));
}

function downloadWord() {
    if (!textArea.value) return;
    const blob = new Blob([textArea.value], { type: 'application/msword' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'converted_text.doc';
    a.click();
    URL.revokeObjectURL(url);
}

function downloadPDF() {
    if (!textArea.value) return;
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    const splitText = doc.splitTextToSize(textArea.value, 180);
    doc.text(splitText, 15, 15);
    doc.save('converted_text.pdf');
}

Understanding this JavaScript:

• addEventListener('input', ...): This listens to every single keystroke. Every time you type, it instantly recalculates the words, characters, and sentences.

• convertCase(event, type): This function takes the selected style (like upper or sentence) and applies Regular Expressions (Regex) or array mapping to format the string. It also dynamically adds the .active CSS class to the specific button you clicked.

• document.execCommand('copy'): This is a browser command that copies the selected text directly to the user's clipboard.

• new Blob(): You use a Blob (Binary Large Object) to construct a file out of the text on the fly. This allows users to download a .doc file without needing a backend server.

Step 5: Test Your Tool

You're now ready to evaluate your code in a real browser environment.

1. Open the case-converter-app folder on your computer.

2. Double-click the index.html file to launch the application.

3. Paste a long paragraph into the text area to verify that the live statistics update accurately.

4. Switch between the formatting options to observe the immediate DOM manipulation, and test the export buttons to ensure files are downloading correctly.

Conclusion

In this tutorial, you successfully engineered a browser-based Case Converter Tool using vanilla JavaScript.

You learned how to handle continuous user inputs, manipulate string data using Regular Expressions, and trigger local file downloads directly from the front end.

Most importantly, you learned that modern web browsers are highly capable of handling complex document modifications locally, removing the strict need for external backend servers. This method guarantees fast processing speeds and keeps user data completely private.

For a live demonstration of these concepts in a production environment, feel free to test out this Case Converter and experience how seamlessly these text transformations operate.

This guide will teach you this useful alternative for responsive designs. You'll also learn about on-scroll effects in CSS.

Prerequisites

Before diving into scrollable queries and container-based scroll effects, make sure you have:

• Basic familiarity with CSS features and key terms — understanding properties like height, overflow, and how they affect layout.

• Experience writing vanilla CSS — being comfortable with selectors, rulesets, and applying styles without relying on frameworks.

• A working knowledge of HTML structure — since scroll behavior depends on parent elements, knowing how containers and child elements interact is essential.

• (Optional but helpful) Some exposure to responsive design concepts, so you can see how scrollable parents fit into broader layout strategies.

What We'll Cover:

• Prerequisites

• How to Use Container Queries

• Difference Between Container Queries and Media queries

• Container Scroll-state

• Wrapping Up

How to Use Container Queries

Usually, when making responsive designs, you use a media query that adds style to the page based on the page's width viewport, but container queries shift the narrative by adding styles based on the specific elements container or parent element size.

Take a navbar as an example. Let's say you want to have its links wrapped on top of each other when the size of a nav element size is less than 450px and also change the background color when the screen size is less than 450px.

To make nav element links wrap on top of each other when the nav element size is less than 450px, we start by wrapping the links inside a single parent nav:

   <nav>
      <img src="" alt="logo" />
      <ul>
        <a href="">home</a>
        <a href="">about</a>
        <a href="">services</a>
        <a href="">contact</a>
      </ul>
    </nav>

Then use container-type to define a container query on the wrapping element or parent (nav) element. It can have one of the following values:

• inline-size: Used when you want to track the x-axis of the parent element on the page (width)

• block-size: Used when you want to track the y-axis of the parent element on the page (height)

• Container Scroll-state: Used when you want to track the parent element when scrolled and when elements with position sticky are stuck on the screen.

For most cases, you will need to track the size of an element against the x-axis size, and you must use the container-type on a parent element because you want to apply styles based on the parent element size. Here, we'll use the nav because it is the parent element.

nav { 
  container-type: inline-size;
}

You then define a container query with an at symbol (@) followed by the container keyword.

Then check if the width of the parent container (nav) gets narrower than 450px. If the condition is true, add a flex-wrap to links element:

@container (width > 450px) {
  ul {
    flex-wrap: wrap;
  }
}

Difference Between Container Queries and Media queries

Take a look at the code below for media queries:

@media (width < 450px) {
  nav {
    background: green;
  }
}

In the media query above, the nav element has a green background-color when the screen size is less than 450px.

For container queries, the elements are getting stacked on top of each other when the nav element size is less than 450px.

So, the difference is that media-queries considers the whole screen size while container-queries consider the parent element size.

Example:

Container Scroll-state

You can also use container queries to style an element on scroll or to style an element with a position sticky when it's stuck on the page.

Note: Container scroll-state browser support isn't very good. It's supported in about 71% of all browsers currently, with the notable exceptions of Safari and Firefox. Be cautious when using it in production.

Scrollable Queries

A scrollable query is used to check for parent element scrollbar behavior. If there is a scroll behavior on the parent element, then the container query for scrolling will be applied.

To use the scrollable queries, you need to have a parent that has a scroll behavior. HTML is the best fit for such an example because by default HTML has a scroll behavior on it.

To make an element scrollable, set a fixed height and apply overflow. This ensures a scroll bar appears whenever content exceeds that defined space.

Example:

We’ll design a simple page that displays a sidebar table of contents when the page is scrolled down and hides it when the user returns to the top.

First, make HTML a container-type of scroll-state:

html {
  container-type: scroll-state;
}

Style the table of contents section and position it at the top right of the page.

.toc {
  position: fixed;
  top: 5rem;
  left:90%;
  align-self: start;
  opacity: 0;
}

You positioned the table of contents to the right of the page and fixed it to the top of the screen by 5rem. You also hid it by default by adding an opacity of 0.

Now you need to check if the container scrollbar can be scrolled to the top of its container. If true, unhide the table of contents:

@container scroll-state(scrollable: top) {
  .toc {
    transition: opacity 0.4s linear;
    opacity: 1;  
  }
}

You defined a container query, then followed it with the scroll-state keyword. This checks whether the scrollbar on a parent element can be scrolled.

Use scrollable to define the scroll direction. Setting it to top tests whether the container can scroll upward, while setting it to bottom tests whether it can scroll downward.

You can see that as long there's a space for scrolling to the top, the table-of- contents will be visible, but when you can't scroll to the top, the table of contents will be hidden.

You can also check whether you can scroll in both top and bottom directions using the y specifier to specify the container's top and bottom scroll directions.

Example:

You can see from the example that the table of contents will always be visible on the screen because the scroll bar can scroll both ways (top and bottom)

Stuck Queries

Stuck queries are used to inspect the element that have a position of sticky and applies styles when the element is stuck on the page.

These are great if you want to style elements that have a sticky position and you want them to have a certain style(s) when they get stuck on the page.

Example:

We'll design a simple navbar that will change its box-shadow when its stuck at the top of the screen.

Here, you'll set a wrapper element that wraps nav and makes it a container query, and also gives it a position of sticky to be able to track if it is stuck at the top of the screen.

header {
  position: sticky;
  top: 0rem;
  container-type: scroll-state;
}

You can then define @container to execute when the element gets stuck on the screen:

@container scroll-state(stuck:top) {
  nav {
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.55),
      0 1px 0 rgba(255, 255, 255, 0.06) inset;
    background-color: #0a0a0a;
  }
}

You checked for scroll-state behavior and then, inside the parenthesis, checked if the element with position: sticky is stuck at top of the page. If true, the background color of the nav changes and a box-shadow is added.

Final results should look like this:

By default, the nav doesn't have a box-shadow, but when you scroll and the nav element gets stuck at the top of the page, box-shadow and other rules defined within the stuck @container query definition will be applied to the nav element.

Wrapping Up

In this article, you learned how to set up and work with container queries to make more customizable and responsive designs, and some cool scroll effects.

The examples provided in this guide are not the only things you can do with container queries. The examples were designed to help you think of other alternatives and contexts where you can apply container queries to match your exact needs and design.

Container queries have high browser support, which is currently at 95% and supported in all major browsers.

My name is Ramazan, and I'm a front-end developer and enthusiast who loves looking at familiar things in web development from new perspectives.

You might have heard of functional programming (FP). It's a paradigm characterised by the use of pure functions and the preservation of data immutability. There are even languages in which FP principles prevail, like Haskell, OCaml, and Elixir. Other languages like JavaScript, Python, and C++ also support this approach, although they're not limited to it.

But an attentive reader will look at the title and ask: "Functional programming is fine. But what does Atomic CSS have to do with it?" I'll answer that now!

The thing is, back when the atomic approach first appeared, it had another name: Functional CSS. Some people still use it quite often today to avoid confusion with other terms with the same name. But why is this approach to writing CSS called functional?

That's the question I'll try to answer in this article. First, I'll describe the basic principles of FP. Then, I'll talk about the basics of Atomic CSS (which I'll refer to here as ACSS), drawing analogies with functional programming. I'll also try to use simple examples to show what problems you can solve by applying Atomic CSS to styling.

When preparing the materials for this article, I relied a lot on this tutorial on FP and this one on Functional CSS.

Well, let's get started!

Prerequisites

To follow along with this article, all you need is a basic understanding of HTML, CSS, and JavaScript. There are also some examples where we'll use the Atomic CSS framework mlut, but you don't have to know its syntax because I've provided the text with the equivalent CSS styles.

What We'll Cover:

1. The Basic Principles of Functional Programming

   • Pure Functions

   • Immutability

   • Function Composition

2. How the Principles of FP Meet Their Incarnation in Atomic CSS

   • Purity

   • Immutability in ACSS

   • Composition

3. Conclusion

The Basic Principles of Functional Programming

Functional programming is a broad field that has been the subject of numerous complex articles and an entire scientific journal. So in my article, I'll focus on exploring only the basic principles of FP and drawing analogies with them in Atomic CSS.

This approach is based on the idea that all the actions we need to perform in a program should be done by calling certain functions and their compositions.

Let me outline the main concepts I'll use to explain the core idea of this approach:

1. Pure functions

2. Immutability

3. Function composition

Pure Functions

A function is called pure if it:

• returns the same value for the same input parameters;

• has no side effects (changes to external values or entities).

Here are a couple of examples to illustrate this:

let c = 10;
let s = 0;

// Pure function
function pureSum(a,b) {
  return a + b
}

// Impure function
function notPureSum (a) {
  s = a + c
  return s
}

The first function is pure because if we enter the same arguments, we'll get the same result. Also, this function doesn't change any global variables and doesn't mutate objects.

The second function doesn't meet the concept of purity on both points. It changes the external variable s and uses another external variable c for calculations, which can change.

Pure functions allow you to write more predictable code. An application can grow and a function with an implicit parameter that can change over time can lead to great difficulties in debugging and maintaining the codebase.

Immutability

Immutability is a principle which states that data objects shouldn't change after they're created. To make changes to data, you need to create a new instance of it and then work with that new copy.

At first glance, it may seem that this approach limits flexibility in the development process and reduces the speed of the program. But in reality, if the language or runtime has optimisations for immutable data, adhering to this principle helps you avoid many errors and use parallel calculations.

Here's a fairly simple example: let's take a React component that renders a task in a to-do list. The state of the task is described by an object. And in order for React to correctly redraw the state of the task component when the user changes something in it, it's necessary to pass as the new state not the mutated old object, but a new instance of the object with the current state. Here is the example where an immutable object is used for the state of the to-do:

import { useState } from "react";

function TodoItem() {
  const [todo, setTodo] = useState({
    text: "Write article",
    done: false
  });

  const toggleDone = () => {
    setTodo({
      ...todo,
      done: !todo.done
    });
  };

  return (
    <div>
      <span>
        {todo.text} — {todo.done ? "✅" : "❌"}
      </span>
      <button onClick={toggleDone}>
        Toggle
      </button>
    </div>
  );
}

export default TodoItem;

Here we'll see that clicking on the button will lead to changes in the state of the to-do and will cause re-rendering of the component. But we could define the function toggleDone() in a different way using mutations of the object:

const toggleDone = () => {
  todo.done = !todo.done;
  setTodo(todo);
};

With such an event handler, the effect will not work because the link to the object is still the same, even though the object itself was mutated.

Function Composition

Function composition involves using the result of one function as an argument for another function. Here's an example of a program that capitalises the first letter of each word:

function compose(f1, f2) {
  return function (str) {
    return f1(f2(str));
  }
}

function makeFirstCapital(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function upperEveryFirst(str) {
  return str.split(' ').map(makeFirstCapital).join(' ');
}

function lower(str) {
  return str.toLowerCase();
}

const capitalize = compose(upperEveryFirst, lower);
const string = 'this sTring should be Capitalized'

console.log(capitalize(string)) // 'This String Should Be Capitalized'

Here, we have defined the function compose(f1, f2), which returns the composition of the functions passed to it in arguments. Next, we use this function to create the function capitalise(), which will capitalise only the first letters of words by composing the functions lower() and upperEveryFirst(). The first one is executed first and returns a string with all lowercase letters to the second function as an argument. The second function capitalises the first letter of each word.

In large projects and when complex calculations are required, such compositions can be larger, and the logic in them can be much richer. In such cases, this approach to calculations helps break down very large transformations into a series of relatively simple and compact functions that are applied one after the other. This makes it easier to develop, refactor, and debug code.

How the Principles of FP Meet Their Incarnation in Atomic CSS

Now that we know a little about functional programming, let's try to answer the question: ‘What does Atomic CSS have to do with it?’ Let's draw an analogy between these approaches at the level of the principles described above.

What is Atomic CSS?

But first, let's take a moment to explain what Atomic CSS is. It's a methodology of styling layouts in which we use small Atomic CSS rules, each of which performs a single action. These classes are called utilities. They usually apply one CSS property, but not necessarily just one.

For example, in the mlut framework, the Bgc-red utility corresponds to the background-colour: red property, and the -Sz50p utility corresponds to two properties at once: width: 50% and height: 50%.

Modern Atomic CSS frameworks, such as mlut and Tailwind, use a so-called JIT engine. This is a component that generates CSS based only on the utilities you used in your markup.

Purity

Purity in CSS is determined by which selectors, or more specifically, classes, are used to style elements. In clean CSS, the behaviour of an element should be determined solely by the classes that are attached to it in the class attribute. This means that, ideally, a stylesheet should not contain selectors such as section or div > ul.

Firstly, they set too general rules, which are likely to be broken or supplemented in one part of the project or another. So when we style specific elements, we'll have to constantly keep these styles in mind in order to understand how to achieve the necessary styling without spoiling anything.

Secondly, the purity of CSS for each specific element is violated. Let's say we have the following markup:

<button class="greeting">Hello!</button>
<div class="wrapper">
  <button class="greeting">Hello!</button>
</div>

With the CSS styles below:

.wrapper > .greeting {
  background-color: green;
}
.greeting {
  background-color: red;
}

As a result, we get that the first button is red, and the nested one is green. It seems pretty harmless in this simple case, but it will cause inconvenience when the project structure grows significantly.

Here we see that the result of the .greeting class's custom styles depends on where the corresponding element is located. This is similar to a function that produces different results for the same input data depending on where it's called.

Atomic CSS allows you to avoid this effect. In this approach, in most cases, styles are applied only to those elements for which the corresponding classes are specified. If you need to make several identical elements, the same utility is specified in the class attribute of each such element.

A similar example can be rewritten in mlut like this:

<button class="Bgc-red">Hello!</button>
<div>
  <button class="Bgc-green">Hello!</button>
</div>

And JIT-engine will generate the following styles:

.Bgc-red {
  background-color: red;
}

.Bgc-green {
  background-color: green;
}

Here we can see that the styles of elements in this approach will depend only on the classes assigned to them.

It's worth noting here that the mlut syntax allows you to do things that deviate from the strict concept of CSS purity. Sometimes this is necessary to create relatively more complex effects.

Let's say we want to implement a card that changes the background colour of the button inside it when hovered. Then we would need to write the following in mlut:

<div class="-Ctx">
  <button class="^:h_Bgc-red">Greeting</button>
</div>

CSS:

.-Ctx:hover .\^\:h_Bgc-red {
  background-color: red;
}

Immutability in ACSS

By CSS immutability, I mean that element styles are not rewritten. Immutability in ACSS means that utilities do not typically mutate each other.

For example, in BEM (Block Element Modifier), the main styles are set by a block or element, and a modifier mutates these styles. In other approaches that use combined selectors, such mutations occur more often and less explicitly.

Let me give you a simple example. Suppose we have a product card that can be in its default state or in a highlighted state. In BEM it would look like this:

<div class="product-card">Card 1</div>
<div class="product-card product-card--selected">Card 2</div>
<div class="product-card">Card 3</div>

.product-card {
  background-color: red;
  padding: 5px;
}

.product-card--selected {
  background-color: green;
}

In this example, we see that the product-card class sets the default background colour of the card to red. And in order to somehow mark the selected card with a different background colour we have to add a modifier class that changes the colour from red to green. It does this by rewriting the background-color property, that is by mutating the block styles.

In the Atomic CSS approach, this problem is solved because utilities allow you to set CSS properties independently of each other and apply modifications without resorting to mutation.

Here's what this example would look like if you used mlut:

<div class="P5 Bgc-red">Card 1</div>
<div class="P5 Bgc-green">Card 2</div>
<div class="P5 Bgc-red">Card 3</div>

.P5 {
  padding: 5px;
}

.Bgc-red {
  background-color: red;
}

.Bgc-green {
  background-color: green;
}

Composition

Functional programming makes extensive use of function composition. In Atomic CSS, function composition is analogous to utility composition when styling elements. Just as in FP we obtain complex behaviour through the sequential application of a set of simple functions, so in ACSS we can obtain non-trivial styling through a set of simple utilities.

As an example, I'll show a simple smiley face made using only Atomic CSS:

<div class="-Sz150 Bgc-yellow Bdrd100p M-a Ps">
  <div class="-Sz20p Bgc-gray Bdrd100p Ps-a T30p L20p"></div>
  <div class="-Sz20p Bgc-gray Bdrd100p Ps-a T30p R20p"></div>
  <div class="W50p H40p Bdb5;s;gray Bdrd100p Ps-a T40p L25p"></div>
</div>

.-Sz150 {
  width: 150px;
  height: 150px;
}

.Bgc-yellow {
  background-color: yellow;
}

.Bdrd100p {
  border-radius: 100%;
}

.M-a {
  margin: auto;
}

.Ps {
  position: relative;
}

.-Sz20p {
  width: 20%;
  height: 20%;
}

.Bgc-gray {
  background-color: gray;
}

.Ps-a {
  position: absolute;
}

.T30p {
  top: 30%;
}

.L20p {
  left: 20%;
}

.R20p {
  right: 20%;
}

.W50p {
  width: 50%;
}

.H40p {
  height: 40%;
}

.Bdb5;s;gray {
  border-bottom: 5px solid gray;
}

.T40p {
  top: 40%;
}

.L25p {
  left: 25%;
}

This is how our result will look:

Thus, by applying the utilities one after another, we even made some small CSS art.

Conclusion

To sum up, I will say that Atomic CSS truly embodies the basic principles of functional programming. Of course, not literally – but in the sense that is relevant for front-end developers and layout designers.

I would be happy to hear your additions and objections – it'll be interesting to read and think about them.

Finally, I would like to say: look at familiar things with a fresh perspective. And, as usual, I wish you success on your exciting journey of front-end development!

Then you experiment with margin: auto;, which centers a div horizontally but doesn’t help with vertical alignment. Before long, you find yourself searching through solutions involving Flexbox, Grid, transforms, and other techniques that appear complicated and inconsistent.

The reality is that CSS does not provide a single universal property that can center everything. Instead, each layout scenario requires the right method, and understanding when to use each technique is the key to mastering CSS centering.

Table of Contents

• First: Understand the Two Types of Centering

• Method 1: Center Inline Content (text, inline elements)

• Method 2: Center a Block Horizontally

• Method 3: Perfect Center (Horizontal + Vertical) with Flexbox

• Method 4: Center Using CSS Grid (The Easiest Method Ever)

• Method 5: Center with Absolute Position + Transform

• Method 6: Vertical Center Single Line Text

• Method 7: The Table-Cell Method (Old but Useful)

• Quick Decision Guide

• Common Beginner Problems (And Fixes)

• Pro Tips You’ll Use Forever

• Summary

• The 7 Methods You Should Memorize

First: Understand the Two Types of Centering

Before diving into centering techniques, it’s important to understand the two types of centering in CSS, because different methods work along different axes. CSS layouts operate on two axes: Knowing which axis you want to center along helps you choose the right approach.

There are two axes in CSS layout:

When someone says “center this element”, they usually mean one of four things:

• Center text inside a container

• Center a block horizontally

• Center vertically

• Center both horizontally and vertically

Each requires a different solution.

Method 1: Center Inline Content (text, inline elements)

This method centers inline content such as text, links, inline images, and sometimes buttons, using the text-align: center; property. This is the simplest centering method in CSS, but it is often misunderstood because it only affects the content inside a block container, not the container itself.

Example

<div class="box">
  <h2>Hello World</h2>
  <p>This text is centered.</p>
</div>

.box {
  text-align: center;
  border: 2px solid #444;
  padding: 20px;
}

Output

Why It Works

When you apply text-align: center; to a parent element, the browser horizontally aligns all inline and inline-block children within that container. This makes it perfect for centering headings, paragraphs, navigation links, or small inline elements, but it won’t work for block-level elements like divs unless their display is changed to inline-block.

So this will NOT work:

.box {
  width: 300px;
  text-align: center; /* does NOT center the box */
}

Real-world use cases

• Center headings

• Center button labels

• Navigation menus

• Card content alignment

Beginner Mistake

Most people try to center a <div> with text-align: center;. This won’t move the div, only its contents.

Method 2: Center a Block Horizontally

This method centers a block element horizontally using margin: 0 auto;, which is one of the oldest and most reliable CSS techniques. It works by automatically distributing the available horizontal space equally on the left and right sides of the element. When you set the left and right margins to auto, the browser calculates the remaining space in the container and splits it evenly, pushing the element into the center.

Works when:

• Element has a width

• Element is block-level

Example, Center a Card

<div class="card">
  I am centered!
</div>

.card {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #eee;
}

Output

Why It Works

When you set the elements' margins to auto, the browser calculates the remaining horizontal space in the container after accounting for the element’s width. It then distributes this extra space equally between the left and right margins, which pushes the element into the center. This happens automatically, making margin: 0 auto; a simple and reliable way to horizontally center block elements with a fixed width.

|----auto----|---element---|----auto----|

Browser calculates: left margin = right margin. So the element sits in the middle.

Important Rule

If width is not defined, it won't work:

.card {
  margin: auto; /* won't center , takes full width */
}

Because block elements default to width: 100%;.

Real-world use cases

• Center website layout container

• Center forms

• Center blog content area

Method 3: Perfect Center (Horizontal + Vertical) with Flexbox

This method uses Flexbox to center an element both horizontally and vertically, making it one of the most reliable modern CSS solutions. When you set a container to display: flex;, you activate the Flexbox layout system, which gives you powerful alignment controls. The property justify-content: center; centers the content along the main axis (usually horizontal), while align-items: center; centers it along the cross axis (usually vertical).

Example, Center Login Box

<div class="page">
  <div class="login">
    Login Form
  </div>
</div>

.page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  padding: 40px;
  background: white;
  border: 2px solid #333;
}

Output

Why It Works

Flexbox treats the container and its children as a flexible layout system, automatically distributing space along the main and cross axes. This allows any element, regardless of its size, to sit perfectly in the middle of the container, making it ideal for centering modals, hero sections, and other dynamic content.

This Works Regardless Of:

• Unknown height

• Unknown width

• Responsive layouts

• Dynamic content

That’s why it’s widely used today.

Real-world use cases

Developers commonly use Flexbox centering to place important interface elements directly in the middle of the screen. For example, it helps center modal dialogs, loading spinners, hero section content, and other full-screen UI components. Hence, they remain visually balanced and easy for users to notice, regardless of screen size.

Method 4: Center Using CSS Grid (The Easiest Method Ever)

CSS Grid offers one of the simplest ways to center elements both horizontally and vertically. By setting a container to display: grid; and applying place-items: center;, you can position any child element perfectly in the middle with just a few lines of code. This method works because Grid provides built-in alignment controls that automatically handle positioning along both axes.

Example

<div class="wrapper">
  <div class="box">Centered!</div>
</div>

.wrapper {
  height: 100vh;
  display: grid;
  place-items: center;
}
.box {
  width: 200px;
  padding: 30px;
  text-align: center;
  background: white;
  border: 2px solid #333;
}

Output

In this example, the .wrapper acts as the grid container, and the .box element becomes a grid item. The property place-items: center; automatically aligns the box in the middle of the container, both horizontally and vertically.

100vh means 100% of the viewport height, which is the full height of the visible browser window. When you set height: 100vh; on a container, it expands to fill the entire screen from top to bottom.

Why It Works

The property place-items: center is actually shorthand for two grid alignment properties:

align-items: center;
justify-items: center;

• align-items controls vertical alignment inside the grid.

• justify-items controls horizontal alignment.

By combining both in one line, Grid centers elements in both directions automatically without needing additional layout rules.

When to Prefer Grid Over Flexbox

CSS Grid is ideal when you only need simple centering and don’t require complex layout control. It keeps your code short and easy to read.

Use Grid when:

• You only need to center a single element

• You are not building complex layouts

• You want the simplest and cleanest code

Use Flexbox when:

• You are aligning multiple items

• Layout direction matters (row vs column)

• You need spacing control between elements

Method 5: Center with Absolute Position + Transform

This centers an element using absolute positioning combined with CSS transforms, and it works even when you are not using Flexbox or Grid. In this approach, you position the element with position: absolute; and move it to the middle of its parent using top: 50%; and left: 50%;.

Example, Center Popup

<div class="container">
  <div class="popup">I'm centered</div>
</div>

.container {
  position: relative;
  height: 400px;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Output

Why It Works

1. top: 50% moves the top edge to the middle

2. left: 50% moves the left edge to the middle

3. translate(-50%, -50%) shifts the element back by half its size

So the center becomes the element’s midpoint, not the corner.

Explanation

Without transform: The element corner sits at the center, which means this places the top-left corner of the element at the center point.

To fix that, you apply transform: translate(-50%, -50%);, which shifts the element back by half of its own width and height. This adjustment ensures the actual center of the element aligns with the center of the container. Developers often use this technique for overlays, modals, tooltips, and floating UI components.

Real-world use cases

• Modals

• Tooltips

• Floating labels

• Overlays

Method 6: Vertical Center Single Line Text

This method vertically centers single-line text inside a container by using the line-height property. When you set the line-height to the same value as the container’s height, the browser places the text in the vertical middle of that space because the line box expands to fill the container evenly.

Example, Center Text in Button

<button class="btn">Click Me</button>

.btn {
  height: 60px;
  line-height: 60px;
  text-align: center;
}

Output

Why It Works

This technique works best for elements with a fixed height, such as buttons, badges, or navigation items. However, it only works reliably when the text stays on one line, because multiple lines will break the vertical alignment.

Limitations

The main limitation of using line-height to vertically center text is that it only works for single-line text. If the text wraps onto multiple lines, the line-height no longer matches the container height for each line, causing the vertical centering to break.

This makes the method unsuitable for paragraphs, headings, or any content that can expand beyond one line, so it’s best reserved for buttons, labels, or other fixed-height, single-line elements.

Method 7: The Table-Cell Method (Old but Useful)

This method uses the table-cell technique to center content vertically and horizontally, a reliable approach for older CSS layouts and email templates. By setting a container to display: table; and its child element to display: table-cell; with vertical-align: middle; and text-align: center;, The browser treats the child like a table cell and automatically centers its content.

Example

<div class="outer">
  <div class="inner">Centered</div>
</div>

.outer {
  display: table;
  width: 100%;
  height: 300px;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Output

How It Works

• The .outer container acts as a table.

• The .inner element behaves like a table cell.

• Table cells automatically respect vertical alignment rules.

• Combining vertical-align: middle; and text-align: center; perfectly centers the content both vertically and horizontally.

Why Use This Method

• It works in older browsers that don’t fully support Flexbox or Grid.

• It’s especially useful in email templates or legacy layouts.

• No knowledge of height calculation or transforms is required.

Quick Decision Guide

Common Beginner Problems (And Fixes)

Problem 1: “margin auto not working.”

You forgot the width.

width: 300px;
margin: auto;

Problem 2: “align-items center not working.”

Parent needs height.

height: 100vh;

Problem 3: “absolute centering weird position.”

Parent missing positioning.

parent { position: relative; }

Problem 4: Flexbox vertical centering fails

Check direction:

flex-direction: column;

Now vertical/horizontal axes swap!

Pro Tips You’ll Use Forever

1. Flexbox = alignment tool

2. Grid = placement tool

3. Margin auto = layout tool

Different tools, different jobs.

Remember This Rule

• If you are centering one thing, use Grid

• If centering many things, use Flexbox

Summary

CSS centering often feels difficult because beginners expect a single magic property that works in every situation, but no such property exists. Instead, CSS provides multiple layout systems, each designed to solve specific alignment problems.

These include inline alignment for text and inline elements, flow layout for standard block elements, Flexbox for flexible row or column arrangements, Grid for two-dimensional layouts, and positioned layouts for absolute or fixed elements. Once you understand which system applies to your scenario, centering becomes predictable and much easier to implement.

The 7 Methods You Should Memorize

1. text-align: center

2. margin: 0 auto

3. Flexbox centering

4. Grid place-items: center

5. Absolute + transform

6. Line-height trick

7. Table-cell fallback

If you’ve ever struggled to center something with CSS or tried to make columns line up nicely, Flexbox simplifies this dramatically. With just a few properties, you can build modern layouts that “flex” to different screen sizes, without needing to write a bunch of custom media queries.

Developer and teacher Indra (CodeWithIndra) will walk you through every Flexbox property step by step. You’ll learn how to align items along the main and cross axis, reorder elements without changing the HTML, control how items grow and shrink, and finally understand what flex-grow, flex-shrink, and flex-basis are really doing. He also shows real examples from sites like GitHub and DataDog, then demonstrates how to recreate pieces of their layout.

The course ends with two small projects: centering an element vertically and horizontally (the thing everyone Googles at some point) and building a clean navigation bar using only Flexbox.

If you want to improve your front end development skills, this course is a good way to invest a couple hours of your weekend. [2 hour YouTube course]:

PWAs bring the power of the web to your fingertips with the experience of a mobile app. Even better? If you lose internet connection while on the go, the app can still function, showing your previously loaded data and getting updates once you’re back online.

In this tutorial, you’ll learn how to implement a service worker with WorkBox in a weather app using HTML, CSS, and JavaScript. We’ll start by understanding what a PWA is, the core components behind the scenes, especially service workers, and how to use Workbox to supercharge your app with offline capabilities.

Table of Contents

• What We’ll Cover

• What is a Progressive Web App (PWA)?

• What Makes a Web App “Progressive”?

• Components of a PWA

• What is a Service Worker in PWA?

• Why Use Workbox Instead of Manual Service Workers?

• Introduction to WorkBox

• Project Setup

• Creating the Offline HTML Structure

• Styling with CSS

• How to Set Up app.js and config.js

• How to Create a Manifest File

• How to Add WorkBox to Your service-worker.js File

• How to Create your Service Worker in the service-worker.js File

• How to Set Up App Installation

• How to Install the Weather App

• Conclusion

What We’ll Cover

• Setting Up the Project: We'll build a simple weather app using HTML, CSS, and JavaScript. This approach is perfect for this tutorial because it keeps things simple and accessible while focusing on core PWA concepts without the added complexity of frameworks like React or Vue.

• Turning the App into a PWA: Next, we’ll walk through the concept of a Progressive Web App, covering the key features and best practices of PWAs.

• Implementing Service Worker via WorkBox: Finally, we’ll dive deeper into how service workers function and explore why using Workbox simplifies the process.

Here’s what the final application will look like:

Audience

This tutorial is for web developers of all levels. Whether you're new to Progressive Web Apps (PWAs) or just starting to explore service workers, this guide will walk you through the core concepts and demonstrate why using a Google-backed library like Workbox to implement service workers can be more efficient than manual implementation.

Prerequisites

Before you begin

1. Get a free API key from the OpenWeatherAPI website

2. Make sure you’re familiar with HTML, CSS, and JavaScript.

3. If you’re new to PWAs, you might want to read some introductory articles to get a quick overview.

   • Progressive web apps

   • Workbox

What is a Progressive Web App (PWA)?

A PWA is a web application that combines the best of web and mobile apps. It’s built using standard web technologies like HTML, CSS, and JavaScript, but it behaves and feels like a native mobile app on your phone or tablet.

Think of apps like Instagram Web, Twitter Lite, or Spotify Web Player. Even though you’re not using a native app from an app store:

• You can still scroll your feed, view media, and send messages.

• It works even on slow or unstable networks.

• You can “install” it on your home screen and launch it like a regular app.

• You even get push notifications just like a mobile app!

With PWAs, you get the reach of the web and the feel of an app without the heavy storage or installation process.

What Makes a Web App “Progressive”?

A PWA is not just any website. It’s built to progressively enhance the user experience, depending on their device and browser capabilities. Here are the core characteristics that define a PWA:

• Responsive: Works on all screen sizes, that is, phones, tablets, and desktops.

• Reliable: Loads instantly, even when offline or on poor networks.

• Installable: Can be added to the home screen without needing an app store.

• Engaging: Supports features like push notifications and background sync.

Components of a PWA

Before your web app can be considered a PWA, it must include the following:

A Web Application Manifest

The web app manifest is a JSON file that tells the browser about your web app, how it should appear, and behave when installed on a user's device.

Think of it like your app’s business card. It includes details like:

• App name and short name – How your app is labeled on the home screen or app list.

• Icons – Images used for app icons on different screen sizes and resolutions.

• Theme color and background color – Defines the look of your app’s UI and loading screen.

• Start URL – The page that opens when the app is launched.

• Display mode – Controls whether the app opens in a browser tab, fullscreen, or a native-like window.

• Screenshots – Optional preview images that show how your app looks on different devices in app stores or installation prompts.

A Service Worker

This is a script that runs in the background. It handles offline behaviour, caching, background sync, and push notifications needed to make your PWA function.

More details about the service worker will be discussed later in this article.

HTTPS

PWAs must be served over HTTPS. This is not optional. Here’s why:

• It protects users by ensuring secure data transfer.

• It enables important features like service workers and push notifications.

• Browsers won’t allow service workers to register on non-secure origins.

If you're testing locally, you can use localhost (which is treated as secure), But for production, your site must have an SSL certificate.

What is a Service Worker in PWA?

In PWAs, a service worker is a JavaScript file that runs in the background, separate from your main app, and acts like a network proxy. It can:

• Cache resources and serve them offline

• Intercept network requests and apply caching strategies

• Handle background syncs

• Manage push notifications

Think of it as your app’s behind-the-scenes assistant—makes it load fast, works offline, and stays updated, even when you're not looking.

Why Use Workbox Instead of Manual Service Workers?

Service workers are essential in creating a PWA, but getting started with them can be challenging. Writing service worker code from scratch can often be tedious and prone to errors. For example, you'd need to:

• Manually configure caching strategies

• Handle service worker updates

• Write and maintain a lot of repetitive boilerplate code

Workbox, a library from Google, makes things easier by letting developers focus on what matters, without worrying about the complicated parts of service workers.

However, it’s still important to understand how service workers function, since they handle some complex tasks under the hood.

Here are key things a service worker (with or without Workbox) does:

• Install event: Set up cache

• Activate event: Clean up old caches

• Fetch event: Intercept network requests and serve from cache

With Workbox, these are wrapped in easy-to-use functions.

Introduction to WorkBox

Workbox is a collection of libraries that helps developers build efficient service workers quickly, with best practices built right in. It supports strategies like:

• CacheFirst: Load from cache, fall back to network

• NetworkFirst : Try network, fall back to cache

• StaleWhileRevalidate: Serve from cache and update in the background

Understanding Workbox Modules

Workbox is more than just a tool. It is a collection of powerful modules, each designed to simplify different parts of working with service workers. These modules are flexible and can be used in three key contexts:

• Service Worker Context – Inside your service worker file, where you handle caching, routing, and other background tasks.

• Window Context – Inside your main application (the client-side JS), where you register and communicate with the service worker.

• Build Tools Integration – Tools like Webpack use Workbox to generate service worker files and precache manifests during your build process.

Let’s break down some of the most popular and essential modules Workbox offers:

1. workbox-routing

This module handles routing network requests within your service worker. Think of it like a traffic director that listens for fetch events and decides what to do with them.

Use case: Route API requests to the network while routing static asset requests to the cache.

2. workbox-strategies

This is where caching strategies like CacheFirst, NetworkFirst, and StaleWhileRevalidate are used. It provides a clean and consistent API for handling how your app responds to different requests.

Use case: Apply different caching behaviours for images, fonts, or dynamic data with minimal code.

3. workbox-precaching

This module handles precaching by storing static assets during the service worker’s install phase. It makes it easy to cache files ahead of time and ensures that updates are managed efficiently.

Use case: Preload essential assets (like HTML, CSS, and logo images) so your app loads instantly, even offline.

4. workbox-expiration

It is used as a plugin alongside caching strategies. This module adds smart cache expiration. You can automatically remove old or excessive items from the cache based on how long they've been stored or how many items exist.

Use case: Keep your cache size under control without manually tracking and deleting outdated files.

workbox-window

This module is designed for the browser (window) side of your app. It simplifies service worker registration and allows you to communicate with the service worker from your page easily.

Use case: Detect when a new service worker is available and prompt the user to refresh the app to update.

You can use WorkBox via:

• npm

• CDN (which we'll use here for simplicity)

Project Setup

Let's start by creating our project structure:

weather-pwa/
├── index.html
├── style.css
├── js/
│   ├── app.js
│   └── install.js
├── service-worker.js
├── images/
│   └── [your image files and folders here]
├── manifest.json
├── config.js  
└── offline.html

The HTML Structure

First, let's build our index.html file:

<!DOCTYPE html>
<html lang="en">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/images/logo.png" type="image/png">
        <meta name="description" content="Simple Weather Progressive Web App" />
        <link rel="stylesheet" href="/styles.css" />
        <title>Weatherly</title>
    </head>


<body>
    <header class="header">
        <img loading="lazy" class="logo" src="images/logo.png" alt="Weatherly Logo">
        <h1>Weatherly</h1>
    </header>

    <main class="main">
        <div class="weather-card">
            <div class="location-container">
                <input type="text" id="location-input" placeholder="Enter city name">
                <button id="search-btn">Search</button>
                <button id="locationBtn">📍 Use My Location</button>
                <button id="installBtn" style="display: none;">Install App</button>
            </div>

            <div id="offline-message" class="offline-message">
                You are currently offline. Weather data may not be up-to-date.
            </div>


            <div class="error">
                <p id="error-message"></p>
            </div>

            <div id="weather-container" class="weather-container">
                <h3>Your last searched location weather:</h3>
                <div class="location-info">
                    <h2 id="city"></h2>
                    <p id="date"></p>
                </div>

                <div class="current-weather">
                    <img loading="lazy" id="weather-icon" src="" alt="Weather icon">
                    <div class="temperature-container">
                        <h3 id="temperature"></h3>
                        <p id="weather-description"></p>
                    </div>
                </div>

                <div class="weather-details">
                    <div class="detail">
                        <img loading="lazy" id="humidity-icon" src="/images/humidity.png" alt="Humidity icon">
                        <span class="label">Humidity</span>
                        <span id="humidity" class="value"></span>
                    </div>
                    <div class="detail">
                        <img loading="lazy" id="wind-icon" src="/images/wind.png" alt="Wind icon">
                        <span class="label">Wind</span>
                        <span id="wind" class="value"></span>
                    </div>
                </div>
            </div>

            <!-- Your location weather -->
            <div class="location-weather">
                <h3>Your location's weather:</h3>
                <div class="weather-info" id="weatherInfo">

                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>Made with ❤️ by <a href="www.linkedin.com/in/damilola-oniyide">Damilola Oniyide</a>
    </footer>
    <script type="module" src="/js/app.js" defer></script>
</body>
</html>

Creating the Offline HTML Structure

The offline.html is the page that users will see when they lose network connection and try to navigate to a page that isn’t cached.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#2196f3">
  <title>Weatherly - Offline</title>
  <link rel="stylesheet" href="/styles.css">
  <style>
    .offline-icon {
      font-size: 5rem;
      margin-bottom: 1.5rem;
      color: #2196f3;
    }

    .offline-message {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .offline-subtext {
      font-size: 1rem;
      margin-bottom: 2rem;
      color: #666;
    }

    .retry-button {
      padding: 0.75rem 1.5rem;
      background-color: #2196f3;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .retry-button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <header>
    <h1>Weatherly</h1>
  </header>

  <main>
    <div class="app-container">
      <div class="weather-card">
        <div class="offline-container">
          <div class="offline-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
              <path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm-2.715 5.933a.5.5 0 0 1-.183-.683A4.498 4.498 0 0 1 8 9.5a4.5 4.5 0 0 1 3.898 2.25.5.5 0 0 1-.866.5A3.498 3.498 0 0 0 8 10.5a3.498 3.498 0 0 0-3.032 1.75.5.5 0 0 1-.683.183zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
            </svg>
          </div>
          <h2 class="offline-message">You're offline</h2>
          <p class="offline-subtext">Please check your internet connection and try again.</p>
          <button class="retry-button" onclick="window.location.href='/'">Retry</button>
        </div>
      </div>
    </div>
  </main>

  <footer>
    <p>Made with ❤️ by Damilola Oniyide</p>
  </footer>
</body>
</html>

Styling with CSS

Now, let's create our style.css file for a responsive and user-friendly design:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.header {
    background-color: #2196f3;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header h1 {
    font-size: 1.5rem;
}


.header img {
    width: 55px;
    height: 55px;
    border: #ffff 1px solid;
    margin-right: 4px;
    border-radius: 10%;
}


.main {
    padding: 1rem;
    max-width: auto;
    margin: 0 auto;
}

.weather-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 3rem;
    margin-top: 1rem;
}

/* Location input styles */
.location-container {
    display: flex;
    margin-bottom: 1.5rem;
    justify-content: center;
}

#location-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    max-width: 240px;
}

#location-input:focus {
    outline: none;
    border-color: #2196f3;
}
#location-input::placeholder {
    color: #999;
}   

#search-btn, #locationBtn {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
    margin-right: 2.5px;
}


#installBtn {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;

}

#search-btn:focus, #locationBtn:focus, #installBtn:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}
#search-btn:hover, #locationBtn:hover, #installBtn:hover {
    background-color: #1976d2;
}

.error, .loading {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
    display: none;;
}

.error-message {
    color: #d32f2f;

}
/* Weather display styles */
.weather-container {
    display: none 
}

#weather-icon {
    width: 1000px; 
    height: 100px;
  }

.current-weather{
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.location-weather{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
}


#weather-icon {
    width: 80px;
    height: 80px;
    margin-right: 1rem;
}

.location-info {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.location-info h2,  .current-weather h3, .weather-container h3, .location-weather h3 {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}



.location-info p, .current-weather p {
    color: #666;
    font-size: 1.4rem;
}

.temperature-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.temperature-container h3 {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}

.temperature-container p {
    color: #666;
    text-transform: capitalize;
}

.weather-details {
    display: flex;
    justify-content: center;
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 1rem;
}

#humidity-icon, #wind-icon{
    width: 40px;
    height: 40px;
}

.detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
    text-align: center;
}

.label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.value {
    font-size: 1.2rem;
    font-weight: 500;
}

/* Error and offline message styles */
.error-message {
    color: #d32f2f;
    text-align: center;
    margin-top: 1rem;
    display: none;
} 

.offline-message {
    background-color: #ffab91;
    color: #7f0000;
    padding: 0.75rem;
    text-align: center;
    margin-top: 1rem;
    border-radius: 4px;
    display: none;
}


/* 5 days forecast weather */
.forecast-container {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
}

.forecast-item {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem 4rem;
    text-align: center;
}



footer {
    background-color: #2196f3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 0;
}

footer p, footer a {
    color: #f9f9f9;
    font-weight: 500;
}
/* Responsive styles */
@media (max-width: 480px) {
    .header h1 {
        font-size: 1.2rem;
    }

    .location-container {
        flex-direction: column;
        align-items: center;
        gap: .6rem
    }


    .current-weather {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .weather-container h3,  .location-weather h3, .forecast h3 {
        font-size: 1.5rem;
    }

    #weather-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .forecast-container {
        flex-direction: column;
        align-items: center;
    }
}

How to Set Up app.js and config.js

Now, let's create our app.js file to add functionality to the weather app. Before proceeding, ensure you’ve obtained your API key from OpenWeather. For best practice, store your API key in a separate file like config.js to keep things organized and avoid hardcoding sensitive data.

Here's what your config.js should look like:

export const CONFIG = {
    WEATHER_API_KEY: "WRITE-YOUR-API-KEY-HERE",
};

Ensure you add the config.js file to .gitignore to avoid leaking sensitive information on a public platform like GitHub.

Now let’s move to app.js. This is where the main logic of your weather app will live. You can now reference your API key using Weather_API_KEY from the config.js file.

Below is the structure of your app.js file:

import { CONFIG } from './config.js';
const BASE_URL = `https://api.openweathermap.org/data/2.5/weather?&appid=${CONFIG.WEATHER_API_KEY}&units=metric&q=`;

const cityName = document.getElementById('location-input');
const searchButton = document.getElementById('search-btn');
const weatherIcon = document.getElementById('weather-icon');
const locationBtn = document.getElementById('locationBtn');
const weatherInfo = document.getElementById('weatherInfo');


function getWeatherIcon(condition) {
  switch (condition) {
    case "Clear":
      return "images/weather-icons/clear.png";
    case "Clouds":
      return "images/weather-icons/clouds.png";
    case "Drizzle":
      return "images/weather-icons/drizzle.png";
    case "Rain":
      return "images/weather-icons/drizzle.png";
    case "Mist":
      return "images/weather-icons/mist.png";
    case "Snow":
      return "images/weather-icons/snow.png";
    default:
      return "images/weather-icons/default.png";
  }
}
//Search for weather by city name
async function checkWeatherBySearch(city){
    if(city.length == 0) {
        document.getElementsByClassName('error')[0].style.display = 'block';
        document.getElementsByClassName('error')[0].innerHTML = "Please enter a city name!";
        document.getElementsByClassName('error')[0].style.color = 'red';
        document.getElementById('weather-container').style.display = 'none'; 
        return;
    }
    const response = await fetch(BASE_URL + city);
    document.getElementsByClassName('error')[0].style.display = 'block';
    document.getElementsByClassName('error')[0].innerHTML = "Wait a sec, your location's data will be displayed soon!";

    if (response.status == 404) {
        document.getElementsByClassName('error')[0].style.display = 'block';
        document.getElementsByClassName('error')[0].innerHTML = "City not found! Please enter a valid city name.";
        document.getElementsByClassName('error')[0].style.color = 'red';
        document.getElementById('weather-container').style.display = 'none';       
    } else {
      const data = await response.json();
      document.getElementById('weather-container').style.display = 'block';
      document.getElementsByClassName('error')[0].style.display = 'none';
      localStorage.setItem('lastCity', city);
      document.getElementById('city').innerHTML = data.name;
      document.getElementById('date').innerHTML = new Date(data.dt * 1000).toLocaleDateString();
      document.getElementById("temperature").innerHTML = Math.round(data.main.temp) + "°C";
      document.getElementById("humidity").innerHTML = data.main.humidity + "%";
      document.getElementById("wind").innerHTML = data.wind.speed + "m/s";
      document.getElementById('weather-description').innerHTML = data.weather[0].description;
      const weatherCondition = data.weather[0].main;
      weatherIcon.src = getWeatherIcon(weatherCondition);
    }
}

 // display next 5-day forecast by coordinates
function display5DaysForecast(forecast) {
   const fragment = document.createDocumentFragment(); 
    const forecastWrapper = document.createElement('div');
    forecastWrapper.className = 'forecast';

    const heading = document.createElement('h3');
    heading.innerHTML = "Your location's next 5 days forecast:";

    const container = document.createElement('div');
    container.className = 'forecast-container';

    const addedDates = new Set();
    const today = new Date().toDateString();

    forecast.forEach((entry) => {
      const entryDateObj = new Date(entry.dt * 1000);
      const entryDateStr = entryDateObj.toDateString();

      if (entryDateStr !== today && !addedDates.has(entryDateStr)) {
        addedDates.add(entryDateStr);
        if (addedDates.size > 6) return;


        const condition = entry.weather[0].main;
        const iconSrc = getWeatherIcon(condition);

        const forecastItem = document.createElement('div');
        forecastItem.className = 'forecast-item';

        const date = document.createElement('p');
        date.id = 'date';
        date.innerHTML = `<strong>${new Date(entry.dt * 1000).toLocaleDateString()}</strong>`;

        const icon = document.createElement('img');
        icon.loading = 'lazy';
        icon.id = 'weather-icon';
        icon.src = iconSrc;
        icon.alt = `${condition} icon`;

        const tempContainer = document.createElement('div');
        tempContainer.className = 'temperature-container';

        const temp = document.createElement('h3');
        temp.id = 'temperature';
        temp.innerHTML = `${Math.round(entry.main.temp)} °C`;

        const description = document.createElement('p');
        description.id = 'weather-description';
        description.innerHTML = `${entry.weather[0].description}`;

        tempContainer.appendChild(temp);
        tempContainer.appendChild(description);
        forecastItem.appendChild(date);
        forecastItem.appendChild(icon);
        forecastItem.appendChild(tempContainer);
        container.appendChild(forecastItem);
      }
    });

    forecastWrapper.appendChild(heading);
    forecastWrapper.appendChild(container);
    fragment.appendChild(forecastWrapper);
    weatherInfo.appendChild(fragment); 
}

// Fetch next 5-day forecast by coordinates
function get5DaysForecast(lat, lon) {
    fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${CONFIG.WEATHER_API_KEY}&units=metric`
    )
      .then(res => res.json())
      .then(data => {
        requestIdleCallback(() => {
          setTimeout(() => display5DaysForecast(data.list), 0);
        });        
      })
      .catch(() => {
        weatherInfo.innerHTML = 'Error fetching forecast data.';
    });
}

 // Display current weather data
function displayUserWeather(data) {
    const weatherCondition = data.weather[0].main;
    const iconSrc = getWeatherIcon(weatherCondition);

    weatherInfo.innerHTML = `
      <h2 id="city">${data.name}, ${data.sys.country}</h2>

      <div class="current-weather">
        <img loading="lazy" id="weather-icon" src="${iconSrc}" alt="Weather icon">
        <div class="temperature-container">
          <h3 id="temperature"> ${Math.round(data.main.temp)} °C</h3>
          <p id="weather-description">${data.weather[0].description}</p>
        </div>
      </div>

      <div class="weather-details">
        <div class="detail">
          <img loading="lazy" id="humidity-icon" src="/images/humidity.png" alt="Humidity icon">
          <span class="label">Humidity</span>
          <span id="humidity" class="value"> ${data.main.humidity}%</span>
        </div>
        <div class="detail">
          <img loading="lazy" id="wind-icon" src="/images/wind.png" alt="Wind icon">
          <span class="label">Wind</span>
          <span id="wind" class="value"> ${data.wind.speed} m/s</span>
        </div>
      </div>
    `;
  }

// Fetch weather by coordinates
function getWeatherByCoords(lat, lon) {
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${CONFIG.WEATHER_API_KEY}&units=metric`
    )
      .then(res => res.json())
      .then(data => {
        displayUserWeather(data);
        get5DaysForecast(lat, lon);
      })
      .catch(() => {
        weatherInfo.innerHTML = 'Please turn on your device&apos;s location to get weather data.';;
      });
  }

// Event listeners for search button and input field
cityName.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') checkWeatherBySearch(cityName.value);
});

  // Search button click event
searchButton.addEventListener('click', ()=>{
    checkWeatherBySearch(cityName.value);
});

// Geolocation button
locationBtn.addEventListener('click', () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        pos => {
          const { latitude, longitude } = pos.coords;
          getWeatherByCoords(latitude, longitude);
        },
        () => {
          weatherInfo.innerHTML = 'Unable to retrieve location.';
        }
      );
    } else {
      weatherInfo.innerHTML = 'Geolocation not supported.';
    }
});


// Load last searched city
window.onload = () => {
    const lastCity = localStorage.getItem('lastCity');
    if (lastCity) {
        checkWeatherBySearch(lastCity);
    }

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          pos => {
            const { latitude, longitude } = pos.coords;
            getWeatherByCoords(latitude, longitude);
          },
          () => {
            weatherInfo.innerHTML = 'Unable to retrieve location.';
          }
        );
      } else {
        weatherInfo.innerHTML = 'Geolocation not supported.';
      }
};

Now that we have our weather app. Let’s go further to make it a progressive web app.

How to Create a Manifest File

We need to create a manifest.json file, a critical part of making your app a PWA. We’ll also use pwa-asset-generator, a CLI tool that helps you to generate all the necessary icons and splash screens from a single image (like your logo). This tool also updates your manifest.json and optionally injects relevant <link> tags into index.html.

Below is the manifest.json file containing key properties that define how the Progressive Web App behaves and appears when installed.

{
  "name": "Weatherly",                      // The full name of your app that may be shown to users.
  "short_name": "Weatherly",               // A shorter name used when space is limited, like on the home screen.
  "description": "A simple weather Progressive Web App", // A short description of what your app does.
  "start_url": "/index.html",              // The page that opens when the app is launched from the home screen.
  "display": "standalone",                 // Makes the app look like a native app without browser UI (like address bar).
  "background_color": "#ffffff",           // The background color used when the app is loading.
  "theme_color": "#2196f3",                // The main color of the app’s UI, like the status bar.
  "orientation": "portrait",                // Locks the screen orientation to portrait mode.
   "screenshots": [                         //helps show users a preview of your app before installing it — especially in places like the "Add to Home screen" prompt on Android or in app stores that support PWAs.
        {
          "src": "images/screenshots/desktop-screenshot.png",
          "sizes": "1337x645",
          "type": "image/png",
          "form_factor": "wide"
        },
        {
          "src": "images/screenshots/mobile-screenshot.png",
          "sizes": "720x1417",
          "type": "image/png",
          "form_factor": "narrow"
        }
      ]
}

How to Generate Icons and Splash Screens

Inside your images folder, create a new folder called assets. This will store all the generated icons and splash screens. When your app is launched from the home screen, these splash screens will help improve the user experience on iOS devices.

Run the following command to generate PWA assets, update the manifest.json, and inject <link> tags into index.html

npx pwa-asset-generator logo.png ./images/assets -m manifest.json -i index.html

Injected Link Tags in index.html

Once the command runs successfully, a series of <link> and <meta> Tags will be automatically added to your index.html <head>. These tags ensure support for splash screens and icons across various Apple devices:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Other meta/link tags -->

  <link rel="apple-touch-icon" href="images/assets/apple-icon-180.png">
  <meta name="mobile-web-app-capable" content="yes">

  <link rel="apple-touch-startup-image" href="images/assets/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/assets/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (orientation: landscape)">
  <!-- ...more splash screen tags for various devices... -->
</head>

Here’s how the manifest.json file should look like now:

{
    "name": "Weatherly",
    "short_name": "Weatherly",
    "description": "A simple weather Progressive Web App",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#2196f3",
    "orientation": "portrait",
    "icons": [
        [
            {
              "src": "images/assets/manifest-icon-192.maskable.png",
              "sizes": "192x192",
              "type": "image/png",
              "purpose": "any"
            },
            {
              "src": "images/assets/manifest-icon-192.maskable.png",
              "sizes": "192x192",
              "type": "image/png",
              "purpose": "maskable"
            },
            {
              "src": "images/assets/manifest-icon-512.maskable.png",
              "sizes": "512x512",
              "type": "image/png",
              "purpose": "any"
            },
            {
              "src": "images/assets/manifest-icon-512.maskable.png",
              "sizes": "512x512",
              "type": "image/png",
              "purpose": "maskable"
            }
          ]
        ],
    "screenshots": [
        {
          "src": "images/screenshots/desktop-screenshot.png",
          "sizes": "1337x645",
          "type": "image/png",
          "form_factor": "wide"
        },
        {
          "src": "images/screenshots/mobile-screenshot.png",
          "sizes": "720x1417",
          "type": "image/png",
          "form_factor": "narrow"
        }
      ]
    }

You can then link your manifest file to your HTML file:

<link rel="manifest" href="manifest.json" />

How to Add WorkBox to Your service-worker.js File

In this tutorial, WorkBox will be added to index.html via CDN. You can copy the import code below or visit WorkBox to get the link. You can then add it to the index.html file by placing the URL inside a <script> tag. You can copy the import code below or visit the WorkBox website for the latest link.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js');

How to Create your Service Worker in the service-worker.js File

Here, we’ll implement the necessary functionalities needed to make the weather app a PWA

Step 1: Activate the New Service Worker Immediately

Add workbox.core.skipWaiting() to make the newly installed service worker activate right away instead of waiting for the old one to be removed in the service-worker.js file.

workbox.core.skipWaiting();

Step 2: Take Control of Open Tabs

Add workbox.core.clientsClaim() to ensure that the activated service worker takes control of all currently open pages, so the latest version of your app works immediately across all tabs after it becomes active.

workbox.core.clientsClaim();

Step 3: Check if Workbox is Loaded

Before using Workbox, make sure it has loaded properly.

if (workbox) {
  console.log('Workbox loaded successfully');
} else {
  console.log('Workbox failed to load');
}

This confirms that the workbox object is available and ready to use. If not, the fallback message in the else block will be shown.

We then proceed to create the functions inside the if block

Step 4: Pre-cache Core Files

Pre-cache essential files enable your app to work offline. This caches your app shell (HTML, CSS, JS), so it loads even without a network connection.

workbox.precaching.precacheAndRoute([
    { url: '/index.html', revision: '3' },
    { url: '/style.css', revision: '11' },
    { url: '/app.js', revision: '7' },
    { url: '/images/logo.png', revision: '3' },
    { url: '/manifest.json', revision: '5' },
    { url: '/offline.html', revision: '1' },
  ]);

The revision helps with updating cached files when changes are made.

Step 5: Cache API Responses Dynamically

Set up a route to cache data from your weather API using the NetworkFirst caching strategy. This tells Workbox to try fetching fresh data from the network first. If the network fails, it serves the cached version instead.

 // Cache API requests 
  workbox.routing.registerRoute(
    ({ url }) => url.origin === 'https://api.openweathermap.org',
    new workbox.strategies.NetworkFirst({
      cacheName: 'weather-api-cache',
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 24 * 60 * 60,
          maxEntries: 10,
        }),
      ],
    })
  );

Step 6: Dynamic Image Caching

This function enables dynamic caching for images using the StaleWhileRevalidate strategy. When a user requests an image, Workbox first serves it from the cache (if available) for faster load times, while simultaneously fetching an updated version from the network to refresh the cache. This ensures users get a quick response without missing out on updated content. It’s a smart way to handle images by balancing speed and freshness.

// Cache images
  workbox.routing.registerRoute(
    ({ request }) => request.destination === 'image',
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'image-cache',
    })
  );

Step 7: Serve Cached Resources

The commonly used static files (like HTML, CSS, JS, fonts, and so on) are served quickly from the cache. It uses the CacheFirst strategy, meaning that the service worker will look in the cache first and only fetch from the network if the file isn’t already stored. The cache is named "static-cache" and it’s set to automatically remove items older than seven days using the expiration plugin. This helps keep the cache fresh and avoids taking up too much space.

  // Serve Cached Resources 
  workbox.routing.registerRoute(
    ({url}) => url.origin === self.location.origin,  
    new workbox.strategies.CacheFirst({
      cacheName: 'static-cache',  
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 7 * 24 * 60 * 60,  // Cache static resources for 7 days
        }),
      ],
    })
  );

Step 8: Cache HTML Pages with Offline Support

The index.html page will be handled using the NetworkFirst strategy. This means that the service worker tries to fetch the latest version from the network first. If the user is offline or the network fails, it falls back to the cached version. The cache is named "pages-cache" and the offline fallback page (offline.html) is returned when the requested page isn’t available. This ensures that users can still navigate the app even without an internet connection.

// Serve HTML pages with Network First and offline fallback
workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  async ({ event }) => {
    try {
      const response = await workbox.strategies.networkFirst({
        cacheName: 'pages-cache',
        plugins: [
          new workbox.expiration.ExpirationPlugin({
            maxEntries: 50,
          }),
        ],
      }).handle({ event });
      return response || await caches.match('/offline.html');
    } catch (error) {
      return await caches.match('/offline.html');
    }
  }
);

Step 9: Handle When Workbox Doesn’t Load

You should always provide a fallback in case something goes wrong. The if block will have an else block to catch issues during development and debugging.

else {
     console.log('Workbox failed to load');
}

Once the service worker finishes handling the different conditions in the if-else block, we add a general cleanup step to remove any outdated or unused caches.

Step 10: Clean Up Outdated Caches

During the service worker's activation phase, old or unused caches are removed. It compares all existing cache names with a list of current ones (precache, weather-api-cache, image-cache, pages-cache, and static-resources). If a cache doesn’t match the current list, it gets deleted. This helps keep the app lightweight and ensures that outdated data doesn't persist.

// Clean up old/unused caches during activation
self.addEventListener('activate', event => {
  const currentCaches = [
    workbox.core.cacheNames.precache,
    'weather-api-cache',
    'image-cache',
    'pages-cache',
    'static-cache'
  ];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!currentCaches.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

This is what your service-worker.js file should look like:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js');

// Force waiting service worker to become active
workbox.core.skipWaiting();
workbox.core.clientsClaim();

if (workbox) {
  console.log('Workbox loaded successfully');

  // Precache critical files with revisions (update revisions when files change)
  workbox.precaching.precacheAndRoute([
    { url: '/index.html', revision: '3' },
    { url: '/style.css', revision: '11' },
    { url: '/app.js', revision: '7' },
    { url: '/images/logo.png', revision: '3' },
    { url: '/manifest.json', revision: '5' },
    { url: '/offline.html', revision: '1' },
  ]);

  // Cache API requests 
  workbox.routing.registerRoute(
    ({ url }) => url.origin === 'https://api.openweathermap.org',
    new workbox.strategies.NetworkFirst({
      cacheName: 'weather-api-cache',
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 24 * 60 * 60,
          maxEntries: 10,
        }),
      ],
    })
  );

  // Cache images
  workbox.routing.registerRoute(
    ({ request }) => request.destination === 'image',
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'image-cache',
    })
  );

    // Serve Cached Resources 
  workbox.routing.registerRoute(
    ({url}) => url.origin === self.location.origin,  
    new workbox.strategies.CacheFirst({
      cacheName: 'static-cache',  
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 7 * 24 * 60 * 60,  // Cache static resources for 7 days
        }),
      ],
    })
  );

  // Serve HTML pages with Network First and offline fallback
workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  async ({ event }) => {
    try {
      const response = await workbox.strategies.networkFirst({
        cacheName: 'pages-cache',
        plugins: [
          new workbox.expiration.ExpirationPlugin({
            maxEntries: 50,
          }),
        ],
      }).handle({ event });
      return response || await caches.match('/offline.html');
    } catch (error) {
      return await caches.match('/offline.html');
    }
  }
);
} else {
  console.log('Workbox failed to load');
}

// Clean up old/unused caches during activation
self.addEventListener('activate', event => {
  const currentCaches = [
    workbox.core.cacheNames.precache,
    'weather-api-cache',
    'image-cache',
    'pages-cache',
    'static-cache'
  ];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!currentCaches.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

How to Set Up App Installation

The code to install the app will be written in install.js following the steps below:

Step 1: Register the Service Worker

Register the service worker to activate and run it in your app.

if('serviceWorker' in navigator){
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js').then(reg => {
        reg.onupdatefound = () => {
          const newWorker = reg.installing;
          newWorker.onstatechange = () => {
            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
              window.location.reload();
            }
          };
        };
      });
    })
 }

Step 2: Enable Custom Install Prompt

Next, we will allow users to install the weather PWA with a custom button. Inside the install.jsfile, add the beforeinstallprompt event which intercepts the default prompt and shows your install button instead. When clicked, it triggers the install prompt.

  let deferredPrompt;

document.addEventListener('DOMContentLoaded', () => {
  const installBtn = document.getElementById('installBtn');

  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;

    // Show the button
    installBtn.style.display = 'block';

    installBtn.addEventListener('click', () => {
      // Directly triggered by user click
      installBtn.style.display = 'none';

      // Show the install prompt
      deferredPrompt.prompt();

      deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the install prompt');
        } else {
          console.log('User dismissed the install prompt');
        }
        deferredPrompt = null;
      });
    });
  });

The appinstalled event confirms successful installation.

window.addEventListener('appinstalled', () => {
    console.log('PWA was installed');
  });
});

Step 3: Add script tag to import install.js in index.html

Add the <script> tag for install.js inside the index.html file to include the installation logic.

 <script type="module" src="/js/install.js"></script>

How to Install the Weather App

You can choose to install the Weatherly app on your phone or desktop. Below is a demonstration on how to install it on your mobile phone:

Open the Weatherly app in your browser. You should see an “Install App” button, as shown in the image below. Click on the button to continue.

After clicking, a preview of the app will appear along with an “Install” option, as shown below. Click the Install button.

Once the installation is complete, the Weatherly app will appear on your home screen, just like a native app. And that’s it! Your weather app is now a Progressive Web App (PWA).

Conclusion

Progressive Web Apps combine the best of web and native app experiences, and service workers are the backbone of that functionality. With tools like Workbox, you don’t have to worry about manually handling caching, offline support, or background sync. Its simple APIs and built-in strategies make it easier to build fast, reliable, and installable web apps. Whether it’s a small weather app like Weatherly or a more complex project, Workbox helps you deliver a seamless user experience.

You can check out the full project and assets on GitHub

Before now, developers used tags like <br> or <span> to manually adjust word spacing. But what happens in cases where you also need to consider the responsiveness of the website? Well, the new text-wrap: balance property in CSS can now automatically calculate and divide the lines in such a way that every word looks organized and even. Like this:

In this article, you’ll learn how the text-wrap property works and how to use it in your code. You’ll also see a few examples along the way.

Without wasting time, let's get right into it.

Table of Contents

• Understanding the Problems

• Introducing text-wrap

  • What is text-wrap?

  • Basic Syntax of text-wrap

• text-wrap vs. max-width : When to Use Each

  • When to Use max-width vs text-wrap

  • Browser Support and Considerations

• Practical Implementation: Step-by-Step Guide

• Conclusion

Understanding the Problems

Apart from making words harder to read when your text is unevenly displayed, there are other issues uneven or poorly displayed text can cause on your website as a whole. Some of these are:

• Responsive Design: We wouldn't have any issues if we could manually design for every screen size and carefully place and space the lines of our text exactly as we wanted users to read them. Unfortunately, we can't do this, which is why making designs responsive is always crucial. When text adjusts from one screen size to another, lines break, and what looks good on a desktop may look terrible on a tablet view.

• Headings and Short Paragraphs: Since paragraphs and small blocks of text have many words, there is a high probability of words ending in a very unbalanced way. Often, we see a heading line ending with just one word, forming an awkward shape in the overall design.

• Dynamic Content: If your website contains dynamic content (such as cards of various sizes, product descriptions, or blog posts), having no text-wrap might make your layout break or appear unpredictable.

Introducing text-wrap

In the last section, we looked at the problems attributed to uneven text distribution. In this section, you’ll see how text-wrap is a game changer in how you organize your text.

Before text-wrap, developers relied heavily on max-width, text-align, or <br> to control text lines. The new text-wrap CSS property was created to help break text naturally across lines without making it look out of place, preventing the need for trial and error in checking if text fits.

What is text-wrap?

text-wrap is a CSS property that can help you adjust and space text automatically, break lines evenly without using the rigid <br> tag, and not have to rely on text-align, which didn't work on all screen sizes.

With text-wrap, your headings and paragraphs are sure to look good. Instead of having some lines that look longer than others, text-wrap neatly arranges everything to appear visually appealing.

Basic Syntax of text-wrap

There are two major ways to apply text-wrap to your text. These values are:

text-wrap: balance: (The Smart Heading Balancer)

This is the smart way of telling the browser to adjust the text evenly, regardless of the screen size.

Code snippet:

h1 {
  text-wrap: balance;
}

In this code, the heading text lines will split naturally without any weird short lines.

text-wrap: pretty; (The Smart Paragraph Balancer)

Just as text-wrap: balance works best for headings, text-wrap: pretty is the best for styling long paragraphs.

Code snippet:

p{
  text-wrap: pretty;
}

The p in this code will make sure the paragraphs maintain natural readability.

Other values include:

text-wrap vs. max-width : When to Use Each

max-width was always the go-to option for developers in the past. While this method works in most cases, it won’t stop uneven text distribution. Let's compare it with the new text-wrap CSS property so you can know when to use each one.

Using max-width:

h1 {
  max-width: 400px;
}

The max-width here forces the heading not to exceed a 400px width. This can be good for controlling short body paragraphs but can cause unevenness for headings when dealing with multiple screen sizes.

Using text-wrap:

h1 {
  text-wrap: balance;
}

Here, the browser dynamically breaks the heading text in a balanced way, preventing any weird-looking single lines.

When to Use max-width vs text-wrap

Use text-wrap: balance when you want a more natural text read without any weird line breaks.

Use max-width when you need to control the text width and don't necessarily care how the lines break.

Use both if you want a more natural read within a confined width limit.

h1 {
  max-width: 500px;
  text-wrap: balance;
}

This ensures the heading stays within a 500px limit while maintaining an even text distribution.

Browser Support and Considerations

Currently, Chrome and Edge are the only main browsers that support the new text-wrap property. If you are building a project that should work on browsers like Safari and Firefox, you will need to use traditional text formatting methods like text-align, <br>, or max-width instead.

Fallback snippet:

@supports (text-wrap: balance) {
  h1 {
    text-wrap: balance;
  }
}

The @support is a pro tip to apply this style to only supported browsers.

Practical Implementation: Step-by-Step Guide

Now that you’ve seen how important text-wrap can be and how to use it, let’s put that knowledge into practise and see real examples, compare the before and after screens of using it (and not), and check how it reacts in responsive designs as well.

1. Applying text-wrap: balance to Headings

In this section, we will see how the heading lines in the topic "How to Use CSS Text Balance: A Simple Trick for Smoother, Cleaner Designs" will break across different sizes and how it looks when text-wrap: balance is applied.

Without text-wrap: balance:

HTML

<h1 class="title">How to Use CSS Text Balance: A Simple Trick for Smoother, Cleaner Designs</h1>

CSS

.title {
  font-size: 2.5rem;
  font-weight: bold;
}

Without any special application to the headings, it will just adjust freely.

Result:

With text-wrap: balance:

CSS

.title {
  font-size: 2.5rem;
  font-weight: bold;
  text-wrap: balance;
}

Now, the browser automatically adjusts the line breaks to ensure a more even distribution.

Result:

2. Using text-wrap: pretty on Short Paragraphs

You’ve now seen how text-wrap: balance handles headings, so lets also take a look at how it breaks the lines evenly in your text paragraphs. As I mentioned above, the value pretty is mostly used for paragraphs or short block of words. Here’s how it works and appears on a block of text.

Without text-wrap: pretty:

HTML

<p class="subText"> Do you know that inconsistent text layout can ruin the look of your website design? Maybe a heading has an extra word that takes up another line or in a paragraph some lines are longer than others whereby leaving the whole thing looking messed up and hard to read.</p>

CSS

.subText {
  font-size: 1.2rem;
  line-height: 1.5;
}

In this code, text adjustment will behave normally without any smart contraints.

Result:

With text-wrap: pretty:

CSS

.subText {
  font-size: 1.2rem;
  line-height: 1.5;
  text-wrap: pretty;
}

The code above makes the line breaks evenly in a way that it will be easier for someone to read through.

Result:

How text-wrap Works in Responsive Design

When you use text-wrap on your text, you need not to worry how it is going to appear on various screen sizes. The below video shows you what I mean by that:

Using Media Queries for Extra Control

Combine media-queries and text-wrap to have a great special kind of control on how your text appears on various screens.

h1 {
  font-size: 2.5rem;
  text-wrap: balance;
}

/* On smaller screens, reduce font size and apply text-balancing */
@media (max-width: 600px) {
  h1 {
    font-size: 2rem;
    text-wrap: balance;
  }
}

This code ensures your heading text adapts and remains clean across multiple device sizes.

Conclusion

How text displays is something every good developer should pay attention to. It plays a big role in user experience. By using text-wrap, you can ensure that your website layouts don't look messy or difficult to read.

One of the best things about using text-wrap in your text formatting is that it just works every time. You don’t need to bother with <br> tags, tweak max-width, or fight with text alignment.

Even though it's not yet supported by all browsers, adding it to your next project will future-proof your design so it’s always intact and good-looking.

In this article, I’ll discuss a couple ways you can do this. The first is using the <mark> element, and the second is using the CSS Custom Highlight API. We’ll go through examples, and I’ll explain the issues with <mark>. Then you’ll learn how the Custom Highlight API solves these challenges.

Here’s what we’ll cover:

1. What We Want to Do

2. Reasons for Highlighting Text

3. How to Highlight Text Using the Mark Element

4. Introducing the CSS Custom Highlight API

5. How to Apply a Custom Highlight

6. How to Modify a Highlighted Range

7. How to Highlight Multiple Ranges

8. How to Remove Highlights

9. Browser Support

10. Wrapping Up

What We Want to Do

We want to apply highlighting effects to some text in a document, without needing to manually select the text. Typically, we’d do this by giving the text a background color that calls attention to the highlighted text. You can see what this looks like in the following screenshot.

Reasons for Highlighting Text

There are several use cases for programmatically highlighting text. Before we talk about how to highlight, let's talk about why we might want to highlight.

• Highlighting search results or matches: If the user reaches this page by searching, it may help them to call out the matching search text by applying highlighting.

• Emphasizing information: We might want to call out some important text on the page.

• User defined highlighting: An example would be in an e-reading app like Amazon's Kindle app. Here, users can select and save highlighted regions of a book. Later, when returning to a page, the user's previous highlights are shown.

How to Highlight Text Using the <mark> Element

One way you can highlight text is by using the HTML <mark> element. This has the benefit of being an HTML semantic element.

To highlight text using <mark>, you can wrap the text to highlight in a <mark> element. The browser will apply a highlight style to any text inside a <mark> element.

Consider the following HTML containing a <mark> element which surrounds the text you want to highlight.

Here is some <mark>text to highlight</mark>.

<mark> can be styled with CSS like any other HTML element, so you can customize the color and style of the highlighted text.

Using the <mark> element has some drawbacks, though. You have to modify the DOM and insert nodes whenever you want to add highlighting. This can cause side effects such as a layout recalculation that can affect the page's performance.

It's also harder to highlight text that might span multiple HTML elements. Since <mark> is an HTML element, you have to use it in such a way that it produces valid HTML.

For the rest of this article, we'll use some example HTML markup that we want to highlight parts of. Consider this HTML markup containing an introductory paragraph and some list items. We want to apply highlighting to some of the content, but let's show the base HTML first.

<p>Some introductory text.</p>

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Now, suppose we want to highlight "Some introductory text." and "Item one" together. We can't use a single <mark> element, because it would be invalid HTML.

The closing tag would be nested inside a <li> element, which is not valid HTML. The following code shows what that might look like:

<p><mark>Some introductory text.</p>

<ul>
  <li>Item one</mark></li>
  <li>Item two</li>
</ul>

Instead, to achieve the desired effect, we would have to insert multiple <mark> elements as shown in the following code. Note that there are two <mark> elements: one in the introduction, and one in the first list item. If you wanted to highlight multiple list items, you'd need to add even more <mark> elements.

Here's some example code with multiple <mark> elements:

<p><mark>Some introductory text.</mark></p>

<ul>
  <li><mark>Item one</mark></li>
  <li>Item two</li>
</ul>

This works, but it's cumbersome and does not result in a single continuous highlight.

Introducing the CSS Custom Highlight API

The solution to our problem is the CSS Custom Highlight API, a newer API that lets you create highlight regions and style them with CSS. Highlights are tied to ranges, which can span multiple HTML elements and do not add any markup or elements to the document.

There are several concepts you’ll need to know when using this API:

• Range: A Range is an object representing part of a document between two nodes. These can be element nodes or text nodes.

• Highlight: A Highlight is an object that defines a custom highlight around one or more Range objects. These objects are registered with the CSS engine under a unique name.

• CSS highlight registry: A global object where Highlight objects are registered under unique names.

• The ::highlight pseudo-element: This is used in a CSS stylesheet to define the highlighting style. Each ::highlight pseudo-element references a Highlight object name that was registered with the CSS highlight registry.

How to Apply a Custom Highlight

Let's return to the earlier highlighting example and use the CSS Custom Highlight API to highlight the introductory text and the first list item.

First, let's add some IDs so we can select the relevant elements more easily. Consider this updated code where we have added IDs to some of the elements.

<p id="intro">Introductory text.</p>

<ul>
  <li id="item1">Item one</li>
  <li id="item2">Item two</li>
</ul>

Let's walk through the steps to create the highlight.

Create the Range

First, we'll create a Range object that spans the desired elements. This will represent a range of elements that spans the introduction and first list item without having to modify the DOM.

const range = new Range();
range.setStartBefore(document.getElementById('intro'));
range.setEndAfter(document.getElementById('item1'));

This Range object will start at the beginning of the <p> element, and will end at the end of the <li> with ID item1.

Create and Register the Highlight Object

Now that we have a Range, we can create a Highlight for that Range. We do this by calling the Highlight constructor, passing the Range object as its argument.

const highlight = new Highlight(range);

This creates the Highlight object, but we can't do anything with it yet. First, we'll need to register it with the CSS highlight registry with the CSS.highlights.set method.

The following code shows how you can use CSS.highlights.set to register a Highlight object under the name my-custom-highlight. We'll reference this name in the CSS when we apply styling in the next step.

CSS.highlights.set('my-custom-highlight', highlight);

Style the Highlight

We've created and registered the Highlight around a given Range, but at this point, we still won't see anything in the document. We need to use a CSS rule to define the highlight style.

To do this, we'll use the ::highlight pseudo-element. We pass the name of the custom highlight used in the previous step to this pseudo-element. This allows us to set CSS styles that are applied to the text within the highlighted range.

::highlight(my-custom-highlight) {
  background-color: yellow;
}

Now, the introductory text and the first list item will be highlighted in yellow, as shown in this screenshot.

How to Modify a Highlighted Range

When we create a Highlight object around a Range object, the Highlight will be dynamically updated with any changes made to the Range. In our example, let's say we now want to extend the highlight to the second list item.

We don't need to create a new Highlight or Range – rather, we can just set the Range's end position to the new element.

range.setEndAfter(document.getElementById('item2'));

As soon as the Range is modified, the new text will be highlighted as shown in this screenshot.

How to Highlight Multiple Ranges

For even more flexibility, a single Highlight can cover multiple Ranges. Let's update our example HTML to include four list items.

<p id="intro">Introductory text.</p>

<ul>
  <li id="item1">Item one</li>
  <li id="item2">Item two</li>
  <li id="item3">Item three</li>
  <li id="item4">Item four</li>
</ul>

So far, we're highlighting the introductory text and the first two list items. Suppose we now want to also highlight the fourth list item. We can't do this with our existing Range object, since it wouldn't represent a contiguous range of nodes. We'll need to create a second Range. This new Range spans the fourth list item.

const item4 = document.getElementById('item4');
const range2 = new Range();
range2.setStartBefore(item4);
range2.setEndAfter(item4);

Now, we can add this new Range to our existing Highlight object by calling its add method. This will let us apply highlighting to the second Range.

highlight.add(range2);

Once we do this, the fourth list item will be highlighted as well, as shown in this screenshot.

How to Remove Highlights

There are two ways that you can remove highlights from the document.

First, let's suppose we want to remove the highlight from the introductory text and first two list items, but keep the last list item highlighted. We can use the Highlight object's delete method to remove the first Range from the Highlight object.

highlight.delete(range);

After we delete this Range, only the last list item will remain highlighted, as shown in this screenshot.

The other way to remove highlights is to un-register a Highlight object from the CSS highlight registry by calling CSS.highlights.delete with the unique name we gave the Highlight. This removes the Highlight object that we registered previously.

CSS.highlights.delete('my-custom-highlight');

Now, nothing will remain highlighted, as shown in this screenshot.

Browser Support

As of January 2025, at the time of writing, the CSS Custom Highlight API is supported in Chrome, Edge, and Safari. Firefox support is starting to show up in nightly builds, so you should expect Firefox to have improved support soon. For the latest compatibility data, see https://caniuse.com/mdn-api_highlight.

To test if the browser supports CSS custom highlighting, you can check for the existence of the highlights property of the CSS object:

if (!('highlights' in CSS)) {
  // highlight API is not supported
}

Wrapping Up

The CSS Custom Highlight API lets you programmatically highlight regions of text in an HTML document without having to modify the DOM or worry about inserting invalid HTML markup. Its flexible and dynamic nature lets you add, modify, and remove highlights at runtime.

Further Reading

• Range (MDN): API documentation for the Range interface.

• CSS Custom Highlight API (MDN): More details about the CSS Custom Highlight API.

Take our year-end freeCodeCamp podcast listener survey real quick: https://forms.gle/2M9NW776723uSdDT7

Support for this podcast comes from a grant from Wix Studio. Wix Studio provides developers tools to rapidly build websites with everything out-of-the-box, then extend, replace, and break boundaries with code. Learn more at https://wixstudio.com.

Support also comes from the 11,043 kind folks who support freeCodeCamp through a monthly donation. Join these kind folks and help our mission by going to https://www.freecodecamp.org/donate

CORRECTION: I (Quincy) say during the interview that the Uber found a way to access microphones on iOS without users' knowledge. There have been documented cases of malware doing this (like Pegasus) but Uber didn't do this. They did do a lot of other shady things, like continue collecting data even after you deleted their app – but mic spying was not one of them. Yes, early Uber was an ethical tire fire. But it's important to get facts right here.

We talk about:

• Why you should still learn CSS in 2025

• How teaching concepts improves your own understanding of them

• How learning to skateboard helped Kevin escape Tutorial Hell

• Massive improvements coming to CSS

You can watch the interview on YouTube:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. Be sure to follow the freeCodeCamp Podcast there so you'll get new episodes each Friday.

Links we talk about during our conversation:

• Kevin's YouTube channel: https://www.youtube.com/kevinpowell

• Original Space Jam website Kevin mentions: https://www.spacejam.com/1996/

• The article that coined the term Responsive Design: https://alistapart.com/article/responsive-web-design/

• Kevin's freeCodeCamp article on how learning skateboarding helped him out of tutorial hell: https://www.freecodecamp.org/news/how-learning-to-skateboard-helped-me-find-a-way-out-of-tutorial-hell/

• Kevin's freeCodeCamp course on building and deploying a portfolio page: https://www.freecodecamp.org/news/how-to-build-a-portfolio-website-and-deploy-to-digital-ocean/

• Playable Minesweeper in CSS that Quincy mentions: https://codepen.io/bali_balo/pen/BLJONZ

• Acknowledged mistakes that are permanently coded into CSS: https://wiki.csswg.org/ideas/mistakes

• Talk on why is CSS so weird: https://www.youtube.com/watch?v=aHUtMbJw8iA

Well, fear not! I’ve cracked the code for building components that trigger and respond to keyboard shortcuts. In this article, I’ll teach you how to create them with React, Tailwind CSS, and Framer Motion.

Table of Content

Here’s everything we’ll cover:

• Prerequisites

• What Is a Keyboard Shortcut Listener (KSL) Component?

• How to Build the KSL Component

• How to Create the Reveal Component

• How to Trigger the Component via Keyboard Shortcut

• How to Animate the Component’s Visibility

• How to Optimize Your KSL Component

• Conclusion

Prerequisites

• Fundamentals of HTML, CSS, and Tailwind CSS

• Fundamentals of JavaScript, React, and React Hooks.

What Is a Keyboard Shortcut Listener (KSL) Component?

A Keyboard Shortcut Listener component (KSLC) is a component that listens for specific key combinations and triggers actions in your app. It's designed to make your app respond to keyboard shortcuts, allowing for a smoother, more efficient user experience.

Why is it important?

• Accessibility: The KSL component makes it simple for people who use a keyboard to trigger actions, making your app more inclusive and easy to use.

• Snappier Experience: Shortcuts are quick and efficient, allowing users to get things done in less time. No more fumbling around for the mouse—just hit a key (or two) and boom, action happens!

• Reusability: Once you’ve set up your KSL, it can handle different shortcuts across your app, making it easy to add without rewriting the same logic.

• Cleaner Code: Instead of scattering keyboard event listeners everywhere, the KSL component keeps things tidy by centralising the logic. Your code stays clean, organized, and easier to maintain.

How to Build the KSL Component

I've prepared a GitHub repository with starter files to speed things up. Simply clone this repo and install the dependencies.

For this project, we’re using Tailwind’s home page as our muse and creating the KSL functionality. After installing and running the build command, here’s what your page should look like:

How to Create the Reveal Component

The reveal component is the component we want to show when we use the shortcut.

To begin, create a file called search-box.tsx and paste in this code:

export default function SearchBox() {
  return (
    <div className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {" "}
      <div className=" p-[15vh] text-[#939AA7] h-full">
        <div className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md">
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </div>
    </div>
  );
}

Ok, so what’s happening in this code?

1. Main Overlay (<div className="fixed top-0 left-0 ...">)

   • This is the full-screen overlay that dims the background.

   • The backdrop-blur-sm adds a subtle blur to the backdrop, and bg-slate-900/50 gives it a semi-transparent dark overlay.

2. Search Box Wrapper (<div className="p-[15vh] ...">)

   • The content is centered using padding and flex utilities.

   • The max-w-xl makes sure that the search box stays within a reasonable width for readability.

Then in your App.tsx, create a state that dynamically shows that component:

const [isOpen, setIsOpen] = useState<boolean>(false);

• useState: This hook initializes isOpen to false, meaning the search box is hidden by default.

• When isOpen is set to true, the SearchBox component will render on the screen.

And render the search component:

  {isOpen && <SearchBox />}

To show the search component, add a toggle function to the input button:

<button
  type="button"
  className="items-center hidden h-12 px-4 space-x-3 text-left rounded-lg shadow-sm sm:flex w-72 ring-slate-900/10 focus:outline-none hover:ring-2 hover:ring-sky-500 focus:ring-2 focus:ring-sky-500 bg-slate-800 ring-0 text-slate-300 highlight-white/5 hover:bg-slate-700"
  onClick={() => setIsOpen(true)}>
  <BiSearch size={20} />
  <span className="flex-auto">Quick search...</span>
   <kbd className="font-sans font-semibold text-slate-500">
   <abbr title="Control" className="no-underline text-slate-500">
    Ctrl{" "}
    </abbr>{" "}
    K
   </kbd>
</button>

The onClick event sets isOpen to true, displaying the SearchBox.

But as you’ve seen, this was triggered by a click action, not a keyboard shortcut action. Let’s do that next.

How to Trigger the Component via Keyboard Shortcut

To make the reveal component open and close using a keyboard shortcut, we’ll use a useEffect hook to listen for specific key combinations and update the component’s state accordingly.

Step 1: Listen for Keyboard Events

Add an useEffect hook in your App.tsx file to listen for key presses:

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.ctrlKey && event.key === Key.K) {
        event.preventDefault(); // Prevent default browser behavior

      }    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

What’s happening in this code?

1. Effect Setup (useEffect)

   • useEffect ensures that the event listener for key presses is added when the component mounts and cleaned up when the component unmounts, preventing memory leaks.

2. Key Combination (event.ctrlKey && event.key === "k")

   • The event.ctrlKey checks if the Control key is being pressed.

   • The event.key === "k" ensures we’re listening specifically for the "K" key. Together, this checks if the Ctrl + K combination is pressed.

3. Prevent Default Behavior (event.preventDefault())

   • Some browsers may have default behaviors tied to key combinations like Ctrl + K (e.g., focusing the browser’s address bar). Calling preventDefault stops this behavior.

4. Event Cleanup (return () => ...)

   • The cleanup function removes the event listener to prevent duplicate listeners from being added if the component re-renders.

Step 2: Toggle Component Visibility

Next, update the handleKeyDown function to toggle the SearchBox visibility when the shortcut is pressed:

useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // Listen for Ctrl + K
      if (event.ctrlKey && event.key === Key.K) {
        event.preventDefault(); // Prevent default browser behavior
        setIsOpen((prev) => !prev); // Toggle the search box
      } else if (event.key === Key.Escape) {
        setIsOpen(false); // Close the search box
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

What’s happening in this code?

1. Toggling State (setIsOpen((prev) => !prev))

   • When Ctrl + K is pressed, the setIsOpen state setter toggles the visibility of the SearchBox.

   • The prev argument represents the previous state. Using !prev flips its value:

     • true (open) becomes false (close).

     • false (closed) becomes true (open).

2. Closing with the Escape Key (event.key === "Escape")

   • When the Escape key is pressed, setIsOpen(false) explicitly sets the state to false, closing the SearchBox.

This results in the following:

How to Animate the Component’s Visibility

At the moment, our component works, but it lacks a little flair, wouldn’t you say? Let’s change that.

Step 1: Create the Overlay Component

We’ll start by creating an overlay component, which acts as the dark, blurred backdrop for the search box. Here’s the base version:

import { ReactNode } from "react";

export default function OverlayWrapper({ children }: { children: ReactNode }) {
  return (
    <div
      className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {children}
    </div>
  );
}

Step 2: Add Animations to the Overlay

Now, let’s make the overlay fade in and out using Framer Motion. Update the OverlayWrapper component like this:

import { motion } from "framer-motion";
import { ReactNode } from "react";

export default function OverlayWrapper({ children }: { children: ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {children}
    </motion.div>
  );
}

Key animation props:

• initial: Sets the starting state when the component is mounted (fully transparent).

• animate: Defines the state to animate toward (fully opaque).

• exit: Specifies the animation when the component is unmounted (fading out).

Step 3: Animate the Search Box

Next, add some motion to the search box itself. We’ll make it slide and fade in when it appears and slide out when it disappears.

import { motion } from "framer-motion";
import { BiSearch } from "react-icons/bi";
import OverlayWrapper from "./overlay";

export default function SearchBox() {
  return (
    <OverlayWrapper>
      <motion.div
        initial={{ y: "-10%", opacity: 0 }}
        animate={{ y: "0%", opacity: 1 }}
        exit={{ y: "-5%", opacity: 0 }}
        className=" p-[15vh] text-[#939AA7] h-full">
        <div
          className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md"
        >
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </motion.div>
    </OverlayWrapper>
  );
}

Step 4: Enable Animation Tracking with AnimatePresence

Finally, wrap your conditional rendering logic in the AnimatePresence component provided by Framer Motion. This ensures Framer Motion tracks when elements enter and leave the DOM.

<AnimatePresence>{isOpen && <SearchBox />}</AnimatePresence>

This enables Framer Motion to track when an element enters and leaves the DOM. With this, we get the following result:

Ah, much better!

How to Optimize Your KSL Component

If you thought we were done, not so fast…We still have a little more to do.

We need to optimize for accessibility. We should add a way for users to close the search component with a mouse, as accessibility is very important.

To do this, start by creating a hook called useClickOutside. This hook uses a reference element to know when a user is clicking outside the target element (search box) which is a very popular behaviour for closing modals and KSLCs.

import { useEffect } from "react";

type ClickOutsideHandler = (event: Event) => void;

export const useClickOutside = (
  ref: React.RefObject<HTMLElement>,
  handler: ClickOutsideHandler
) => {
  useEffect(() => {
    const listener = (event: Event) => {
      // Do nothing if clicking ref's element or descendant elements
      if (!ref.current || ref.current.contains(event.target as Node)) return;

      handler(event);
    };

    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
};

To use this hook, pass in the function responsible for opening and closing the search component:

<AnimatePresence> {isOpen && <SearchBox close={setIsOpen} />} </AnimatePresence>

Then receive the function in the search with its proper prop type:

export default function SearchBox({
  close,
}: {
  close: React.Dispatch<React.SetStateAction<boolean>>;
}) {

After that, create a reference (ref) to the item you want to track and mark that element:

import { motion } from "framer-motion";
import { useRef } from "react";
import { BiSearch } from "react-icons/bi";
import { useClickOutside } from "../hooks/useClickOutside";
import OverlayWrapper from "./overlay";

export default function SearchBox({
  close,
}: {
  close: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  const searchboxRef = useRef<HTMLDivElement>(null);
  return (
    <OverlayWrapper>
      <motion.div
        initial={{ y: "-10%", opacity: 0 }}
        animate={{ y: "0%", opacity: 1 }}
        exit={{ y: "-5%", opacity: 0 }}
        className=" p-[15vh] text-[#939AA7] h-full">
        <div
          className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md"
          ref={searchboxRef}>
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </motion.div>
    </OverlayWrapper>
  );
}

Then pass in that ref and the function to be called when a click outside that element is detected.

useClickOutside(searchboxRef, () => close(false));

Testing it out now gives the following result:

We can also optimize the code a bit more. Like we did with the accessibility feature, we can make out listener for detecting shortcuts much cleaner and efficient with the following steps.

First, create a useKeyBindings hook file for handling key press combinations.

Then define the hook and the Interface. The hook will accept an array of bindings, where each binding consists of:

• A keys array, which specifies the key combination (for example, ["Control", "k"])

• A callback function, which gets called when the corresponding keys are pressed.

import { useEffect } from "react";

// Define the structure of a keybinding
interface KeyBinding {
  keys: string[]; // Array of keys (e.g., ["Control", "k"])
  callback: () => void; // Function to execute when the keys are pressed
}

export const useKeyBindings = (bindings: KeyBinding[]) => {

};

Next, create the handleKeyDown function. Inside the hook, define a function that will listen for keyboard events. This function will check if the pressed keys match any defined key combinations.

We'll normalize the keys to lowercase so that the comparison is case-insensitive and track which keys are pressed by checking for ctrlKey, shiftKey, altKey, metaKey, and the key pressed (for example, "k" for Ctrl + K).

const handleKeyDown = (event: KeyboardEvent) => {
  // Track the keys that are pressed
  const pressedKeys = new Set<string>();

  // Check for modifier keys (Ctrl, Shift, Alt, Meta)
  if (event.ctrlKey) pressedKeys.add("control");
  if (event.shiftKey) pressedKeys.add("shift");
  if (event.altKey) pressedKeys.add("alt");
  if (event.metaKey) pressedKeys.add("meta");

  // Add the key that was pressed (e.g., "k" for Ctrl + K)
  if (event.key) pressedKeys.add(event.key.toLowerCase());
};

Next, we’ll compare the pressed keys with the keys array from our bindings to check if they match. If they do, we’ll call the associated callback function. We also ensure that the number of pressed keys matches the number of keys defined in the binding.

// Loop through each keybinding
bindings.forEach(({ keys, callback }) => {
  // Normalize the keys to lowercase for comparison
  const normalizedKeys = keys.map((key) => key.toLowerCase());

  // Check if the pressed keys match the keybinding
  const isMatch =
    pressedKeys.size === normalizedKeys.length &&
    normalizedKeys.every((key) => pressedKeys.has(key));

  // If the keys match, call the callback
  if (isMatch) {
    event.preventDefault(); // Prevent default browser behavior
    callback(); // Execute the callback function
  }
});

Finally, set up event listeners on the window object to listen for keydown events. These listeners will trigger the handleKeyDown function whenever a key is pressed. Make sure to add clean up the event listeners when the component unmounts.

useEffect(() => {
  // Add event listeners for keydown
  window.addEventListener("keydown", handleKeyDown);

  // Cleanup the event listeners when the component unmounts
  return () => {
    window.removeEventListener("keydown", handleKeyDown);
  };
}, [bindings]);

The full useKeyBindings hook now put together looks like this:

import { useEffect } from "react";

interface KeyBinding {
  keys: string[]; // A combination of keys to trigger the callback (e.g., ["Control", "k"])
  callback: () => void; // The function to execute when the keys are pressed
}

export function useKeyBindings(bindings: KeyBinding[]) {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      bindings.forEach(({ keys, callback }) => {
        const normalizedKeys = keys.map((key) => key.toLowerCase());
        const pressedKeys = new Set<string>();

        // Track modifier keys explicitly
        if (event.ctrlKey) pressedKeys.add("control");
        if (event.shiftKey) pressedKeys.add("shift");
        if (event.altKey) pressedKeys.add("alt");
        if (event.metaKey) pressedKeys.add("meta");

        // Add the actual key pressed
        if (event.key) pressedKeys.add(event.key.toLowerCase());

        // Match exactly: pressed keys must match the defined keys
        const isExactMatch =
          pressedKeys.size === normalizedKeys.length &&
          normalizedKeys.every((key) => pressedKeys.has(key));

        if (isExactMatch) {
          event.preventDefault(); // Prevent default behavior
          callback(); // Execute the callback
        }
      });
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [bindings]);
}

Here’s how you can use this hook in your App:

import { useKeyBindings } from "./hooks/useKeyBindings";

export default function App() {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  useKeyBindings([
    {
      keys: ["Control", "k"], // Listen for "Ctrl + K"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Escape"], // Listen for "Escape"
      callback: () => setIsOpen(false), // Close the search box
    },
  ]);

Which gives the following result:

With this approach, you can even add multiple shortcuts to trigger the search component’s visibility.

useKeyBindings([
    {
      keys: ["Control", "k"], // Listen for "Ctrl + K"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Control", "d"], // Listen for "Ctrl + D"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Escape"], // Listen for "Escape"
      callback: () => setIsOpen(false), // Close the search box
    },
  ]);

Here are links to all the resources you may need for this article:

• Starter files

• Final

Conclusion

I hope this article felt like a well-timed shortcut, getting you to the heart of building reusable keyboard shortcut components. With every keypress and animation, you can now turn ordinary web experiences extraordinary ones.

I hope your shortcuts help you create apps that click with your users. After all, the best journeys often start with just the right combination.

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8

• LinkedIn: David Jaja

• Email: Jajadavidjid@gmail.com

This article will serve as a comprehensive guide on how to come up with meaningful names for class names, variables, and functions with examples and best practices.

Why Does Naming Matter?

• Readability: Good names make your code intuitive and reduce the learning curve for others.

• Maintainability: It is easier to refactor or debug well-named code.

• Collaboration: Clear names improve team communication and productivity.

• Scalability: Meaningful names help keep large projects manageable.

Different Naming Convention Styles

Different naming convention styles are crucial in improving code readability and maintainability across various programming languages.

Styles like camelCase, PascalCase, snake_case, and kebab-case are tailored to specific contexts and practices.

camelCase is widely used for variables and functions, while PascalCase is preferred for classes. snake_case is a favorite in Python for its clarity, and kebab-case dominates CSS for HTML element styling.

Each style ensures consistency, making code intuitive for teams and future developers. Here’s a quick summary table of some popular naming conventions along with their use cases and examples:

How to Choose the Right Style

1. Language-Specific: Follow the conventions of your programming language or framework. For example:

   • JavaScript: camelCase for variables and functions, PascalCase for components.

   • Python: snake_case for variables and functions.

   • CSS/HTML: kebab-case for class names and IDs.

2. Team or Project Standards: Consistency is key. Use the agreed style for your team/project.

3. Purpose-Specific: Use naming styles that best represent the entity being named (for example, constants in SCREAMING_SNAKE_CASE).

General Naming Guidelines

Before diving into specific naming conventions for class names, variables, and functions, let’s explore some universal principles:

1. Be descriptive and concise: Names should convey the purpose or role of the variable/function/etc:

    // Bad
    let x = 10;
   
    // Good
    let maxUsersAllowed = 10;
   

2. Avoid cryptic abbreviations that might be hard for other devs to understand (or even your future self):

    // Bad
    let usrNm = "John";
   
    // Good
    let userName = "John";
   

3. Use consistent naming conventions: Choose a naming style (camelCase, PascalCase, kebab-case, snake_case) and stick with it throughout your project.

4. Avoid reserved keywords or confusing names:

    // Bad
    let let = 5;
   
    // Good
    let variableName = 5;
   

Alright, now that we’ve covered the basis, lets dig deeper into some helpful naming conventions.

How to Create Good Class Names

Class names define the visual or structural behavior of elements in your application. Writing clear class names ensures your HTML and CSS are easy to understand and maintain.

1. Use Descriptive Names

Class names should describe the purpose of the element, not its appearance.

<!-- Bad -->
<div class="red-button"></div>

<!-- Good -->
<div class="primary-button"></div>

2. Follow the BEM (Block-Element-Modifier) Methodology

BEM is a popular convention for writing scalable and maintainable CSS. It separates components into:

• Block: Represents the component (for example, card).

• Element: Represents child elements of the block (for example, card__title).

• Modifier: Represents variations of the block or element (for example, card__title--highlighted).

Example:

<div class="card">
  <h1 class="card__title card__title--highlighted">Welcome</h1>
  <p class="card__description">This is a card component.</p>
</div>

3. Use kebab-case

CSS class names are traditionally written in kebab-case for better readability.

<!-- Bad -->
<div class="primaryButton"></div>

<!-- Good -->
<div class="primary-button"></div>

How to Create Good Variable Names

Variables hold data and should have meaningful names that describe what they represent.

1. Use Nouns for Variables

Variables are typically nouns because they represent entities or data.

// Bad
let a = "John";

// Good
let userName = "John";

2. Use Prefixes to Add Context

Adding prefixes helps clarify the type or purpose of a variable:

• Boolean: is, has, can

• Numbers: max, min, total

• Arrays: Use plural forms (for example, users, items).

Example:

let isUserLoggedIn = true;
const maxUploadLimit = 5; // MB
const usersList = ["John", "Jane"];

3. Avoid Generic Names

Avoid names like data, value, or item unless they’re necessary.

// Bad
let data = 42;

// Good
let userAge = 42;

How to Create Good Function Names

Functions perform actions, so their names should reflect the operation or process they execute.

1. Use Verbs for Functions

Functions are action-oriented, so their names should begin with a verb:

// Bad
function userData() {
  // ...
}

// Good
function fetchUserData() {
  // ...
}

2. Be Specific About Functionality

Function names should indicate what they do.

// Bad
function handle() {
  // ...
}

// Good
function handleFormSubmit() {
  // ...
}

3. Use Prefixes for Intent

• For event handlers: handle, on

• For utilities: calculate, convert, format

• For fetch operations: fetch, get, load

• For setters and getters: set, get

Example:

function handleButtonClick() {
  console.log("Button clicked!");
}

function calculateDiscount(price, discountPercentage) {
  return price * (discountPercentage / 100);
}

How to Know if a Name is Good for a Variable, Function, or Class

To understand if a name is good for a variable, function, or class, evaluating it using several key principles is important. Here’s a guide to help you decide whether a name is appropriate and meaningful in your programming context:

1. Does It Represent the Purpose?

Purpose-driven names are the most important characteristic of good naming. A name should immediately tell you what the variable, function, or class represents or does without needing to read additional comments or documentation.

How to Assess:

Ask yourself: "When I read this name, can I immediately understand its purpose?"

Example:

• userAge is better than a because userAge tells you what the variable represents, whereas a is too ambiguous.

2. Is It Specific Enough?

The name should be specific enough to reflect the exact role of the entity in your code. Overly generic names like data or temp can be confusing because they don’t provide enough context.

How to Assess:

Ask: "Is this name specific to what this variable, function, or class represents in my application?"

Example:

• calculateTaxAmount() is better than calculate() because it’s clear what the function is calculating.

3. Does It Follow a Consistent Naming Convention?

Consistency in naming conventions is vital. When all team members follow the same conventions, the code is easier to understand and navigate.

How to Assess:

Ask: "Is this name consistent with the naming conventions used in the rest of the project?" Follow project guidelines such as:

• camelCase for variables and functions (e.g., userAge)

• PascalCase for classes (e.g., UserProfile)

• UPPERCASE_SNAKE_CASE for constants (e.g., MAX_USERS)

Example:

• If your team follows camelCase, userData is better than UserData.

4. Does it Avoid Ambiguity?

A good name eliminates ambiguity. It should not be open to multiple interpretations. If it can mean different things in different contexts, it will lead to confusion.

How to Assess:

Ask: "Could someone unfamiliar with the codebase misinterpret what this name refers to?"

Example:

• Instead of naming a boolean isValid, use isUserLoggedIn or isEmailVerified to make it clearer what is being checked.

5. Is It Easy to Read and Pronounce?

While not strictly necessary, ease of reading and pronunciation can improve the overall readability and maintainability of your code.

How to Assess:

Ask: "Is this name easy to read aloud, and can I understand it at a glance?"

Avoid long names, and use common abbreviations only when they are widely accepted.

Example:

• maxRetries is better than maximumNumberOfAttemptsToReconnect.

6. Does It Avoid Redundancy?

Avoid redundancy in names. Don’t repeat information that is already implied or described by the context.

How to Assess:

Ask: "Am I repeating information that is already clear from the surrounding context?"

Example:

• If you have a class named User, naming a method userGetData() is redundant. Instead, use getData().

7. Is It Self-Documenting?

The best names document themselves. Good names reduce the need for additional comments or explanations.

How to Assess:

Ask: "Does this name fully describe the variable, function, or class without requiring a comment to explain what it does?"

Example:

• calculateTotalPrice is self-explanatory, so there’s no need for an additional comment like “This function calculates the total price after discount.”

8. Is It Contextual and Relevant to the Domain?

The name should fit within the context of your project and its domain. For example, naming conventions for a web application may differ from those for a mobile app or a machine learning model.

How to Assess:

Ask: "Is this name aligned with the domain and context of my project?"

If you’re working in a specific domain (for example, finance, health, gaming), use domain-specific terms that are easily recognizable.

Example:

• In a gaming app, healthPoints is more appropriate than hp, as it reflects its meaning.

9. Is It Future-Proof?

Think about how your code will evolve. Names should be flexible enough to accommodate future changes without requiring refactoring.

How to Assess:

Ask: "Will this name still make sense if the functionality changes or the project grows?"

Example:

• userInfo could become outdated if the data structure changes. It’s better to use userProfile if you expect more fields to be added.

10. Does It Avoid Magic Numbers and Hard-Coded Values?

Magic numbers (numbers with unclear meaning) should be avoided in favor of named constants.

How to Assess:

Ask: "Does this name represent a meaningful constant, or is it just a raw number?"

Example:

• Instead of using 1000, use a constant like MAX_FILE_SIZE to explain the meaning behind the number.

Practical Examples

CSS Example

The following CSS example demonstrates how to apply BEM (Block-Element-Modifier) naming conventions to maintain a structured and scalable class hierarchy in your stylesheet:

<!-- HTML -->
<div class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item navbar__item--active">Home</li>
    <li class="navbar__item">About</li>
    <li class="navbar__item">Contact</li>
  </ul>
</div>

/* CSS */
.navbar {
  background-color: #333;
  padding: 10px;
}

.navbar__list {
  list-style: none;
}

.navbar__item {
  display: inline-block;
  padding: 10px;
}

.navbar__item--active {
  color: orange;
}

Here’s what’s going on in this code:

• BEM Naming: navbar is the Block, representing the main navigation component.

• navbar__list is the Element, a child of the block, representing the list of navigation items.

• navbar__item is another Element representing individual list items.

• navbar__item--active is a Modifier, used to highlight the active menu item.
  This approach makes it easy to understand relationships and roles within the HTML and CSS, supporting modular and reusable styles.

JavaScript Example

This JavaScript example shows how to use meaningful and consistent naming conventions for variables and functions to make the code self-explanatory:

// Variables
let isUserLoggedIn = false;
const maxAllowedItems = 10;

// Functions
function fetchUserDetails(userId) {
  // Fetch user data from the API
}

function calculateTotalPrice(cartItems) {
  return cartItems.reduce((total, item) => total + item.price, 0);
}

Here’s what’s going on in the code:

• Variables:

  • isUserLoggedIn: A boolean variable named to clearly indicate its purpose. Prefixing with is helps identify it as a boolean.

  • maxAllowedItems: A constant with an uppercase max prefix shows it's a limit, making its intent clear.

• Functions:

  • fetchUserDetails(userId): The name reflects the purpose of the function, that is retrieving user details. The parameter userId is descriptive and avoids ambiguity.

  • calculateTotalPrice(cartItems): The function name explicitly states the action performed. The cartItems parameter is contextually relevant to the e-commerce domain.

Why It’s Good: These conventions ensure the code is readable and intuitive, reducing the cognitive load for other developers working on the same project.

Conclusion

Meaningful naming is both an important convention and an art form that significantly impacts your code's readability and maintainability.

Try to follow these basic principles:

• Use descriptive, concise names.

• Adhere to consistent conventions like BEM for class names and camelCase for variables and functions.

• Use prefixes to add context and clarity.

These and the other tips we’ve discussed here will make your code a joy to work with, whether you revisit it months later or collaborate with a team. Start applying these tips today, and watch your code quality soar.

Here is an overview of what you’ll be building:

You can also check my online collection to see up to 20 variations using a zig-zag shape.

We won’t study all the variations but I will show you a few tricks that’ll help you create as many variations as you want.

How to Create a Zig-Zag Shape

The first step is to create a zig-zag shape. For this, you can grab the code from my CSS shape website: https://css-shape.com/zig-zag-line/.

You can adjust the different variables to get the zig-zag you want. In our case, I will use an easier version with no variables.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  background:
   conic-gradient(from 135deg at top,#000 90deg,#0000 0) top,
   conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

And here is a figure to illustrate how those gradients create the shape:

The first gradient created the red part while the second one created the green part. We have two triangle shapes that repeat horizontally.

Since we have five repetitions, I used aspect-ratio: 5 and 20% (100%/5) in the background-size. You can make it more generic by introducing a variable to control the number of repetitions but as I said previously, I am going to keep things simple.

I want to point out that when using gradients, you can achieve the same result by using different syntaxes. For example, I can update the previous code with the following:

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  background:
   conic-gradient(from 135deg at top   ,#000 90deg,#0000 0),
   conic-gradient(from -45deg at bottom,#000 90deg,#0000 0) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

It’s still the same output but with a different syntax for the second gradient. Did you notice the repeated part within the gradients? That part controls the coloration and we can define it as a variable to avoid repetition and be able to update the color only once in the code.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  --c:#000 /* the color */ 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

Now we have our zig-zag shape and we are ready to animate it.

How to Animate the Zig-Zag Shape

Since we’re using a background, we’ll animate the background-position to get our first loader. The idea is to move the gradients horizontally and create an infinite movement.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  --c:#000 /* the color */ 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
  animation: loading .8s infinite linear;
}

@keyframes loading {
  0%   {background-position: 0   0,12.5% 100%}
  100% {background-position: 25% 0,37.5% 100%}
}

Note how we increased the X value of the background-position by 25%. In case you are wondering what the logic behind that value is, here is the formula:

0.2 / (1 - 0.2) = .25 = 25%

.2 corresponds to the 20% used inside the background-size.

We have our first loader! Actually, two loaders because we can easily change the direction of the movement by adding animation-direction: reverse.

Let’s try a different animation: using clip-path and the inset() value. We can easily adjust this technique to create many variations.

Let’s start with a basic example:

.loader {
  /* same code as previously */
  animation: loading .8s infinite linear;
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

The inset() value creates a rectangle where only the part inside it will be visible. For this, we define a distance from each side of the element (top, right, bottom, left).

Logically, inset(0 0 0 0) shows the whole element since all the distances are equal to 0, but inset(0 100% 0 0) completely hides the element since the right value is equal to 100%. So it will touch the opposite edge, creating an empty rectangle.

By animating that right value from 100% to 0 we create a reveal animation. Another loader variation!

If you inspect the code of the second animation, you will see that I did the same thing but with the left side.

We can also have a sliding effect if we animate both the left and right values while keeping their difference constant.

.loader {
  /* same code as previously */
  animation: loading .8s infinite linear;
}
@keyframes loading {
  0%   {clip-path: inset(0 60% 0 0  )}
  100% {clip-path: inset(0 0   0 60%)}
}

The right value animates from 60% to 0 and the left one from 0 to 60%, so we have a constant difference equal to 60% which will create the illusion of a sliding rectangle. Another cool loader!

By trying different combinations of inset() values, you can get a lot of CSS loaders. Give it a try! You can also check my online collection and try to identify the variations that use clip-path: inset().

How to Create a Discrete Animation

To achieve a discrete animation, you can use the steps() timing function instead of linear. Let’s start with the first example using steps(2).

We can do the same with almost all the variations. Let’s try with the ones that use clip-path: inset().

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(5);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

We have five repetitions so let’s see what we’ll get with steps(5).

At the moment, it’s not good because we don’t see all the repetition. The animation stops at 4 repetitions, but we need to see the whole element (5 repetitions). The count starts from 0 so what we really need is 6 steps instead of 5 to show all the repetitions.

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(6);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

Even with 6 steps, the result is still not good but don’t worry, it’s not a bug. The default behavior of steps() gives us that output but we can update it to get the expected output:

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(6,jump-none);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

If you’re not familiar with jump-none, it’s a value that can fix most of your issues when working with steps(). I wrote a short article about it if you want more details: “How to correctly use steps() with animations“

Our animation looks perfect now! We can also make it an 11-step animation (5×2 + 1) and get another cool loader.

Even the sliding effect can have its discrete variation.

Can you figure out why I am using 4 and 7 steps? I’ll let you do the calculation as a small exercise.

Conclusion

This article showed you how to create zig-zag shapes, how to animate them using clip-path, and how to make a discrete animations. You can also consider more tricks like using both pseudo-elements to have two shapes.

I didn’t explore all the variations but you now have the recipe to create most of them!

You can explore my Zig-Zag loaders collection to study other variations and try to create your own loader. It’s a good opportunity to practice what you have learned from this article.

In this guide, I’ll show you how to host a website using a pre-designed template from CSS templates directly on your EC2 instance.

Before we dive into this guide, make sure you’ve gone through my previous blog on how to launch and connect to an EC2 instance. If you haven’t set up an EC2 instance yet, head over to that post first to get your instance up and running. Once that’s done, you’re all set to proceed!

Step 1: Download the "Built Better" Template

For this tutorial, we’ll use the Built Better template, which is free and easy to set up.

Head over to this link and download the template.

Right-click on the download button and select "Copy clean link". We’ll use this link to download the template directly into your EC2 instance.

Step 2: Download the Template Directly to Your EC2 Instance

Now that you have the link to the template, let’s download it straight to your EC2 instance using wget.

Log in to your EC2 instance via SSH or MobaXterm (as covered in my previous blog) and navigate to the /var/www/html directory where your website files will be stored:

cd /var/www/html

Use the wget command followed by the copied link to download the "Built Better" template directly into your EC2 instance:

sudo wget https://www.free-css.com/assets/files/free-css-templates/download/page284/built-better.zip

Note: After downloading, it's a good idea to check the file name to ensure it matches the file used in the subsequent commands. You can do this by running the ls command:

ls

Step 3: Unzip the Template Files

Now that the template has been downloaded, it’s time to extract it. Install the unzip utility if it’s not already installed:

sudo dnf install unzip -y

Then unzip the template:

sudo unzip built-better.zip -d /var/www/html/

After unzipping, make sure to check the folder name where the files were extracted from. You can do this by listing the contents of the /var/www/html directory:

ls /var/www/html/

In this case, the unzipped contents are located inside a folder named html. This folder contains all the template files. If the folder name is different in your case, adjust the following steps accordingly.

First, move the files from the html folder to the root /var/www/html/ directory:

sudo mv /var/www/html/html/* /var/www/html/

Then remove the unnecessary folder:

sudo rm -r /var/www/html/html

Lastly, remove the ZIP file:

sudo rm built-better.zip

Step 4: Set Up the Web Server to Host Your Template

If you haven’t already, make sure your Apache HTTPD web server is installed and running. You can follow these steps to ensure your server is ready:

Install Apache (if not installed):

sudo yum install httpd -y

Start the Apache service:

sudo systemctl start httpd

Enable Apache to start on boot:

sudo systemctl enable httpd

Now your web server should be up and running, ready to serve your template.

Step 5: Test Your Website

Now for the exciting part seeing your site live! Open a browser and navigate to your EC2 instance’s public IP address. You should now see the Built Better template live and ready to go.

Here’s how to check:

• Find your EC2 instance’s public IP from the AWS EC2 dashboard.

• Enter the IP in your browser, like so: http://your-ec2-public-ip

• Your website should now be live with the Built Better template! 🎉

Wrapping Up

Congratulations! You’ve successfully hosted a professional-looking website using the Built Better CSS template on your EC2 instance.

With just a few steps, you’ve moved from launching an EC2 instance to hosting a fully styled website, all using the AWS powerful cloud infrastructure.

You can follow me on

• Twitter

• LinkedIn