69 lines
2.4 KiB
PHP
69 lines
2.4 KiB
PHP
<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>
|
|
<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;
|
|
|
|
}
|
|
function copyToClipboard() {
|
|
const slugOutput = document.getElementById('slugOutput');
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = slugOutput.textContent;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textArea);
|
|
document.getElementById('copied-notice').style.display = 'block';
|
|
document.getElementById('copied-notice').innerHTML = 'Slug copied to clipboard!';
|
|
}
|
|
</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>
|
|
|