In this tutorial, you'll build a fully functional, real-time Word Counter tool from scratch. You'll use HTML for the structure, CSS for a clean design, and vanilla JavaScript to handle the counting logic.

Because this tool runs completely in the browser, it works instantly as you type and keeps your text data completely private.

Let's get started.

Prerequisites

To follow this guide easily, you should have:

• A basic understanding of HTML tags and CSS styling.

• Familiarity with JavaScript concepts like functions, event listeners, and basic Regular Expressions (Regex).

• A code editor (like VS Code) and a web browser.

Table of Contents

• Step 1: Set Up Your Project

• Step 2: Build the HTML Structure

  • Understanding the HTML:

• Step 3: Style the Tool with CSS

  • Understanding the CSS:

• Step 4: Add the JavaScript Logic

  • Understanding the JavaScript:

• Step 5: Test Your Application

Step 1: Set Up Your Project

First, you need to set up your workspace. Create a new folder on your computer and name it word-counter-app.

Inside this folder, create three empty files:

• index.html

• style.css

• script.js

Step 2: Build the HTML Structure

Open your index.html file. You need to create a layout that includes a header, a grid to display the real-time statistics, a text area for the user to type in, and buttons to copy or clear the text.

Add the following 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>Word Counter Tool</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header-section">
        <h1>Word Counter</h1>
        <p class="description">Paste or type your text below to get a real-time count of words, characters, sentences, and paragraphs.</p>
    </header>

    <main class="tool-container">
        
        <!-- Statistics Panel -->
        <div class="stats-grid">
            <div class="stat-box">
                <div class="stat-value" id="wordCount">0</div>
                <div class="stat-label">Words</div>
            </div>
            <div class="stat-box">
                <div class="stat-value" id="charCount">0</div>
                <div class="stat-label">Characters</div>
            </div>
            <div class="stat-box">
                <div class="stat-value" id="sentenceCount">0</div>
                <div class="stat-label">Sentences</div>
            </div>
            <div class="stat-box">
                <div class="stat-value" id="paragraphCount">0</div>
                <div class="stat-label">Paragraphs</div>
            </div>
        </div>

        <!-- User Input Area -->
        <textarea id="textInput" placeholder="Start typing or paste your text here..."></textarea>

        <!-- Action Buttons -->
        <div class="controls">
            <button class="btn-primary" onclick="copyText()" id="copyBtn">Copy Text</button>
            <button class="btn-secondary" onclick="clearText()">Clear</button>
        </div>

    </main>

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

Understanding the HTML:

• The .stats-grid: This holds four separate boxes to show the counts. Each number has a unique id (like wordCount) so JavaScript can find and update it easily.

• The <textarea>: This is the main input box where users will type or paste their content.

• The <script> tag: This connects your HTML to the logic you will write in the next steps.

Step 3: Style the Tool with CSS

Next, you'll give your tool a modern, professional look. You'll use CSS Grid to align the statistics boxes perfectly.

Open your style.css file and add this code:

:root {
    --primary-color: #007bff;
    --bg-color: #f8f9fa;
    --text-dark: #202124;
    --text-muted: #5f6368;
    --border-color: #dadce0;
    --panel-bg: #ffffff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    margin: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-section {
    text-align: center;
    margin-bottom: 30px;
}

h1 {
    font-size: 2.5rem;
    margin: 0 0 10px 0;
    font-weight: 800;
}

p.description {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 1.1rem;
}

.tool-container {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-box {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Text Area */
textarea {
    width: 100%;
    height: 250px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: 20px;
    transition: border-color 0.2s ease;
}

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

/* Buttons */
.controls {
    display: flex;
    gap: 12px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
}

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

.btn-secondary {
    background-color: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--bg-color);
}

Understanding the CSS:

• CSS Grid: The .stats-grid class uses grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));. This makes the four stat boxes automatically stack neatly on top of each other if a user views the tool on a small mobile screen.

