dwd/tools
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

t

Browse Source
This commit is contained in:
Suvodip
2024-07-11 12:45:10 +05:30
parent d368213568
commit 040c4b87c1
33 changed files with 1042 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
slug-generator.php
View File

@@ -1,68 +1,71 @@
<div class="container-dxe">
<h1 style="text-align: center; font-size: 25px; padding-bottom: 6px;">Slug Generator</h1>
<input class="slug-input" type="text" id="inputText" placeholder="Enter text">
<button class="button-style" onclick="generateSlug()">Generate Slug</button>
<div id="slugOutput" style="border: 2px solid #ddd; display: none; padding: 6px; border-radius: 6px; margin-top: 10px;"></div>
<P style="display: none; text-align: center;" id="copied-notice"></P>
<button class="button-style" style="margin-top: 10px; width: 100%; display: none;" id="copyBtn" onclick="copyToClipboard()">Copy Slug</button>
</div>
<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, '-');
// console.log(slug.length)
// Update output
if(slug.length > 0){
document.getElementById('copyBtn').style.display = 'block';
document.getElementById('slugOutput').style.display = 'block';
}
slugOutput.textContent = slug;
// 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.textContent;
textArea.value = slugOutput.value;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
document.getElementById('copied-notice').style.display = 'block';
// 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>
<style>
.container-dxe {
max-width: 600px;
margin: 50px auto;
background-color: #3d3d3d;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.slug-input {
width: calc(100%);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.button-style{
padding: 10px 20px;
background-color: #7d7d7d;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button-style:hover {
background-color: #9d9d9d;
}
</style>