June 17, 2021

How to Generate Random Data in Javascript using Chance JS

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to generate random data in javascript using Chance JS. When we talk about random data that means we are looking for some sort of fake data such as address, name, zip code, credit card number, etc. and in no way that data is connected to each other.

There are a bunch of third-party libraries that can help us in generating random data and the most popular one is Faker JS. But apart from this, there is one more library which is not widely popular, contains a limited amount of properties and methods and can get the job done. That library is Chance JS.

I suggest you to have a look over Chance JS docs to learn more about it since we are only going to cover 4-5 methods for random data generation.

In the following example, we are going to use some of the basic methods of Chance JS to generate some random data and display that on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, textarea, and button). The div element is just a wrapper for the rest of the elements.
The button element has “Generate” as innerText.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="text" id="firstname" placeholder="Enter First Name">
        <input type="text" id="lastname" placeholder="Enter Last Name">
        <input type="date" id="dob">
        <input type="text" id="website" placeholder="Enter Website">
        <textarea id="bio" rows="4" placeholder="Enter Bio"></textarea>
        <button>Generate</button>        
    </div>
    <script src="http://chancejs.com/chance.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

div {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin: auto;
}

input, button, textarea{
    margin: 5px;
    padding: 10px 20px;
}

Javascript

We have selected all the input elements and the button element using the document.querySelector() method and stored them in firstName, lastName, dob, website, bio, and btnGenerate variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are generating random data and displaying that in the input and textarea fields.
The first() method generates a random first name.
The last() method generates a random last name.
The birthday() method generates a random date of birth.
The domain() method generates a random domain name.
The sentence() method generates a random sentence.

let firstname = document.querySelector('#firstname');
let lastname = document.querySelector('#lastname');
let dob = document.querySelector('#dob');
let website = document.querySelector('#website');
let bio = document.querySelector('#bio');
let btnGenerate = document.querySelector('button');

btnGenerate.addEventListener('click', () => {
    firstname.value = chance.first({gender:'male'});
    lastname.value = chance.last();
    dob.valueAsDate = chance.birthday();
    website.value = chance.domain({tld: 'com'});
    bio.value = chance.sentence({words:20});    
});

You May Also Like: