Create Your Own Ipsum Generator With JavaScript
Tags: javascript, coding, programming, webdev
Published: 2022-02-01 14:42:31

---
title: Create Your Own Ipsum Generator With JavaScript
published: true
date: 2022-01-31 15:03:58 UTC
tags: javascript, coding, programming, webdev
canonical_url: https://hasnode.byrayray.dev/create-your-own-ipsum-generator-with-javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/483r8000tlplqs1d7k04.jpeg
---

Generating content with random words can be convenient for testing purposes. That's why today, we will create a function that does that.

> Use this code to build your own Ipsum generator, so you have random generated content as much as you like 👍

You could use a library if you want, but since this is so simple and can be built with not so many lines of code, it's nice to make it yourself.

For generating content with random words, we need three functions and a source of the phrase.

1. A function that gives us a random number
2. A function that gives us a random word
3. A function that puts multiple words into a string
4. The source for the words will be a defined Array with words. ([Get it from my Gist](https://gist.github.com/devbyray/8dbac8a32c7c87f659d9b34137e25ba0))

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 1. Generate Random Number

Since we want to get a random word from our source, we need to generate a random index number. With this function, we need to keep in mind what the minimal and maximum of the Array are.

```javascript
Math.random();
// Returns 0.534098468876492
```

With `Math.random()`, we get a random float between 0 and lower than 1. When we multiply that by, for example, 10, we will get a number between 0 and lower than 10. But in this case, we want to have a number not lower than 0 and lower or equal than 10.

```javascript
Math.random() * (10 - 0) + 0;
// Returns 8.448742196214798
```

But right now, it still returns afloat. So we have to use `Math.round` to get an integer.

```javascript
Math.round(Math.random() * (10 - 0) + 0)
// Returns 6 or 5 or 9 or 10
```

With this calculation, we can get a number between 0 and 10 or equal to 10. You can test that quickly if it does what you expect.

```javascript
let number = 0;
let steps = 0;
while(number != 10) {
    number = Math.round(Math.random() * (10 - 0) + 0);
    steps = steps + 1;
    console.log('steps', steps)
}
```

With this code, you are running a loop until it becomes 10. By keeping track of the steps, you can see how many rounds it needs. Every time you run this, you will know that it requires a different amount of rounds.

```javascript
function randomNumber(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}
```

This is this final function to get a random number between two numbers. Let's continue to get a random word from our source, Array.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 2. Get Random Word

I found a nice collection of random words to use for this post. You can [find it on Gist](https://gist.github.com/devbyray/8dbac8a32c7c87f659d9b34137e25ba0). But in this post, I will use a shorter version.

> You can also define your own words in a certain theme. For example [Developer Ipsum](https://developer-ipsum.netlify.app/) or [Cupcake Ipsum](http://www.cupcakeipsum.com/)

```javascript
const word = [
    "Got",
    "ability",
    "shop",
    "recall",
    "fruit",
    "easy",
    "dirty",
    "giant",
    "shaking",
    "ground",
    "weather",
    "lesson",
    "almost",
    "square",
    "forward",
    "bend",
    "cold",
    "broken",
    "distant",
    "adjective."
]
```

We need to use the `randomNumber` function that we created in the previous step to get a random word. In this function, we need to give a minimum and a maximum number as parameters; we can easily do that via this.

```javascript
const word = words[randomNumber(0, words.length - 1)];
```

The first parameter is 0 because of the Array's start with 0. The second parameter is our maximum, so we pick the `words.length - 1`. We do this because, in this example, our Array has 20 words in it so that the length property will give that back. But since an Array starts with counting from 0, the latest position in the Array is 19. That's why we do `- 1`.

```javascript
function getRandomWord() {
    return words[randomNumber(0, words.length - 1)];
}
```

We have our second function to get a random word from the words Array.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 3. Get A String With Random Words

Now we want to get multiple words and make it a string, so we can use it as content for whatever we want. The best we can do that is by generating an Array with several positions.

```javascript
[...Array(10)]
// Returns [undefined, undefined, ....] with 10 items
```

With the `.map` method, we can iterate and fill it with random words.

```javascript
[...Array(10)].map(() => getRandomWord())
// Returns ["hand", "close", "ship", "possibly", "metal", "myself", "everybody", "serious", "adult", "favorite"]
```

Now that we have an Array of random words, we need to turn it into a string using the `.join('')`.

```javascript
[...Array(10)].map(() => getRandomWord()).join('')
```

But, we want to give the string some "sense" of its readability. So every first word in the Array should have the first letter as uppercase. Let’s update our `getRandomWord` function.

```javascript
function getRandomWord(firstLetterToUppercase = false) {
    const word = words[randomNumber(0, words.length - 1)];
    return firstLetterToUppercase ? word.charAt(0).toUpperCase() + word.slice(1) : word;
}
```

As we create a function to generate a function to get the generated string, it would look like this. With the comparison in the `getRandomWord(i === 0)` we give a boolean through the function.

```javascript
function generateWords(length = 10) {
    return [...Array(length)].map((_, i) => getRandomWord(i === 0)).join(' ').trim() + '.';
}

```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 4. Complete

Now that we created all the code, it's time to check the complete code example.

```javascript
const word = [
    "Got",
    "ability",
    "shop",
    "recall",
    "fruit",
    "easy",
    "dirty",
    "giant",
    "shaking",
    "ground",
    "weather",
    "lesson",
    "almost",
    "square",
    "forward",
    "bend",
    "cold",
    "broken",
    "distant",
    "adjective."
]

function getRandomWord(firstLetterToUppercase = false) {
    const word = words[randomNumber(0, words.length - 1)];
    return firstLetterToUppercase ? word.charAt(0).toUpperCase() + word.slice(1) : word;
}

function generateWords(length = 10) {
    return [...Array(length)].map((_, i) => getRandomWord(i === 0)).join(' ').trim() + '.';
}

function randomNumber(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

```

Try the function in this runkit example:

[https://runkit.com/devbyrayray/how-to-generate-a-string-with-random-words](https://runkit.com/devbyrayray/how-to-generate-a-string-with-random-words)

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Thanks!

![hashnode-footer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629789655319/nBF6anHH4w.png)_I hope you learned something new or are inspired to create something new after reading this story! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode._

> Did you know that you can create a [Developer blog like this one, yourself](https://hashnode.com/@devbyrayray/joinme)? It's entirely for free. 👍💰🎉🥳🔥

_If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a [DM on Twitter @DevByRayRay](https://twitter.com/@devbyrayray) when you want to keep it private. My DM's are always open 😁_