Building a random colour generator with HTML, CSS & JS

Mon, 15 Apr 2024 00:00:00 GMT

Recently, for a project, I needed to test a bunch of colours to make sure the font colour & design remained legible across a few different backgrounds.

I thought it would be cool to quickly put together a colour generator which could do a couple things:

Generate a random hex value (duh…) -> Have a button to easily copy that value -> Generate another random colour

That’s it really. Nice & easy.

I could, of course, have used something like Coolors - which is great (especially if you are looking for colour palettes) - but decided to just build one myself - make it even easier to use & take you along through the process of putting it together.

1. Generate a random hex value

First off… we need to create our files. So, create a folder & add in index.html, main.css, main.js… that’s all you need. If you want a one-page setup - you can just have all the below in one index.html file with <style> (css) & <script> (js) tags.

This article on CSS-Tricks made that bit really easy. With a great starter template for all three files. You can check it out via the link - but if you just want the code - here it is (with added structure for HTML).

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Edit this to give your project a title</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <h1>
      <button id="genNew">Generate New Random Color</button>
      <span id="color"></span>
    </h1>
    <script src="main.js"></script>
  </body>
</html>

main.css

body {
  height: 100vh;
  margin: 0;
  padding: 1rem;
  display: grid;
  place-items: center;
  font-family: system-ui;
}
h1 {
  background: white;
  padding: 1rem 2rem;
  text-align: center;
}
span {
  display: block;
  padding: 1rem;
  font-size: 1rem;
  font-weight: normal;
  font-family: monospace;
}

main.js

const setBg = () => {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = "#" + randomColor;
  color.innerHTML = "#" + randomColor;
};

genNew.addEventListener("click", setBg);
setBg();

This will give you a great starting point - which should look something like this…

This will give you a random colour generator. Now to part 2. Have a button to easily copy a value…

2. Have a button to easily copy the value generated

Now this is a bit more complicated. First off, you need to add another button to your index.html & style it as you like. For now this will do:

index.html - new

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Edit this to give your project a title</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <h1>
      <button id="genNew">Generate New Random Color</button>
      <!-- The New Button-->
      <button onclick="copySpanToClipboard()">Copy Hex</button>
      <!-- /The New Button-->
      <span id="color"></span>
    </h1>
    <script src="main.js"></script>
  </body>
</html>

As we haven’t written the copySpanToClipboard function yet - at the moment the button will be there, but won’t do anything when clicked. Now, the fun stuff - creating the ‘copy’ function.

There are more complicated ways of doing this - setting the generated value into a textbox/input and using a JS copy function. However, we will use a small workaround (with a slightly deprecated method), as we just want to copy the generated value.

document.execCommand("copy");

Essentially what this will do is make sure the selection is clear, select the text within a selected range (in this case the hex value element), copy it to the clipboard, and then deselect it.

To do this - add the following to your main.js file:

main.js - add below your current code

function copySpanToClipboard() {
  var range = document.createRange();
  range.selectNode(document.getElementById("color"));
  window.getSelection().removeAllRanges(); // clear current selection
  window.getSelection().addRange(range); // to select text
  document.execCommand("copy");
  window.getSelection().removeAllRanges(); // to deselect
}

And that’s it! If you completed all the steps it should all be working. Try generating a value, click the copy button - and paste the contents somewhere… Voila! Generate -> Copy -> Generate again.

3. Quick Fix

You may have noticed that sometimes, when you click the colour generator button, the background doesn’t change. If you look at the hex value when this happens - the value is a 5-digit one - meaning it isn’t recognised as a colour, hence no change to background.

To fix this we can use .padStart - just add it to the end of the randomColor line in your main.js file:

const randomColor = Math.floor(Math.random() * 16777215)
  .toString(16)
  .padStart(6, "0");

This pads any short values with leading zeros, so every value is a full 6-digit hex - fixing the bug.

That’s it.

You can add your own styling / amend the wording - but you have your own little tool - a random colour generator!

You can check mine out here - colours.alisdair.xyz

Why Hello World?

Mon, 01 Jan 2024 00:00:00 GMT

Whether you are a seasoned developer, or just getting started, the phrase “Hello World” holds a special significance in the world of programming.

The Origins of “Hello World”

The exact origins of the “Hello World” phrase in programming can be traced back to the early days of computer science. It is believed to have originated in the seminal book “The C Programming Language” by Brian Kernighan and Dennis Ritchie, which was published in 1978. The book used the phrase “hello, world” as a basic introductory example program written in the C programming language.

Since then, “Hello World” has become a tradition and is often the first program beginners write when learning a new programming language. It serves as a simple way to verify that the development environment is set up correctly and that the basic syntax of the language is understood.

Writing Your First “Hello World” Program

The simplicity of the “Hello World” program makes it an excellent starting point for beginners. Let’s take a look at an example of how to write a “Hello World” program in a few popular programming languages:

Python

print("Hello, World!")

JavaScript

console.log("Hello, World!");

Java

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

C++

#include <iostream>
using namespace std;

int main() {
    cout << "Hello, World!" << endl;
    return 0;
}

No matter which programming language you choose, the goal of the “Hello World” program remains the same: to display the phrase “Hello, World!” as output. It may seem trivial, but it marks the beginning of your programming journey.

Why “Hello World” Matters

Beyond its simplicity, the “Hello World” program holds symbolic value in the programming community. Here are a few reasons why it matters:

Instant Feedback: By running the “Hello World” program, you receive immediate feedback that your code is working correctly. This small victory can be incredibly motivating for beginners.

Building Blocks: The “Hello World” program introduces fundamental concepts such as outputting text, using variables or functions, and understanding syntax. These building blocks lay the foundation for more complex programming tasks.

Community and Tradition: “Hello World” has become a shared experience for programmers worldwide. It represents a common starting point and connects individuals within the programming community.

Debugging and Troubleshooting: Even a simple program like “Hello World” can encounter errors. Troubleshooting these issues helps beginners develop critical problem solving skills and gain insights into the debugging process.

Progress and Growth: Starting with “Hello World” is just the beginning. As you progress in your programming journey, you will write increasingly complex programs. The “Hello World” phase will serve as a reminder of your humble beginnings.

“Hello World” may be a small, seemingly insignificant phrase, but its role in programming is immense. It represents the first step into a vibrant world of creativity and problem-solving. So, whether you are an aspiring programmer or a seasoned professional, don’t underestimate the power of “Hello World” and the impact it can have on your coding journey.

Alisdair Taylor