Build a domain name generator in JavaScript using nested for loops

Introduction

In this tutorial, we'll create a simple domain name generator using JavaScript, specifically by employing nested for loops. By the end of this exercise, you'll have a clear understanding of how to use arrays and loops to generate domain names programmatically.

Setting Up the HTML and JavaScript

First, we begin by creating our basic structure using an index.html file linked to a script.js file. This sets up our boilerplate HTML and prepares us to start coding.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domain Name Generator</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Make sure to run this HTML file using a server (for example, at port 5500), as this allows us to see our changes live.

Creating a Multiplication Table

To understand nested loops better, we'll first create a simple multiplication table. We will define an array called multiplicationTable and use nested for loops to populate it. Here's how:

let multiplicationTable = [];
for (let i = 1; i < 11; i++) (
    for (let j = 1; j < 11; j++) {
        multiplicationTable.push(`${i) times $(j) equals $(i * j)`);
    }
}
console.log(multiplicationTable);

When you run this code, it will log the multiplication table values from 1 x 1 to 10 x 10.

Transitioning to Domain Name Generation

Now let’s transition to creating our domain name generator. We start by defining two arrays: one for prefixes and another for tech-related words.

const prefixes = ["big", "important", "very", "cool", "super"];
const words = ["coders", "tech", "stack", "geeks", "computing"];

We will again utilize nested for loops to combine elements from both arrays to form domain names.

Implementing the Nested Loops

for (let i = 0; i < prefixes.length; i++) (
    for (let j = 0; j < words.length; j++) {
        console.log(`${prefixes[i])$(words[j]).com`);
    }
}

You would expect to see domain names generated like bigcoders.com, bigtech.com, and so on. However, if you see something like 0-0.com, it means there's an error in your indexing.

Fixing Indexing Errors

To access the elements of the array correctly, instead of using the loop variables directly, you need to reference the arrays:

console.log(`$(prefixes[i])$(words[j]).com`);

Now, running the modified code should correctly generate a list of domain names.

Displaying Results in the Browser

Instead of merely logging the domain names to the console, we can display them on the webpage for easier copying.

Replace the logging with code to create and append div elements to the document.body:

for (let i = 0; i < prefixes.length; i++) (
    for (let j = 0; j < words.length; j++) {
        let div = document.createElement('div');
        div.innerText = `${prefixes[i])$(words[j]).com`;
        document.body.appendChild(div);
    }
}

This change allows you to see all generated domain names directly in the browser, making it easier to copy them.

Conclusion

Through this exercise, we’ve not only created a functional domain name generator but also gained a better understanding of how nested loops work in JavaScript.

Keywords

Domain Name
Generator
JavaScript
Nested Loops
Arrays
Multiplication Table
Prefixes
Tech Words

FAQ

Q1: What is a domain name generator?
A1: A domain name generator is a tool that helps users create names for websites by combining various words and phrases.

Q2: What programming language is used in this tutorial?
A2: This tutorial uses JavaScript to implement the domain name generator.

Q3: Why are nested loops used in this generator?
A3: Nested loops allow for iterating through multiple arrays to create combinations of elements from each, which is crucial for generating domain names.

Q4: Can I customize the prefixes and tech words in the generator?
A4: Yes, you can modify the prefixes and words arrays to include any words or phrases you desire for your domain name generation.

Q5: How can I run this code?
A5: You can run the code by setting up an HTML page with the linked JavaScript file and serving it using a local server.