Hello World! I decided to start a new series! - A CSS/JS trick in 5 minutes - It will be a concentrate of quick and useful tricks you can apply to your website. I will try to never exceed 20 lines of code and to always go straight to the point. I will start very easy, how to implement a random background color change.
For that we just need a javascript function:
function random_bg_color() {
let x = Math.floor(Math.random() * 256);
let y = Math.floor(Math.random() * 256);
let z = Math.floor(Math.random() * 256);
let bgColor = `rgb( ${x}, ${y}, ${z} )`;
document.body.innerText = bgColor;
document.body.style.background = bgColor;
}
setInterval(random_bg_color, 2000); // You can easily change Interval here
I think there nothing really difficult to explain, we create 3 random variables and assign them to the background. We just need to know how RGB system work (or like Jack said in the comments we could also use HSL).
RGB defines the values of red (the first number), green (the second number), or blue (the third number). The number 0 signifies no representation of the color and 255 signifies the highest possible concentration of the color. Pluralsight
document.body.innerText = bgColor;
This line of code serves to show RGB of the color on screen.
You can have here a live preview:
Click Me
Hope this helped and thanks for reading!
Please smash that like button to make me understand that you want the series to continue :)
Check this article: The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀
Article No Longer Available
Subscribe to our newsletter!
A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Top comments (6)
Fun! It's also worth promoting HSL, which is a more intuitive way of reading colour in code. Something like
HSL is great because if you see for example
120, 50%, 70%you know you're going to see a pale pastel green, which isn't as obvious with hex/RGB (140, 217, 140).Thanks for the comment! I will try following this advice next time.
Try using syntax formatting on your posts (write
javascriptafter the opening 3 backticks). Then it looks nice, like this:I just wrote an article on that if you're interested
dev.to/devlorenzo/js-why-we-should...
Nice, I would take a more modern approach to this and use const/let instead of var and use template literals instead of concatenating the values with +.
Yes, you're right. The only problem is that I have an Italian keyboard and backtick are difficult to use. But we should always use it.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.