Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

How would i let the user change the background colour of the page from a selection of colours?

Hi guys,

I want to create something similar to this: https://www.dulux.co.uk/shop/colours/greens/

Once a colour is selected it needs to change the colour of the background.

Any help would be appreciated! Thanks in advance!

1 Answer

Here is a simple color changer I created for ya, Shaun Kelly. It utilizes a tiny bit of jQuery to get the process done. Each div is a block of width and height of 100 px with the class colorBlock and once you click on a color of block, it sets the background-color of the body to the background-color of the colorBlock selected.

<!DOCTYPE html>
<html>
<head>
    <title>Color Test</title>
  <style>
    .colorBlock {
      width: 100px;
      height: 100px;
    }
    #Black {
      background-color: #000;
    }
    #Blue {
      background-color: #00f;
    }
    #Red {
      background-color: #f00;
    }
    #Green {
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div class="colorBlock" id="Black"></div>
  <div class="colorBlock" id="Blue"></div>
  <div class="colorBlock" id="Red"></div>
  <div class="colorBlock" id="Green"></div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
   //Create anonymous function that listens for a click on anything with the class colorBlock
    $(".colorBlock").click(function() {
      //Get the background color of the clicked color block by using the this object
      var $backgroundColor = $(this).css("background-color");
      //Set the body's background-color to the received background-color
      $("body").css("background-color", $backgroundColor);
    });
  </script>
</body>
</html>