✨ The Prompt Phrase
console.assert(petsArray.length > 5);

💻 Code Preview

📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Assert Command in Node.js - Comprehensive Report</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            padding: 60px 20px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            margin-bottom: 30px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: slideDown 0.8s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            font-size: 3em;
            color: #667eea;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .subtitle {
            font-size: 1.3em;
            color: #764ba2;
            font-weight: 300;
        }

        .node-logo {
            width: 100px;
            height: 100px;
            margin: 20px auto;
            background: linear-gradient(135deg, #68a063 0%, #43853d 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            color: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        section {
            background: white;
            margin: 30px 0;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: fadeIn 0.8s ease-out;
            transition: transform 0.3s ease;
        }

        section:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h2 {
            color: #667eea;
            font-size: 2.2em;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #764ba2;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        h3 {
            color: #764ba2;
            font-size: 1.6em;
            margin: 25px 0 15px;
        }

        .icon {
            font-size: 1.2em;
        }

        p {
            margin-bottom: 15px;
            color: #555;
            font-size: 1.1em;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 25px;
            border-radius: 10px;
            margin: 20px 0;
            overflow-x: auto;
            position: relative;
            border-left: 4px solid #667eea;
        }

        .code-block::before {
            content: 'Node.js';
            position: absolute;
            top: 5px;
            right: 10px;
            color: #68a063;
            font-size: 0.8em;
            font-weight: bold;
        }

        pre {
            margin: 0;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
        }

        .highlight {
            background: linear-gradient(120deg, #ffd89b 0%, #19547b 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }

        .advantage-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .advantage-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            transition: transform 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .advantage-card:hover {
            transform: scale(1.05) rotate(2deg);
        }

        .advantage-card h4 {
            font-size: 1.3em;
            margin-bottom: 10px;
        }

        .table-container {
            overflow-x: auto;
            margin: 20px 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            text-align: left;
            font-size: 1.1em;
        }

        td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        tr:hover {
            background: #f5f5f5;
        }

        .interactive-demo {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
        }

        .demo-input {
            width: 100%;
            padding: 15px;
            font-size: 1.1em;
            border: 2px solid #667eea;
            border-radius: 10px;
            margin: 10px 0;
        }

        .demo-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 40px;
            border: none;
            border-radius: 10px;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .demo-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .demo-output {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            min-height: 60px;
            font-family: monospace;
        }

        .success {
            color: #4caf50;
        }

        .error {
            color: #f44336;
        }

        .tip-box {
            background: #fff3cd;
            border-left: 5px solid #ffc107;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
        }

        .tip-box strong {
            color: #856404;
        }

        footer {
            text-align: center;
            padding: 30px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            margin-top: 40px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        }

        .badge {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            margin: 5px;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2em;
            }

            h2 {
                font-size: 1.6em;
            }

            section {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="node-logo">⚡</div>
            <h1>The Assert Command in Node.js</h1>
            <p class="subtitle">Master Testing & Validation with Node.js Assert Module</p>
            <div>
                <span class="badge">Node.js</span>
                <span class="badge">Testing</span>
                <span class="badge">Debugging</span>
                <span class="badge">Quality Assurance</span>
            </div>
        </header>

        <section>
            <h2><span class="icon">📚</span> Introduction to Assert</h2>
            <p>The <span class="highlight">assert module</span> in Node.js is a powerful built-in module designed to provide a set of assertion functions for verifying invariants in your code. Think of it as your code's personal quality control inspector!</p>
            
            <p>Assert helps you validate assumptions about your code's behavior during development and testing. It's like having a safety net that catches bugs before they become problems in production.</p>

            <div class="tip-box">
                <strong>💡 Fun Fact:</strong> The assert module is inspired by the assertion testing frameworks used in other programming languages and has been part of Node.js since its early versions!
            </div>
        </section>

        <section>
            <h2><span class="icon">🎯</span> What is Assert?</h2>
            <p>Assert is a built-in Node.js module that provides a way to test expressions and throw errors when those expressions evaluate to false. It's primarily used for:</p>
            
            <ul style="margin-left: 30px; color: #555; font-size: 1.1em; line-height: 2;">
                <li><strong>Unit Testing:</strong> Verifying that individual functions work correctly</li>
                <li><strong>Debugging:</strong> Catching logic errors during development</li>
                <li><strong>Validation:</strong> Ensuring data meets expected criteria</li>
                <li><strong>Code Quality:</strong> Maintaining consistent behavior across your application</li>
            </ul>

            <div class="code-block">
                <pre>
// Basic usage of assert module
const assert = require('assert');

// Simple assertion
assert(true); // Passes
assert(1 === 1); // Passes
// assert(false); // Would throw AssertionError
                </pre>
            </div>
        </section>

        <section>
            <h2><span class="icon">🚀</span> Getting Started with Assert</h2>
            
            <h3>Installation & Import</h3>
            <p>The best part? Assert is built into Node.js, so no installation required! Just import it:</p>

            <div class="code-block">
                <pre>
// CommonJS (Traditional Node.js)
const assert = require('assert');

// ES6 Modules
import assert from 'assert';

// Using strict mode (recommended)
const assert = require('assert').strict;
                </pre>
            </div>

            <div class="tip-box">
                <strong>⚡ Pro Tip:</strong> Always use <code>assert.strict</code> for better type checking and more predictable behavior!
            </div>
        </section>

        <section>
            <h2><span class="icon">🔧</span> Core Assert Methods</h2>

            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>Method</th>
                            <th>Description</th>
                            <th>Use Case</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>assert()</strong></td>
                            <td>Tests if value is truthy</td>
                            <td>Basic boolean checks</td>
                        </tr>
                        <tr>
                            <td><strong>assert.strictEqual()</strong></td>
                            <td>Tests strict equality (===)</td>
                            <td>Comparing exact values</td>
                        </tr>
                        <tr>
                            <td><strong>assert.deepEqual()</strong></td>
                            <td>Tests deep equality of objects</td>
                            <td>Comparing objects and arrays</td>
                        </tr>
                        <tr>
                            <td><strong>assert.notEqual()</strong></td>
                            <td>Tests inequality</td>
                            <td>Ensuring values differ</td>
                        </tr>
                        <tr>
                            <td><strong>assert.throws()</strong></td>
                            <td>Expects a function to throw</td>
                            <td>Testing error handling</td>
                        </tr>
                        <tr>
                            <td><strong>assert.doesNotThrow()</strong></td>
                            <td>Expects no error</td>
                            <td>Verifying safe execution</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section>
            <h2><span class="icon">💻</span> Practical Examples</h2>

            <h3>1. Basic Assertions</h3>
            <div class="code-block">
                <pre>
const assert = require('assert').strict;

// Testing truthy values
assert(true);
assert(1);
assert('hello');

// Testing equality
assert.strictEqual(2 + 2, 4);
assert.strictEqual('hello', 'hello');

// Testing inequality
assert.notStrictEqual(5, '5'); // Different types
assert.notStrictEqual(true, false);
                </pre>
            </div>

            <h3>2. Object & Array Comparison</h3>
            <div class="code-block">
                <pre>
const assert = require('assert').strict;

// Deep equality for objects
const user1 = { name: 'John', age: 30 };
const user2 = { name: 'John', age: 30 };

assert.deepStrictEqual(user1, user2); // Passes

// Array comparison
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

assert.deepStrictEqual(arr1, arr2); // Passes
                </pre>
            </div>

            <h3>3. Testing Error Handling</h3>
            <div class="code-block">
                <pre>
const assert = require('assert').strict;

// Function that should throw an error
function divide(a, b) {
    if (b === 0) {
        throw new Error('Cannot divide by zero');
    }
    return a / b;
}

// Test that error is thrown
assert.throws(
    () => divide(10, 0),
    Error,
    'Cannot divide by zero'
);

// Test that function works normally
assert.doesNotThrow(() => divide(10, 2));
                </pre>
            </div>

            <h3>4. Real-World Example: Form Validation</h3>
            <div class="code-block">
                <pre>
const assert = require('assert').strict;

function validateUser(user) {
    // Ensure user object exists
    assert(user, 'User object is required');
    
    // Validate name
    assert(user.name, 'Name is required');
    assert.strictEqual(typeof user.name, 'string', 'Name must be a string');
    
    // Validate age
    assert(user.age, 'Age is required');
    assert(user.age >= 18, 'User must be 18 or older');
    
    // Validate email
    assert(user.email, 'Email is required');
    assert(user.email.includes('@'), 'Email must be valid');
    
    return true;
}

// Testing the validation
try {
    validateUser({
        name: 'Alice',
        age: 25,
        email: 'alice@example.com'
    });
    console.log('✓ User validation passed!');
} catch (error) {
    console.error('✗ Validation failed:', error.message);
}
                </pre>
            </div>
        </section>

        <section>
            <h2><span class="icon">⭐</span> Advantages of Using Assert</h2>

            <div class="advantage-grid">
                <div class="advantage-card">
                    <h4>🎯 Built-in Solution</h4>
                    <p>No external dependencies needed - it's part of Node.js core</p>
                </div>

                <div class="advantage-card">
                    <h4>🚀 Fast & Lightweight</h4>
                    <p>Minimal overhead with maximum performance</p>
                </div>

                <div class="advantage-card">
                    <h4>🔍 Early Bug Detection</h4>
                    <p>Catch errors during development before production</p>
                </div>

                <div class="advantage-card">
                    <h4>📖 Self-Documenting Code</h4>
                    <p>Assertions serve as inline documentation</p>
                </div>

                <div class="advantage-card">
                    <h4>🛡️ Type Safety</h4>
                    <p>Strict mode ensures predictable comparisons</p>
                </div>

                <div class="advantage-card">
                    <h4>🔧 Easy Integration</h4>
                    <p>Works seamlessly with testing frameworks</p>
                </div>
            </div>
        </section>

        <section>
            <h2><span class="icon">🎨</span> Answering Your Original Question</h2>
            
            <h3>How to Display Nothing if True, or Show False Status</h3>
            <p>Here's how to handle conditional display based on variable truthiness using Node.js:</p>

            <div class="code-block">
                <pre>
// Method 1: Using assert with try-catch
const assert = require('assert').strict;

function displayStatus(variable, variableName) {
    try {
        assert(variable, `${variableName} is false or falsy`);
        // If assertion passes (variable is true), display nothing
        return '';
    } catch (error) {
        // If assertion fails (variable is false), display the error
        return `❌ ${error.message}`;
    }
}

// Examples
console.log(displayStatus(true, 'myVar'));    // Displays nothing
console.log(displayStatus(false, 'myVar'));   // Displays: ❌ myVar is false or falsy
console.log(displayStatus(null, 'myVar'));    // Displays: ❌ myVar is false or falsy

// Method 2: Simple conditional without assert
function simpleDisplay(variable) {
    return variable ? '' : 'Variable is false';
}

console.log(simpleDisplay(true));   // ''
console.log(simpleDisplay(false));  // 'Variable is false'

// Method 3: Using assert for validation in text prompts
function promptWithValidation(userInput, fieldName) {
    const message = [];
    
    try {
        assert(userInput, `${fieldName} cannot be empty`);
        assert.strictEqual(typeof userInput, 'string', `${fieldName} must be a string`);
        assert(userInput.length >= 3, `${fieldName} must be at least 3 characters`);
        
        // All validations passed
        return { valid: true, message: '' };
    } catch (error) {
        return { valid: false, message: error.message };
    }
}

// Usage example
const result = promptWithValidation('', 'Username');
if (!result.valid) {
    console.log(`Error: ${result.message}`);
} else {
    console.log(''); // Display nothing when valid
}
                </pre>
            </div>

            <h3>Advanced: Custom Display Helper</h3>
            <div class="code-block">
                <pre>
const assert = require('assert').strict;

class ConditionalDisplay {
    constructor() {
        this.errors = [];
    }

    check(condition, errorMessage) {
        try {
            assert(condition, errorMessage);
        } catch (error) {
            this.errors.push(error.message);
        }
        return this;
    }

    display() {
        if (this.errors.length === 0) {
            return ''; // Display nothing if all checks pass
        }
        return this.errors.join('\n');
    }

    hasErrors() {
        return this.errors.length > 0;
    }
}

// Usage
const validator = new ConditionalDisplay();

validator
    .check(true, 'This won\'t show')
    .check(false, 'This will show: Variable is false')
    .check(null, 'This will show: Value is null');

const output = validator.display();
console.log(output || 'All validations passed!');
                </pre>
            </div>
        </section>

        <section>
            <h2><span class="icon">🎮</span> Interactive Demo</h2>
            
            <div class="interactive-demo">
                <h3>Try It Yourself!</h3>
                <p>Enter values to test assert behavior:</p>
                
                <label for="value1">Value 1:</label>
                <input type="text" id="value1" class="demo-input" placeholder="Enter first value">
                
                <label for="value2">Value 2:</label>
                <input type="text" id="value2" class="demo-input" placeholder="Enter second value">
                
                <label for="testType">Select Test Type:</label>
                <select id="testType" class="demo-input">
                    <option value="equal">Strict Equal (===)</option>
                    <option value="notEqual">Not Equal (!==)</option>
                    <option value="truthy">Is Truthy</option>
                    <option value="type">Type Check</option>
                </select>
                
                <button class="demo-button" onclick="runAssertTest()">Run Assert Test</button>
                
                <div class="demo-output" id="output">Results will appear here...</div>
            </div>
        </section>

        <section>
            <h2><span class="icon">📋</span> Best Practices</h2>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
                <div style="background: #e8f5e9; padding: 20px; border-radius: 10px; border-left: 4px solid #4caf50;">
                    <h4 style="color: #2e7d32; margin-bottom: 10px;">✅ DO</h4>
                    <ul style="color: #555; line-height: 1.8;">
                        <li>Use <code>assert.strict</code> for better type safety</li>
                        <li>Write descriptive error messages</li>
                        <li>Use assert in development and testing</li>
                        <li>Combine with proper error handling</li>
                        <li>Test edge cases and boundary conditions</li>
                    </ul>
                </div>
                
                <div style="background: #ffebee; padding: 20px; border-radius: 10px; border-left: 4px solid #f44336;">
                    <h4 style="color: #c62828; margin-bottom: 10px;">❌ DON'T</h4>
                    <ul style="color: #555; line-height: 1.8;">
                        <li>Don't use assert for production validation</li>
                        <li>Don't ignore assertion errors</li>
                        <li>Don't use vague error messages</li>
                        <li>Don't rely on assert for security checks</li>
                        <li>Don't mix assert with production logic</li>
                    </ul>
                </div>
            </div>
        </section>

        <section>
            <h2><span class="icon">🔥</span> Common Use Cases</h2>

            <h3>1. Testing API Responses</h3>
            <div class="code-block">
                <pre>
const assert = require('assert').strict;

async function testAPI() {
    const response = await fetch('https://api.example.com/users/1');
    const data = await response.json();
    
    // Assert API response structure
    assert(data, 'Response should not be null');
    assert.strictEqual(data.id, 1);
    assert(Array.isArray(data.posts), 'Posts should be an array');
    assert(data.email.includes('@'), 'Email should be valid');
}
                </pre>
            </div>

            <h3>2. Database Query Validation</h3>
            <div class="code-block">
                <pre>
const assert = require('assert').strict;

function validateDatabaseResult(result) {
    assert(result, 'Database result cannot be null');
    assert(result.rowCount > 0, 'No rows returned from query');
    assert.strictEqual(typeof result.rows, 'object', 'Rows must be an object');
    
    return result;
}
                </pre>
            </div>

            <h3>3. Configuration Validation</h3>
            <div class="code-block">
                <pre>
const assert = require('assert').strict;

function loadConfig(config) {
    assert(config, 'Configuration object is required');
    assert(config.port, 'Port number is required');
    assert(config.port > 0 && config.port < 65536, 'Invalid port number');
    assert(config.database, 'Database configuration is required');
    assert(config.database.host, 'Database host is required');
    
    return config;
}
                </pre>
            </div>
        </section>

        <section>
            <h2><span class="icon">🆚</span> Assert vs Other Testing Tools</h2>

            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>Feature</th>
                            <th>Assert (Built-in)</th>
                            <th>Jest</th>
                            <th>Chai</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Installation</strong></td>
                            <td>✅ Built-in</td>
                            <td>❌ npm install</td>
                            <td>❌ npm install</td>
                        </tr>
                        <tr>
                            <td><strong>Learning Curve</strong></td>
                            <td>✅ Simple</td>
                            <td>⚠️ Moderate</td>
                            <td>⚠️ Moderate</td>
                        </tr>
                        <tr>
                            <td><strong>Performance</strong></td>
                            <td>✅ Fastest</td>
                            <td>⚠️ Good</td>
                            <td>⚠️ Good</td>
                        </tr>
                        <tr>
                            <td><strong>Features</strong></td>
                            <td>⚠️ Basic</td>
                            <td>✅ Rich</td>
                            <td>✅ Rich</td>
                        </tr>
                        <tr>
                            <td><strong>Best For</strong></td>
                            <td>Quick tests, validation</td>
                            <td>Full test suites</td>
                            <td>BDD-style testing</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section>
            <h2><span class="icon">💡</span> Tips & Tricks</h2>

            <div class="code-block">
                <pre>
// Tip 1: Custom assertion messages
assert.strictEqual(result, expected, `Expected ${expected} but got ${result}`);

// Tip 2: Async assertions
async function testAsync() {
    const data = await fetchData();
    assert(data, 'Data should exist');
}

// Tip 3: Chaining validations
function validateChain(obj) {
    assert(obj);
    assert(obj.name);
    assert(obj.email);
    return true;
}

// Tip 4: Using with testing frameworks
describe('My Function', () => {
    it('should return correct value', () => {
        const result = myFunction();
        assert.strictEqual(result, expectedValue);
    });
});

// Tip 5: Conditional assertions in development
if (process.env.NODE_ENV === 'development') {
    assert(debugVariable, 'Debug variable should be set');
}
                </pre>
            </div>
        </section>

        <section>
            <h2><span class="icon">🎓</span> Summary & Key Takeaways</h2>
            
            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; margin: 20px 0;">
                <h3 style="color: white; margin-bottom: 20px;">What We Learned:</h3>
                <ul style="font-size: 1.1em; line-height: 2;">
                    <li>✅ Assert is a powerful built-in Node.js module for testing and validation</li>
                    <li>✅ It helps catch bugs early in the development process</li>
                    <li>✅ Use <code>assert.strict</code> for better type safety</li>
                    <li>✅ Perfect for unit tests, validation, and debugging</li>
                    <li>✅ Lightweight and fast with zero dependencies</li>
                    <li>✅ Should be used in development/testing, not production validation</li>
                </ul>
            </div>

            <div class="tip-box">
                <strong>🎯 Remember:</strong> Assert is your friend during development! It helps you write more reliable code by catching assumptions that turn out to be wrong. Use it liberally in tests, sparingly in development code, and never for production validation or security checks.
            </div>
        </section>

        <footer>
            <h3>🚀 Start Using Assert Today!</h3>
            <p>Now you're equipped with everything you need to use the assert module effectively in your Node.js projects.</p>
            <p style="margin-top: 20px; color: #667eea; font-weight: bold;">Happy Coding! 💻✨</p>
            <p style="margin-top: 10px; color: #999; font-size: 0.9em;">Created with ❤️ for Node.js developers</p>
        </footer>
    </div>

    <script>
        function runAssertTest() {
            const value1 = document.getElementById('value1').value;
            const value2 = document.getElementById('value2').value;
            const testType = document.getElementById('testType').value;
            const output = document.getElementById('output');

            try {
                let result = '';
                let passed = false;

                switch(testType) {
                    case 'equal':
                        passed = value1 === value2;
                        result = passed 
                            ? `✅ Success: "${value1}" === "${value2}"` 
                            : `❌ Failed: "${value1}" !== "${value2}"`;
                        break;

                    case 'notEqual':
                        passed = value1 !== value2;
                        result = passed 
                            ? `✅ Success: "${value1}" !== "${value2}"` 
                            : `❌ Failed: "${value1}" === "${value2}"`;
                        break;

                    case 'truthy':
                        passed = Boolean(value1);
                        result = passed 
                            ? `✅ Success: "${value1}" is truthy` 
                            : `❌ Failed: "${value1}" is falsy`;
                        break;

                    case 'type':
                        const type1 = typeof value1;
                        const type2 = typeof value2;
                        passed = type1 === type2;
                        result = passed 
                            ? `✅ Success: Both are type "${type1}"` 
                            : `❌ Failed: "${value1}" is ${type1}, "${value2}" is ${type2}`;
                        break;
                }

                output.innerHTML = `<span class="${passed ? 'success' : 'error'}">${result}</span>`;

                // Add some animation
                output.style.animation = 'none';
                setTimeout(() => {
                    output.style.animation = 'fadeIn 0.5s ease-out';
                }, 10);

            } catch (error) {
                output.innerHTML = `<span class="error">❌ Error: ${error.message}</span>`;
            }
        }

        // Add some interactivity to sections
        document.querySelectorAll('section').forEach((section, index) => {
            section.style.animationDelay = `${index * 0.1}s`;
        });

        // Smooth scroll for better UX
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    </script>
</body>
</html>
Live Preview