Last active
February 28, 2017 08:23
-
-
Save Maighdlyn/e5363eb1fc413fa379ea8188d7b2c357 to your computer and use it in GitHub Desktop.
Color Picker #3 with text
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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')); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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