How to generate SLUG in HTML, CSS, and JavaScript

Discover how to develop a personalized slug generator using HTML, CSS, and JavaScript. Our comprehensive guide will walk you through the process of constructing and testing your own slug generator.

The main goals of a slug generator are to improve human readability and search engine optimization by creating a condensed version of a URL string. A slug refers to the segment of a URL that denotes a particular page or post on a site. It is generally found following the domain name and serves to specify the content of that page or post. For instance, in the URL “www.website.com/it-is-a-slug”, the segment “it-is-a-slug” represents the slug.

Slug generators can be used to manually customize the slug to a desired format, or they can be used to automatically generate slug depending on the title of a page or post. These generators can be created using various programming languages, including HTML, CSS, and JavaScript.

A tool that generates slugs for web pages or blog entries in a systematic manner is called slug generator. This is beneficial for a number of reasons:

Slugs play a crucial role in SEO (search engine optimization), as they help search engines in comprehending the content of a web page.
Slugs help avoid naming collisions, ensuring that each page or post possesses a distinct identifier.
Slugs contribute to more user-friendly UTL’s, as they can be customized to be shorter and simpler to recall.

Advantages of Employing a Custom Slug Generator:

Although many online options exist for generating slug, developing your own Custom Slug Generator offers numerous advantages:

Control: A Custom Slug Generator grants you full authority over the slug creating process.
Aesthetics: A Custom Slug Generator allows for the creating of slugs that are visually engaging and easy to memorize.
Flexibility & Personalization: A Custom Slug Generator provides the ability to create slugs that meets your specific requirements which personalize your brand or website’s personality/character.

Let’s begin developing an incredible responsive slug generator tool using HTML, CSS, and JavaScript in a step-by-step manner

HTML code

To kick things off, we should first set up a fundamental HTML file. Within this file, we will create a form element that allows user to enter the title of the page or post, along with a button that will activate the slug generator. Additionally, you might want to add a placeholder where the generated slug can be shown.

Once you have created the file, simply copy and paste the following code into your file. Don’t forget to save the file with a .html extension.

Copy Text

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Custom Slug Generator</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
    <h1>Generate Slug</h1>
  </header>
  <main>
    <form id="generate">
      <label for="title">Create a slug, based on the post title:</label>
      <input type="text" name="title" id="title" placeholder="Slug is needed for this title" onfocus="this.value=''">
      <button class="primary-button" type="submit">Generate</button>
    </form>
    <div id="result">
      <input type="text" ></input>
      <button class="default-button" id="copy" type="button">Copy</button>
    </div>
  </main>
  <script src="script.js"></script>
  </body>
</html>

CSS Code

Next we will set up our CSS file, in this file we apply some fundamental CSS rules. Additionally, we will incorporate padding and margin properties to guarantee that everything appears as intended.

This approach can enhance the visual appeal of the page and improve user experience. Create a CSS file named style.css and insert the provided codes into your CSS file. Keep in mind that the file must have a .css extension.

Copy Text

html {
  --clr-white: #ffffff;
  --clr-primary: hsl(304, 74%, 54%);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  background-color: #94a1f6;
  color: #333333;
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

body > * + * {
  margin-top: 1em;
}

header, main {
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#generate {
  --paddingX: calc(.75em - 1px);
  --paddingY: calc(.5em - 1px);
  --borderR: 0.375em;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

input[type="text"] {
  font-size: 1em;
  background-color: var(--clr-white);
  border: 1px solid #dbdbdb;
  border-radius: var(--borderR);
  padding: var(--paddingY) var(--paddingX);
  box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%);
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 0.125em rgb(72 95 199 / 25%);
}

button {
  text-align: center;
  font: inherit;
  color: var(--color);
  background: var(--bgColor);
  border: 1px solid var(--borderColor);
  border-radius: var(--borderR);
  padding: var(--paddingY) var(--paddingX);
  margin: 0;
  display: block;
  cursor: pointer;
}

button:focus {
  outline-offset: 2px;
}

.primary-button {
  --color: var(--clr-white);
  --bgColor: var(--clr-primary);
  --borderColor: var(--clr-primary);
}

.default-button {
  --color: hsl(217deg 23% 27%);
  --bgColor: var(--clr-white);
  --borderColor: hsl(216deg 16% 84%);
}

#result {
  visibility: hidden;
  --paddingX: 6px;
  --paddingY: 2px;
  --borderR: 0.375em;
  background-color: hsl(62, 82%, 83%);
  color: #da1039;
  padding: calc(var(--paddingY) * 5) calc(var(--paddingX) * 2);
  margin-top: 1.5em;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

#result input {
  font-size: 1em;
  background: transparent;
  border: none;
  height: auto;
  resize: none;
  display: block;
  flex: 1;
}

JavaScript Code

Lastly, we must write a function that will use the supplied title to generate a slug. In order to perform this operation, the inputted text will probably need to be edited to remove spaces and special characters before being formatted appropriately for a URL slug.

Copy Text

const create = document.getElementById("generate");
const output = document.querySelector("#result input");
const copy = document.getElementById("copy");
const showDiv = document.getElementById("result");

create.addEventListener("submit", function (e) {
  e.preventDefault();

  const title = e.target.title.value;
  const slug = title.toLowerCase().split(" ").join("-").replace(/[:.,?!]/gi, "");

  if (output) {
    output.value = slug;
    e.target.title.value = "";
    showDiv.style.visibility = "visible";
  } else {
    console.error("Sth wrong...");
  }
});

function copy2clipboard() {
  let custom_code = output.select();
    document.execCommand('copy'); 
}

copy.addEventListener("click", copy2clipboard);

We have demonstrated in this tutorial how to use HTML, CSS, and JavaScript to create a Custom Slug Generator. We started by defining a slug generator and outlining the benefits of using a custom slug generator.

We also discussed best practices for creating a Slug Generator during this process, including creating descriptive and easy-to-use slugs, handling edge circumstances, and making sure the slug generator is responsive and reachable.

Making your own Custom Slug Generator allows you to produce slugs that are visually pleasing, customized, and align with your own requirements and preferences. We hope you found this tutorial useful and are now ready to build your own Custom Slug Generator. Have fun with your coding!