<section class="diZContainer diZmxAuto diZmy8">
    <h1 class="diZBorderBottom">Slug Generator</h1>
    <p class="diZTextJustify">The Slug Generator tool allows you to easily create SEO-friendly slugs from your input text. A slug is a URL-friendly version of a string, typically used in web addresses to identify a specific page or resource. This tool converts any text you input into a lowercase string, removes special characters, and replaces spaces with hyphens to generate a clean and readable URL slug.</p>
    <div class="diZMaxW600 diZmxAuto diZmy20 diZFlexColumn toolsSection">
        <textarea class="diZTextAreaResizeNone" placeholder="Enter text" id="inputText" rows="6"></textarea> <br>
        <button class="diZmxAuto" onclick="generateSlug()"><span>Generate Slug</span></button>
        <p id="copied-notice" class="diZDisplayNone"></p>
        <textarea id="slugOutput" class="diZTextAreaResizeNone diZDisplayNone diZmy4" rows="6"></textarea>
        <button id="copyBtn" class="diZDisplayNone diZmxAuto" onclick="copyToClipboard()"><span>Copy Slug</span></button>
    </div>
    <div>
        <h3>Usage:</h3>
        <ul>
            <li><strong>Enter Text:</strong> Input your desired text into the text area provided.</li>
            <li><strong>Generate Slug:</strong> Click the "Generate Slug" button to convert the text into a URL-friendly slug.</li>
            <li><strong>Copy Slug:</strong> Once generated, the slug will appear in the output text area. Click the "Copy Slug" button to copy it to your clipboard.</li>
            <li><strong>Paste and Use:</strong> Paste the copied slug directly into your web application, blog post, or any other content management system (CMS) where you need a URL slug.</li>
        </ul>
        
        <h3>Features:</h3>
        <ul>
            <li>Converts text to lowercase.</li>
            <li>Removes special characters and replaces spaces with hyphens.</li>
            <li>Provides instant feedback with a "Slug copied to clipboard!" notification upon copying.</li>
        </ul>
        
        <h3>Example Use Cases:</h3>
        <ul>
            <li>Bloggers creating SEO-friendly URLs for their articles.</li>
            <li>Developers generating slugs for dynamic content pages.</li>
            <li>Content managers ensuring consistency and readability in URL structures.</li>
        </ul>
    </div>
</section>
<script>
    function generateSlug() {
        const inputText = document.getElementById('inputText').value;
        const slugOutput = document.getElementById('slugOutput');
        // Generate slug
        const slug = inputText.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');

        // Update output textarea and display copy button
        if (slug.length > 0) {
            document.getElementById('copyBtn').style.display = 'block';
            slugOutput.style.display = 'block';
            slugOutput.value = slug;
        } else {
            document.getElementById('copyBtn').style.display = 'none';
            slugOutput.style.display = 'none';
        }
    }

    function copyToClipboard() {
        const slugOutput = document.getElementById('slugOutput');
        const textArea = document.createElement('textarea');
        textArea.value = slugOutput.value;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);

        // Show copied notice
        document.getElementById('copied-notice').innerHTML = 'Slug copied to clipboard!';
        document.getElementById('copied-notice').style.display = 'block';

        // Hide notice after 1 second
        setTimeout(() => {
            document.getElementById('copied-notice').style.display = 'none';
        }, 1000);
    }
</script>
