Slugs are widely used in blogs, e-commerce, and CMS platforms for clean and SEO-friendly URLs.
Things to do
- Create an input where the user can type text.
- Implement a slugify function that follows these rules:
- Convert all characters to lowercase.
- Remove accents/diacritics (e.g., Café → cafe).
- Replace any sequence of spaces or special characters with a single -.
- Return an empty string if the input is only whitespace.
- Display the resulting slug below the input.
ClassNames
Use this classnames in your code
- Input -> input-box
- Result -> result
Examples
input: "My First Blog!"
output: "my-first-blog"
input: "Café del Mar!"
output: "cafe-del-mar"
input: " "
output: ""
Testing Instructions
Please use the following data-testid attributes in your React component:
- input-box → for the input field
- result → for the slug output
