Nick's Blog
Random Palette Generator with TypeScript

Random Palette Generator with TypeScript

Nick747's photo
Nick747
·

4 min read

Hello everyone! Today we're going to build a random generator with TypeScript, a simple project to get started with this language. I highly suggest you read the first article of this Series about TypeScript.

The Logic

First of all, let's think of our website logic. Our generator will have a button to generate 4 colours (our palette). These colours will be generated randomly and will appear like vertical bands on our page. On each band, there will be a text with the HEX code of the colour generated:

Setup our Project

First of all, create a new folder and add the main files: index.html, style.css and main.ts (or script.ts), like this:

/randomPaletteGenerator
- index.html
- /css
    - style.css
- /script
    - main.ts

HTML & CSS

Let's now edit our HTML and CSS.

HTML

Edit the <head>, modify the title and link the CSS. Then in the body create a <div> for our content and, in it, 4 <div>s with an <h1> in it. The div will create the band, while the h1 is the code we'll display. I added classes and IDs like this:

<div class="content">
      <div class="colorContainer">
        <h1 class="colorHex"></h1>
      </div>
      <div class="colorContainer">
        <h1 class="colorHex"></h1>
      </div>
      <div class="colorContainer">
        <h1 class="colorHex"></h1>
      </div>
      <div class="colorContainer">
        <h1 class="colorHex"></h1>
      </div>
</div>

You'll see why we didn't add IDs later in this post. For the button add another <div> with a button inside:

<div>
    <button onclick="button()">GENERATE RANDOM PALETTE</button>
</div>

We'll define the functions later.

CSS

In the CSS let's first add some everyday options:

* {
    font-family: "Inconsolata", monospace;
    margin: 0;
  }

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

For the bands we'll add this code, we give each band a flex-grow: 1 to make all the bands the same size:

.content {
    position: absolute;
    top: 0%;
    bottom: 0%;
    right: 0%;
    left: 0%;
    display: flex;
    flex-wrap: nowrap;
}

.colorContainer {
    color: white;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.colorHex {
    background-color: #121212;
    color: white;
    padding: 5px;
}

And some style to the button:

button {
    position: absolute;
    bottom: 10%;
    right: 40%;
    left: 40%;
    z-index: 10;
    padding: 10px;
    font-size: 20px;
    outline: none;
    border: 4px white solid;
    background-color: #121212;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
}

button:hover {
    background-color: black;
    transform: scale(1.1);
}

TypeScript

Now let's add interaction to our page with TypeScript.

In our script, we'll need to add 3 functions:

  1. to generate the random colour;

  2. to change the colours and the texts;

  3. the button function;

Let's start with the first one. To generate a random HEX code (the color) we need to generate for 6 times a random number between 0 and 16. Convert this number into HEX form and add it to the code we are generating. In code it will be something like this:

const generateColor = (): string => {
    let hexColor: string = '';

    for (let i = 0; i < 6; i++) {
        const randomDigit = Math.floor(Math.random() * 16);
        hexColor += randomDigit.toString(16);
    }

    return hexColor;
}

In the second function, we'll first need to assign every band and every band's text to a variable and change it with a randomly generated colour (with the function from before):

const changeColorText = () => {
    let palette: string[] = [];
    let colorContainers = document.querySelectorAll('.colorContainer') as NodeListOf<HTMLElement>;

    colorContainers.forEach((container) => {
        if (container) {
            let generatedColorHex;
            do {
                generatedColorHex = generateColor();     
            } while (!palette.includes(generatedColorHex));

            palette.push(generatedColorHex);

            container.style.backgroundColor = `#${generatedColorHex}`;

            let hex = container.querySelector('.colorHex');
            if (hex) {
                hex.innerHTML = `#${generatedColorHex}`;
            }
        }
    })
}

Every time I generate a color I put it in an array palette so that every time I show it I check first if it was already a generated color.

The button function will simply call the function from before:

const button = () => {
    changeColorText();
}

We've completed the script and we just have to link it, but before that, just one thing: you can see that in my code I use arrow functions, those are not necessarily needed some programmers might even be irritated by using them all the time.

We've finished the script, now we just need to convert the TypeScript file into a JavaScript one ($ tsc file.ts) and link it to the HTML:

<script src="./main.js"></script> <!-- or the name you preferred -->

The Execution

We've completed our simple website, to open it just open the index.html file in your preferred browser and you will see something like this:

Now, just click the button and 4 different colours will appear:

That's it for this post. You can find the complete GitHub repo here. Thank you for reading this and hope to see you in the next posts.

TypeScriptWeb Developmentcolor palette