Hosted Project
https://js-beginners.github.io/hex-color-background-changer/
Github Source Files
https://github.com/JS-Beginners/hex-color-background-changer
Project Objectives
This HEX background color changing app was also short and sweet to complete.
However, I did find the instructor's solution interesting.
The idea was to make a random hex value created from an array of all the possible different hex values, loop through them, and concatenate 6 different values to a String that begun with the # character.
In other words, once the HEX value string is created, you'd simply change the background color to that value just like in the change background color project.
New things learned or refreshed
I learned that the simplest solution is probable the best solution.
I spent a lot of time trying to figure out the best way to create a HEX value with creating an array. But, turns out the array was a pretty simple solution.
Lines of code: 19 lines of code.
Time to code: This took about 7 minutes to code.
Biggest take away: KISS. Keep it Simple. Make a working solution. Refactor if you must, later.
Your Turn!
What to accomplish:
- Download the source code from the github repository above.
- Delete the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - Every time the button is clicked, the background should changes color and you should show the Hex value of the color.
- Add a link to your finished project below!
Need to see the video solution for this project?
Get John's JavaScript Tutorial and Projects Course now!
This is what I came up with:
var button = document.getElementById(“btn”)
var colorHexName = document.getElementById(“hex-value”)
var colorHex = [1, 2, 3, 4, 5, 6, 7, 8, 9, “a”, “b”, “c”, “d”, “e”, “f”]
var body = document.body.style
function randomBackgroundHexColor(){
var hexNumber = “#”
for(let i = 0; i < 6; i++){
hexNumber += colorHex[Math.floor(Math.random() * colorHex.length)]
}
body.backgroundColor = hexNumber
colorHexName.textContent = hexNumber
}
button.addEventListener("click", randomBackgroundHexColor)
my solution:
document.getElementById(‘btn’).addEventListener(‘click’, randomBackgroundColor);
function randomBackgroundColor() {
let red = (Math.random() * 255).toFixed(0);
let green = (Math.random() * 255).toFixed(0);
let blue = (Math.random() * 255).toFixed(0);
let hexaValue = rgbToHex(parseInt(red), parseInt(green), parseInt(blue));
document.getElementById(‘hex-value’).innerHTML = hexaValue;
document.body.style.background = `rgb(${red}, ${green}, ${blue})`;
}
function rgbToHex(r, g, b) {
return “#” + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
I noticed later I could have converted the string earlier on to a number.
My code feels a bit repetitive. Let me know if you have any suggestions on how to shorten it.
Thanks
Nice. You can problem optimized but I wouldn’t worry about it as long as it works!
No way I ever can finish this in 7 minutes lol, been stuck on such simple task for a while. Should I quit coding for good? Or is this normal in the beginning?
Ha! Definitely normal. Don’t compare your progress with someone else’s progress. If you do, you may always find that you’re not good enough. Keep trying!
function changeColor() {
let randomNum = Math.floor(Math.random() * 16777215);
let hex = randomNum.toString(16);
document.querySelector(“body”).style.backgroundColor = `#${hex}`;
section.textContent = `color: #${hex}`;
}
let colors = [‘#ff9ff3’, ‘#feca57’, “#ff6b6b”, “#48dbfb”, “#1dd1a1”, “#00d2d3”, “#54a0ff”, “#5f27cd”, “#c8d6e5”, “#576574”];
const body = document.querySelector(‘body’);
const button = document.querySelector(“button”);
const heading = document.querySelector(“.top-heading”);
body.style.backgroundColor = ‘#ff9ff3’;
button.addEventListener(‘click’, setRandomColor);
function setRandomColor() {
let randomColors = colors[Math.floor(Math.random() * colors.length)];
body.style.backgroundColor = randomColors;
heading.textContent = `Hex color: ${randomColors}`.toUpperCase();
}
Your color will be limited use random instead
Hi second challenge done
https://codepen.io/iliyan-yordanov/pen/vYLQPZL
my code:
let theButton = document.getElementById(‘button’);
theButton.addEventListener(‘click’, ()=>{
let colors = [‘0′,’1′,’2′,’3′,’4′,’5′,’6′,’7′,’8′,’9′,’A’,’B’, ‘C’, ‘D’, ‘E’, ‘F’]
let n1 = colors[Math.floor(Math.random() * colors.length)];
let n2 = colors[Math.floor(Math.random() * colors.length)];
let n3 = colors[Math.floor(Math.random() * colors.length)];
let n4 = colors[Math.floor(Math.random() * colors.length)];
let n5 = colors[Math.floor(Math.random() * colors.length)];
let n6 = colors[Math.floor(Math.random() * colors.length)];
let randomColor = ‘#’+n1+n2+n3+n4+n5+n6;
document.body.style.backgroundColor = randomColor;})
thanks
You got it!
@c, well done there. I have been looking for what the for loop was doing since I can’t figure it out until I saw your code. Thanks, man.
const hexValue = document.querySelector(‘#hex-value’);
const btn = document.querySelector(‘#btn’);
const body = document.querySelector(‘body’);
const rndNum = (min, max) => {
let rnd = Math.random() * max;
return Math.floor(rnd);
};
const hexColors = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’];
btn.addEventListener(‘click’, () => {
let color = ‘#’;
for(let i = 0; i <= 5; i++) {
color += hexColors[rndNum(0, hexColors.length)];
}
hexValue.textContent = color;
body.style.background = color;
});
const hexArray = [ “a”, “b”, “c”, “d”, “e”, “f”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “0”];
document.querySelector(“.btn”).addEventListener(“click”, () => {
let hex = “#”;
let hexNumber = () => Math.floor(Math.random() * Math.floor(hexArray.length));
for (x = 0; x < 6; x++) {
hex += hexArray[hexNumber()];
}
document.querySelector("body").style.backgroundColor = hex;
document.querySelector("#hex-value").textContent = hex;
});
Thank you for providing this resource!