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

Question

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!

Answer 1 · 2014-12-28T20:06:06Z

December 28, 2014 8:06pm

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>

Welcome to the Treehouse Community

Looking to learn something new?

Shaun Kelly

Shaun Kelly

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

1 Answer

Marcus Parsons

Marcus Parsons