• CSS Variables: Using :root at the top allows you to quickly change the brand color later if you want to use something other than the default blue (#007bff).

At this point, the visual design of your tool is complete. Here's what the final Word Counter will look like in your browser:

Step 4: Add the JavaScript Logic

Now you need to make the tool count the text. You'll use an event listener that watches every keystroke. Every time the user types, it recalculates the words, characters, sentences, and paragraphs.

Open your script.js file and paste this code:

const textInput = document.getElementById('textInput');
const wordCountDisplay = document.getElementById('wordCount');
const charCountDisplay = document.getElementById('charCount');
const sentenceCountDisplay = document.getElementById('sentenceCount');
const paragraphCountDisplay = document.getElementById('paragraphCount');
const copyBtn = document.getElementById('copyBtn');

// 1. Listen for user input in real-time
textInput.addEventListener('input', updateStatistics);

// 2. The Core Counting Logic
function updateStatistics() {
    const text = textInput.value;

    // Character Count (includes spaces)
    charCountDisplay.textContent = text.length;

    // Word Count
    const words = text.match(/\S+/g) || [];
    wordCountDisplay.textContent = words.length;

    // Sentence Count
    const sentences = text.split(/[.!?]+(?=\s|$)/).filter(sentence => sentence.trim().length > 0);
    sentenceCountDisplay.textContent = sentences.length;

    // Paragraph Count
    const paragraphs = text.split(/\n+/).filter(paragraph => paragraph.trim().length > 0);
    paragraphCountDisplay.textContent = paragraphs.length;
}

// 3. Copy functionality
function copyText() {
    if (!textInput.value) return;
    
    textInput.select();
    document.execCommand('copy');
    
    // Provide visual feedback
    copyBtn.textContent = 'Copied!';
    setTimeout(() => {
        copyBtn.textContent = 'Copy Text';
    }, 1500);
}

// 4. Clear functionality
function clearText() {
    textInput.value = '';
    updateStatistics(); // Reset counts to zero
}

Understanding the JavaScript:

• The input Event: textInput.addEventListener('input', ...) is the secret to real-time updates. It triggers the counting function the exact moment a key is pressed or text is pasted.

• Counting Words: text.match(/\S+/g) is a Regular Expression that looks for unbroken strings of non-whitespace characters. This is much more accurate than just splitting the text by spaces, because it ignores extra empty spaces left by mistake.

• Counting Sentences: The .split(/[.!?]+(?=\s|$)/) logic cuts the text into pieces every time it sees a period, exclamation mark, or question mark followed by a space.

Step 5: Test Your Application

You're completely done coding! Now it's time to verify that your logic works correctly.

1. Open your word-counter-app folder.

2. Double-click the index.html file to open it in your web browser.

3. Type a few sentences into the text area. Watch the numbers at the top update instantly.

4. Try adding double spaces or hitting the "Enter" key to make new paragraphs, and ensure the logic counts them accurately.

5. Click Copy Text to test the clipboard feature, and Clear to reset the board.

By completing this project, you've built a fast, client-side utility tool using pure vanilla JavaScript. You learned how to manipulate strings, use Regular Expressions for text analysis, and create responsive UI grids.

If you want to see this exact codebase running in a live production environment, you can try out this Online Word Counter. Keep building, and happy coding!

While backend compression tools are common, building a client-side image compressor offers a massive advantage: privacy. When you process images directly in the browser, no user data ever touches a server.

In this tutorial, you'll learn how to build a fully functional, browser-based bulk image compressor. You'll use the HTML5 Canvas API to reduce image file sizes and integrate the JSZip library to package multiple compressed files into a single, convenient ZIP download.

To make this project highly practical, you'll structure the code as an embeddable widget. By omitting standard HTML boilerplate tags, you can easily drop this snippet directly into a WordPress Custom HTML block or any other CMS without causing layout conflicts.

Prerequisites

To follow along, you should have a basic understanding of:

• HTML & CSS: Structuring a UI and creating interactive hover/drag states.

• JavaScript Promises: Handling asynchronous operations like file reading and ZIP generation.

• The Canvas API: Understanding how browsers can draw and manipulate image data natively.

Table of Contents

• Step 1: Build the HTML Structure

  • Understanding the HTML

• Step 2: Style the Interface with CSS

  • Understanding the CSS

• Step 3: Add the JavaScript Logic

  • Understanding the JavaScript

• Conclusion

Step 1: Build the HTML Structure

First, you need to create the visual interface. You'll build a drag-and-drop zone, an invisible file input, and a hidden action panel that appears once the user selects their images.

Add the following code to your file. Notice that you're including the JSZip CDN link right at the top so your script can access it later.

<!-- JSZip Library for Bulk Downloading -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<div class="ic-main-wrapper">
    <div class="ic-title">Image Compressor</div>
    
    <!-- The Drag and Drop Zone -->
    <div class="ic-dropzone-area" id="icDropzone">
        <input type="file" id="icFileInput" multiple accept="image/jpeg, image/png, image/webp, image/gif, image/bmp, image/tiff, image/avif" style="display: none;">
        
        <div class="ic-icon-box">
            <svg viewBox="0 0 24 24">
                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h14l-4-5z"/>
            </svg>
        </div>
        
        <div class="ic-primary-text">
            Drop images here or <span class="ic-browse-link" id="icBrowseBtn">click to browse</span>
        </div>
        <div class="ic-secondary-text">
            Multiple images supported — bulk compress & download as ZIP
        </div>
        
        <div class="ic-format-tags">
            <span>JPEG</span><span>PNG</span><span>WebP</span><span>GIF</span><span>BMP</span><span>TIFF</span><span>AVIF</span>
        </div>
    </div>
    
    <!-- Action Panel (Hidden by default) -->
    <div class="ic-action-panel" id="icActionPanel">
        <div id="icStatusText" class="ic-status-msg">0 images selected</div>
        <button class="ic-btn-primary" id="icCompressBtn">Compress & Download ZIP</button>
    </div>
</div>

Understanding the HTML:

• accept="..." attribute: This restricts the hidden <input type="file"> to only accept image formats, preventing users from accidentally uploading PDFs or text documents.

• Embeddable Structure: Because this markup relies on a single .ic-main-wrapper container rather than full <html> and <body> tags, you can safely embed it into existing web pages without breaking the parent theme.

Step 2: Style the Interface with CSS

Next, you'll apply styling to make the tool look professional and responsive. You'll use a clean, modern aesthetic with a specific brand accent color (#1A73E8) to highlight interactive elements.

Add this <style> block right above your HTML:

<style>
.ic-main-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 850px;
    margin: 20px auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.ic-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin-bottom: 30px;
}

.ic-dropzone-area {
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    background-color: #f8fafc;
    transition: all 0.3s ease;
}

/* Active Drag State */
.ic-dropzone-area.dragover {
    border-color: #1A73E8;
    background-color: #f1f5f9;
}

.ic-icon-box {
    width: 64px;
    height: 64px;
    background-color: #e8f0fe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: #1A73E8;
}

.ic-icon-box svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.ic-primary-text {
    font-size: 1.15rem;
    color: #0f172a;
    font-weight: 500;
    margin-bottom: 12px;
}

.ic-browse-link {
    color: #1A73E8;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

.ic-browse-link:hover {
    text-decoration: underline;
}

.ic-secondary-text {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 24px;
}

.ic-format-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.ic-format-tags span {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 0.8rem;
    padding: 6px 18px;
    border-radius: 20px;
}

.ic-action-panel {
    margin-top: 25px;
    display: none;
    text-align: center;
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.ic-btn-primary {
    background: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s;
}

.ic-btn-primary:hover {
    background: #1557b0;
}

.ic-btn-primary:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.ic-status-msg {
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #334155;
    font-weight: 500;
}
</style>

Understanding the CSS:

• The .dragover Class: This class alters the border and background color of the dropzone. You'll use JavaScript to apply this class dynamically when a user hovers a file over the area, providing crucial visual feedback.

• Unique Prefixes: Notice how every class starts with ic- (Image Compressor). This acts as a CSS namespace, ensuring your tool's styles won't accidentally override or be overridden by other styles on your website.

At this stage, your user interface is fully structured and styled. It will look like this:

Step 3: Add the JavaScript Logic

Now comes the engine of the tool. The JavaScript will handle file selection, convert the images using the Canvas API to reduce their size, and package them into a ZIP file.

Add this <script> block below your HTML:

<script>
document.addEventListener('DOMContentLoaded', () => {
    const dropzone = document.getElementById('icDropzone');
    const fileInput = document.getElementById('icFileInput');
    const browseBtn = document.getElementById('icBrowseBtn');
    const actionPanel = document.getElementById('icActionPanel');
    const statusText = document.getElementById('icStatusText');
    const compressBtn = document.getElementById('icCompressBtn');
    
    let filesArray = [];

    // 1. Handle File Input and Drag & Drop
    browseBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        fileInput.click();
    });
    
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('dragover');
    });
    
    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('dragover');
    });
    
    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('dragover');
        if (e.dataTransfer.files.length) {
            processSelectedFiles(e.dataTransfer.files);
        }
    });

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length) {
            processSelectedFiles(fileInput.files);
        }
    });

    // 2. Validate and Display the Action Panel
    function processSelectedFiles(files) {
        filesArray = Array.from(files).filter(file => file.type.startsWith('image/'));
        if (filesArray.length > 0) {
            actionPanel.style.display = 'block';
            statusText.innerText = `${filesArray.length} image(s) selected. Ready to compress.`;
        }
    }

    // 3. The Core Compression Engine
    function compressImage(file) {
        return new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = (event) => {
                const img = new Image();
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    const ctx = canvas.getContext('2d');
                    
                    // Draw the image onto the canvas
                    ctx.drawImage(img, 0, 0);
                    
                    // Force compatibility: Convert unusual formats to JPEG or WebP
                    let mimeType = file.type;
                    if (mimeType !== 'image/jpeg' && mimeType !== 'image/webp') {
                        mimeType = 'image/jpeg';
                    }
                    
                    // Compress using the canvas.toBlob method at 70% quality (0.7)
                    canvas.toBlob((blob) => {
                        let finalName = file.name;
                        
                        // Ensure the file extension matches the new mimeType
                        if (mimeType === 'image/jpeg' && !finalName.match(/\.(jpg|jpeg)$/i)) {
                            finalName = finalName.substring(0, finalName.lastIndexOf('.')) + '.jpg';
                        }
                        
                        resolve({ name: finalName, blob: blob });
                    }, mimeType, 0.7); 
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);
        });
    }

    // 4. Handle the Bulk ZIP Process
    compressBtn.addEventListener('click', async () => {
        if (filesArray.length === 0) return;
        
        compressBtn.disabled = true;
        
        try {
            const zip = new JSZip();
            const folder = zip.folder("compressed_images");
            
            // Loop through each file and await its compression
            for (let i = 0; i < filesArray.length; i++) {
                statusText.innerText = `Compressing ${i + 1} of ${filesArray.length}...`;
                const compressedData = await compressImage(filesArray[i]);
                folder.file(compressedData.name, compressedData.blob);
            }
            
            statusText.innerText = 'Creating ZIP file...';
            
            // Generate and trigger the ZIP download
            const zipContent = await zip.generateAsync({ type: "blob" });
            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(zipContent);
            downloadLink.download = "compressed_images.zip";
            downloadLink.click();
            
            statusText.innerText = 'Download successful!';
        } catch (error) {
            statusText.innerText = 'An error occurred during compression.';
            console.error(error);
        } finally {
            compressBtn.disabled = false;
        }
    });
});
</script>

Understanding the JavaScript:

• Drag and drop events: The dragover, dragleave, and drop event listeners work together to capture files dragged from a user's desktop directly into the browser window.

• The canvas trick: Browsers can't magically compress files on their own. Instead, the compressImage function reads the image, draws it onto an invisible HTML5 <canvas>, and then uses the canvas.toBlob() method to export a new, optimized version of that image. The 0.7 argument sets the compression quality to 70%.

• Extension handling: Because the canvas exports images as either JPEG or WebP, the script actively checks and renames the file extensions (for example, changing a .png filename to .jpg) before packaging them.

• Asynchronous zipping: A for loop uses await to compress each image sequentially. Once complete, JSZip bundles the blobs into a folder and triggers a programmatic click event on a temporary anchor <a> tag to download the final .zip file.

Conclusion

You've successfully built a fast, client-side bulk image compressor.

By leveraging the Canvas API alongside JSZip, you created a highly practical utility that saves users bandwidth and storage without compromising their privacy. Because the entire codebase is self-contained without HTML boilerplate, it's ready to be deployed instantly on almost any modern web platform.

If you want to see this codebase deployed in a live, production environment, you can test out the functionality over at this Live Image Compressor Tool. Happy coding!

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.