Skip to content

Instantly share code, notes, and snippets.

@Maighdlyn
Last active February 28, 2017 08:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Maighdlyn/e5363eb1fc413fa379ea8188d7b2c357 to your computer and use it in GitHub Desktop.
Save Maighdlyn/e5363eb1fc413fa379ea8188d7b2c357 to your computer and use it in GitHub Desktop.
Color Picker #3 with text
<html>
<head>
<meta charset="UTF-8">
<title>my-color-picker</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<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 class = "bGButton">
<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>
<button class="black"></button>
</div>
<h3>Text Color Selector</h3>
<p>To select a text color, please click on your prefered color below:</p>
<div class = "textButton">
<button class="redText">red</button>
<button class="orangeText">orange</button>
<button class="yellowText">yellow</button>
<button class="greenText">green</button>
<button class="blueText">blue</button>
<button class="purpleText">purple</button>
<button class="greyText">grey</button>
<button class="whiteText">white</button>
<button class="blackText">black</button>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="index.js"></script>
</html>
$(document).ready(function() {
$('.bGButton').find('button').click(function() {
$('body').removeClass('red orange yellow green blue purple grey white black');
var color = $(this).attr('class');
$('body').addClass(color);
console.log($('body').attr('class'));
});
$('.textButton').find('button').click(function() {
$('body').removeClass('redText orangeText yellowText greenText blueText purpleText greyText whiteText blackText');
var tColor = $(this).attr('class');
$('body').addClass(tColor);
console.log($('body').attr('class'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
button {
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;
}
.black{
background-color:black;
}
.redText{
color: FireBrick;
}
.orangeText{
color: Orange;
}
.yellowText{
color: yellow;
}
.greenText{
color: green;
}
.blueText{
color: DeepSkyBlue;
}
.purpleText{
color: RebeccaPurple;
}
.greyText{
color: grey;
}
.whiteText{
color:white;
}
.blackText{
color:black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment