Maighdlyn/color-picker.markdown

## color-picker.markdown

      
    Raw
  

              color-picker.markdown
            
          
    Color Picker

A Pen by Emma on CodePen.
License.

  
## index.html
<body>
  <h1>Color Picker</h1>
  <h3>Background Color Selector</h3>
  <p>To select a background color, please click on your prefered color below:</p>
  <div>
    <button class="red"></button>
    <button class="orange"></button>
    <button class="yellow"></button>
    <button class="green"></button>
    <button class="blue"></button>
    <button class="purple"></button>
    <button class="grey"></button>
    <button class="white"></button>
  </div>
</body>

## script.js
$(document).ready(function() {

  $('button').addClass('buttonClass');

  $('button').click(function() {
    $('body').removeClass();
    var color = $(this).attr('class');
    $('body').addClass(color);
  });

});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

## style.css
.buttonClass {
  border-radius: 20px;
  padding: 20px;
  margin: 5px;
}

.red {
  background-color: FireBrick;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: DeepSkyBlue;
}

.purple {
  background-color: RebeccaPurple;
}

.grey {
  background-color: grey;
}

.white {
  background-color: white;
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
	<body>
	<h1>Color Picker</h1>
	<h3>Background Color Selector</h3>
	<p>To select a background color, please click on your prefered color below:</p>
	<div>
	<button class="red"></button>
	<button class="orange"></button>
	<button class="yellow"></button>
	<button class="green"></button>
	<button class="blue"></button>
	<button class="purple"></button>
	<button class="grey"></button>
	<button class="white"></button>
	</div>
	</body>
	$(document).ready(function() {

	$('button').addClass('buttonClass');

	$('button').click(function() {
	$('body').removeClass();
	var color = $(this).attr('class');
	$('body').addClass(color);
	});

	});
	.buttonClass {
	border-radius: 20px;
	padding: 20px;
	margin: 5px;
	}

	.red {
	background-color: FireBrick;
	}

	.orange {
	background-color: orange;
	}

	.yellow {
	background-color: yellow;
	}

	.green {
	background-color: green;
	}

	.blue {
	background-color: DeepSkyBlue;
	}

	.purple {
	background-color: RebeccaPurple;
	}

	.grey {
	background-color: grey;
	}

	.white {
	background-color: white;
	}