• +1 240 877 8161
  • info@thePracticalIT.com
Practical Information Technology
  • Notifi
  • Canvas
    • HOME
    • Start Here
    • Courses
    • EVENTS
      • EVENTS LIST
      • EVENTS GRID
    • BLOG
    • CONTACT
    • IT Courses
  • +1 240 877 8161
  • info@thePracticalIT.com
  • Profile
  • Login | Registration Popup Link
Practical Information Technology
  • Home
  • Courses
    • FEATURED COURSES
      • Web Development
      • Database Development
      • Business Intelligence
    • TRAINING
      • How long does it take?
      • IT Training Methods
      • Hours Per week
      • Payments
    • IT Courses
  • Tips
  • Contact
  • Notifi
  • Start Here

Change Background Color of body Every 5 Second

Homepage - Programming Exercises - Change Background Color of body Every 5 Second

Pract IT

by Practical IT
Posted on 03 Jun, 2021
in
Programming Exercises
0 Comment

Create an HTML page that has only one button. When the button is clicked, the page starts to change its background color randomly every 5 seconds.

A simple function you can use for the randomizing colors is given.

function randomizer() {
            let random_color = "#";
            let chars = "0123456789abcdef";
            for (var i=0; i < 6 ; i++) {
                let char = Math.floor(Math.random()*16);
                random_color += chars[char];
            }
            return random_color;
}

What to Get Out of It

After completing this exercise, you will have a good understanding of how setInterval built in function works, handling of events, how to use Math.random() function to create numbers with in range and more.

Hint

You need to create an event handler for the button you are creating, you can give it an id or class for you to use it as selector. Once the button is clicked, you start the setInterval function and set it every 5 second (5000 ms) to change the background color of the body element. You need to select the body element first and then change the background color of it through .style.backgroundColor property.

Tags: background color click event. eventhandler javascript Math random setInterval
User Avatar
Article by Practical IT

Works at Practical IT. Passionate about Technologies, Business and News.

Previous Story
DOM – Randomizer, Click, keyup events
Next Story
Create a Class Representing Music

Related Articles

Your Path to a Lucrative IT Career Starts Here – Enroll Now!

Ready to Unlock a High-Paying Career in Tech? Claim Your...

success

Accelerate Your Career with In-Demand IT Training.

Register @ https://register.thepracticalit.com and claim your seat. What is going...

Leave your comment Cancel Reply

(will not be shared)

SearchLeave your keyword

Change your life through Information Technology career today. Thousands have done it – it is your turn now. All you need is a passion to change your life and provide better for yourself and your family. Practical IT takes the rest.

QUICK LINKS

  • Home
  • Courses
    • FEATURED COURSES
      • Web Development
      • Database Development
      • Business Intelligence
    • TRAINING
      • How long does it take?
      • IT Training Methods
      • Hours Per week
      • Payments
    • IT Courses
  • Tips
  • Contact
  • Notifi
  • Start Here

SUBSCRIBE EMAIL

Subscribe to our email list and get tips on IT jobs, career changes openings, seminars and more. We can also SMS you

GET IN TOUCH

You can call us, email us or even better visit us in our office at the heart of Silver Spring. Our Email - info@thePracticalIT.com

+1 240 877 8161

911 Silver Spring Ave #101 Silver Spring MD 20910

Practical IT - Copyright 2023.
  • Sign in

or
  • Login with Facebook
  • Login with Google

Forgot your password?

Lost your password? Please enter your email address. You will receive mail with link to set new password.

Back to login