How to Build a Lorem Ipsum Text Generator With JavaScript and Vite
Lorem ipsum is text that developers and designers around the world use as a placeholder. If you interact with a lot of UI prototypes, you’ve probably come across it before.
Learn how to build a flexible Lorem ipsum generator with Vite and JavaScript and you’ll flex your development skills with a useful result.
Why Is Lorem Ipsum So Widely Used?
You might be wondering why so many developers and designers choose lorem ipsum when they could just copy a page from a public domain book or similar. The main reason is that it lets the user or viewer get a sense of the visual form of a document or prototype, without driving too much focus to the placeholder text itself.
Imagine you’re designing a newspaper. Instead of going through the trouble of copying text from different sources to make the design as realistic as possible, you could just copy the standard lorem ipsum placeholder text and use that instead.
Lorem ipsum is so widely recognized that you do not even need to specify that it is a placeholder text—virtually everyone who comes across it, will immediately recognize that the text is filler.
Setting Up the Project and Development Server
The code used in this project is available in aGitHub repositoryand is free for you to use under the MIT license. Copy the contents of thestyle.cssand thelorem.jsfiles and paste them into your own local copies of these files.
If you want to have a look at a live version of this project, you can check out thisdemo.
You will be using theVite build toolto set things up. confirm you have Node.js and theNode Package Manager (NPM)or Yarn installed on your machine, then open your terminal and run:
This should scaffold an empty Vite project. Enter the project name, set the framework to “Vanilla” and, the variant to “Vanilla”. After doing that, navigate to the project directory with thecdcommand, then run:
After installing all the dependencies, open the project in your text editor of choice, then modify the project structure to look something like this:
Now, clear the contents of theindex.htmlfile and replace it with the following:
This markup simply defines the user interface. The left side of the screen displays the controls, while the right side shows the output. Next, open themain.jsfile, clear its contents, and add a single line to importstyle.css:
Importing the Lorem File and Defining Global Variables
Open this project’s GitHub repository, copy the contents of thelorem.jsfile, and paste them into your local copy oflorem.js.lorem.jssimply exports a very long string of Lorem Ipsum text that other JavaScript files can use.
In themain.jsfile, import theloremstring from thelorem.jsfile and define the necessary variables:
This code usesa regular expressionto remove any punctuation in theloremtext. Thetextvariable binds this modified version of theloremtext. This should make it easier to generate words and paragraphs.
Creating the Generator Functions
For any randomly generated sentence or paragraph to appear “real”, there needs to be punctuation. After defining the global variables, create a function calledgenerateRandomPunctuation()and in that function create an array calledcharactersand populate it.
The code block above defines an array,characters, that contains different punctuation marks. It defines another variable,character, which it sets to a random element from thecharactersarray. The global variable,lastChar, stores the same value which the function then returns.
Next, create agenerateParagraph()function with acountparameter that has a default value of 100.
In this function, declare aparagrapharray and fetch random words from the globaltextarray, then push it intoparagraph.
Next, add the code to capitalize the first letter in the first word of every paragraph:
Every paragraph ends with a punctuation mark (usually a full stop), so add the code that adds a period to the end of every paragraph.
Next, implement the functionality to add a randomly generated punctuation to a random element in theparagrapharray.
This code block generates a random punctuation character and appends it to the end of a random element from theparagrapharray. After appending the punctuation, it capitalizes the first letter of the next element if the punctuation is not a comma.
Finally, return theparagrapharray formatted as a string:
The lorem ipsum text should have a ‘structure’ based on the number of paragraphs the user specifies. You can use an array to define this ‘structure’. For example, if the user wants a lorem ipsum text with three paragraphs, the ‘structure’ array should look like this:
In the code block above, each “\n \n” represents the spacing between each paragraph. If you logstructure.join("")in the browser console, you should see the following:
Create a function that automatically generates this structure and calls thegenerateParagraphfunction:
Adding Event Listeners to the Controls
Add an “input” event listener to thewordCountControlinput element and in the callback function, set thewordCountto the input value. Then update the label.
Next, add an “input” event listener to theparagraphCountControlinput element and in the callback function set theparagraphCountto the input value and update the label.
Add a “click” event listener to thecopybutton that calls back to thecopyText()when the event triggers.
Lastly, add a “submit” event listener to theformHTML element and call theupdateUIfunction in the callback function.
Finishing Up and Updating the UI
Create a functiongetControlValuesthat returnswordCountandparagraphCountas an object.
Then create theupdateUI()function that renders the generated text on the screen for the user:
Almost done. Create thecopyText()function that writes the text to the clipboard whenever the user clicks the “Copy to Clipboard” button.
Then call theupdateUI()function:
Congratulations! You have built a lorem ipsum text generator with JavaScript and Vite.
Supercharge Your JavaScript Development With Vite
Vite is a popular frontend tool that makes it easy to set up your frontend framework. It supports a variety of frameworks like React, Svelte, SolidJS, and even plain vanilla JavaScript. Many JavaScript developers use Vite because it is very easy to set up and very fast.
Build your complex web apps in less time, with a faster feedback loop, using Vite.
I plugged random USB devices into my phone and was pleasantly surprised by how many actually worked.
The fix was buried in one tiny toggle.
Tor spoiled me forever.
This small feature makes a massive difference.
Your iPhone forgets what you copy, but this shortcut makes it remember everything.
