This is a simple background colour changer.
background #2345e8
How it works
First an array of every possible hex character is created. These are saved as string values rather than numeric.
const hexValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
Three functions are created for this.
The first function, called getRandomHexValue(), randomly selects one of the array values. This is done using JavaScript’s built in Math.floor() and Math.random() methods.
The Math.random() generates a random decimal number from 0 to 1. This is multiplied by 16 or the length of the array:
Math.random() * hexValues.length
The Math.floor() method rounds this number down to the nearest integer (whole number) value. This ensures that zero is included since counting positions in an array starts at zero. And it makes sure the highest number is 15, the last position in the array.
The second function, getHexString(), creates a new empty variable called hexString to store the new hex value. Note this is written as:
let hexString = '';
// not like this
let hexString;
This means the variable is a string type rather than undefined is the second option was used.
ChatGPT explains the differences
In JavaScript, both let name; and let name = ''; involve the use of the let keyword to declare a variable, but they have different implications.
let name;
This statement declares a variable named name but does not assign any initial value to it. In JavaScript, when you declare a variable using let without assigning a value, the variable is initialized with the value undefined by default. Here’s an example:
let name;
console.log(name); // Output: undefined
In this case, the variable name exists, but it doesn’t have a meaningful value assigned to it yet.
let name = '';
This statement declares a variable named name and assigns an empty string (’’) as its initial value. Here’s an example:
let name = '';
console.log(name); // Output: ''
In this case, the variable name is explicitly initialized with an empty string. This can be useful when you want to ensure that the variable has a specific initial value, especially when dealing with string operations or comparisons.
Use Cases:
let name;: Use this when you plan to assign a value to the variable later in your code, and you don’t want to provide an initial value at the time of declaration. This is common when the initial value depends on some condition or is calculated dynamically.
let name;
// ... some code ...
name = 'John';
let name = '';: Use this when you want to explicitly set an initial value for the variable, especially if you’re working with string manipulation or if an empty string makes sense as a default value for your variable.
let name = '';
// ... some code ...
name = 'Jane';
In summary, the choice between let name; and let name = ''; depends on whether you want to initialize the variable with a specific value immediately or if you plan to assign a value to it later in your code.
Then a for loop is used which iterates 6 times (in fact whatever number is passed as a parameter). Each time it uses the first function, getRandomHexValue() to generate a random hex character and each time this is added to the variable using the +=.
The final function is an anonymous arrow function triggered by a click event on the button:
colourBtn.addEventListener('click', () => {
const randomHexString = '#' + getHexString(6);
currentColour.textContent = randomHexString;
flipCard.style.backgroundColor = randomHexString;
flipCard.style.borderColor = '#fff';
} );
The first line runs the getHexString() function with a parameter of 6, setting the number of for loop iterations. This is stored in the randomHexString variable. The subsequent lines change inline styles of the card background and border colour as well as the the text saying which colour is currently used.
Note another way to set the styles here is using the setProperty() method:
flipCard.style.setProperty(
'background-color',
randomHexString
);
Mistakes were made
The first mistake I made was in the for loop where I accidentally used a comma instead of a semi-colon:
for(let i = 0, i < stringLength; i++) {
// should have been:
for(let i = 0; i < stringLength; i++) {
The second mistake was having a semi-colon in the wrong place:
const randomIndexPosition = Math.floor(
Math.random() * hexValues.length;
)
// semi-colon moved to the end
const randomIndexPosition = Math.floor(
Math.random() * hexValues.length
);