Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 3, 2016 21:56
Show Gist options
  • Save anonymous/76611cce1293720aa14aa3c2d73fc83c to your computer and use it in GitHub Desktop.
Save anonymous/76611cce1293720aa14aa3c2d73fc83c to your computer and use it in GitHub Desktop.
Download ZIP
Color Picker // source http://jsbin.com/sepugu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker</title>
<link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<style id="jsbin-css">
h1 {
font-family:'Slabo 27px';
}
/*** FOR THE BUTTONS ***/
.btn {
display: inline-block;
margin: 5px 10px;
padding: 15px 45px;
line-height: 1.8;
appearance: none;
box-shadow: none;
}
button:focus {
outline: none
}
#color-picker.press button {
border: none;
border-radius: 15px;
margin: .5em;
font-family:'Slabo 27px';
font-size:1.2em;
}
#color-picker.press button:hover,
#color-picker.press button.hover {
background-color: #666;
opacity: .2;
}
#color-picker.press button:active,
#color-picker.press button.active {
background-color: #417cb8;
box-shadow: 0 5px #27496d;
transform: translateY(5px);
}
#color-picker{
margin: 0 0 1em 0;
}
/*** COLORS ***/
.red {
background-color: #2EC4B6;
color:#EFFFE9;
box-shadow: 0 10px #E71D36;
}
.orange {
background-color: #67D5B5;
color: #F0E5DE;
box-shadow: 0 10px #7C7877;
}
.yellow {
background-color: #41D3BD;
color: #FFFFF2;
box-shadow: 0 10px #791E94;
}
.green {
background-color: #bd1550;
color: #f8ca00;
box-shadow: 0 10px #490a3d;
}
.blue {
background-color: #ee2560;
color: #45d9fd;
box-shadow: 0 10px #08182b;
}
.purple {
background-color: purple;
color: red;
box-shadow: 0 10px #27496d;
}
/*** FOR THE FORM ***/
.floatL {
float: left;
}
.floatR {
float:right;
margin-right: 3em;
}
#form {
margin-top: 1em;
}
#submitForm {
margin-top: 1em;
}
</style>
</head>
<body>
<h1>Surprises around every corner, just you wait and see.</h1>
<div id="color-picker" class="press">
<div>
<button class="btn red" onclick="setColor('red');">Torched</button>
<button class="btn orange" onclick="setColor('orange');">the</button>
<button class="btn yellow" onclick="setColor('yellow');">haystack.</button>
</div><div>
<button class="btn green" onclick="setColor('green');">Found</button>
<button class="btn blue" onclick="setColor('blue');">the</button>
<button class="btn purple" onclick="setColor('purple');">needle.</button>
</div>
</div>
<div class="floatL">
<form id = 'form'>
<input id="colorForm" type="color" />
<br/>
<input id="submitForm" value="try picking a color" type="button" />
</form>
</div>
<div class="floatR"> <form id = 'form'>
<input id="colorForm" type="text" />
<br/>
<input id="submitForm" value="or you could just type it." type="button" />
</form></div>
<script id="jsbin-javascript">
function setColor(bgcolor){
var body = document.querySelector("body");
body.className = bgcolor;
}
function changeBgColor() {
var color = document.getElementById("colorForm").value;
document.body.style.backgroundColor = color;
}
document.getElementById("submitForm").addEventListener("click", changeBgColor, false);
</script>
<script id="jsbin-source-css" type="text/css">h1 {
font-family:'Slabo 27px';
}
/*** FOR THE BUTTONS ***/
.btn {
display: inline-block;
margin: 5px 10px;
padding: 15px 45px;
line-height: 1.8;
appearance: none;
box-shadow: none;
}
button:focus {
outline: none
}
#color-picker.press button {
border: none;
border-radius: 15px;
margin: .5em;
font-family:'Slabo 27px';
font-size:1.2em;
}
#color-picker.press button:hover,
#color-picker.press button.hover {
background-color: #666;
opacity: .2;
}
#color-picker.press button:active,
#color-picker.press button.active {
background-color: #417cb8;
box-shadow: 0 5px #27496d;
transform: translateY(5px);
}
#color-picker{
margin: 0 0 1em 0;
}
/*** COLORS ***/
.red {
background-color: #2EC4B6;
color:#EFFFE9;
box-shadow: 0 10px #E71D36;
}
.orange {
background-color: #67D5B5;
color: #F0E5DE;
box-shadow: 0 10px #7C7877;
}
.yellow {
background-color: #41D3BD;
color: #FFFFF2;
box-shadow: 0 10px #791E94;
}
.green {
background-color: #bd1550;
color: #f8ca00;
box-shadow: 0 10px #490a3d;
}
.blue {
background-color: #ee2560;
color: #45d9fd;
box-shadow: 0 10px #08182b;
}
.purple {
background-color: purple;
color: red;
box-shadow: 0 10px #27496d;
}
/*** FOR THE FORM ***/
.floatL {
float: left;
}
.floatR {
float:right;
margin-right: 3em;
}
#form {
margin-top: 1em;
}
#submitForm {
margin-top: 1em;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function setColor(bgcolor){
var body = document.querySelector("body");
body.className = bgcolor;
}
function changeBgColor() {
var color = document.getElementById("colorForm").value;
document.body.style.backgroundColor = color;
}
document.getElementById("submitForm").addEventListener("click", changeBgColor, false);
</script></body>
</html>
Raw
jsbin.sepugu.css
h1 {
font-family:'Slabo 27px';
}
/*** FOR THE BUTTONS ***/
.btn {
display: inline-block;
margin: 5px 10px;
padding: 15px 45px;
line-height: 1.8;
appearance: none;
box-shadow: none;
}
button:focus {
outline: none
}
#color-picker.press button {
border: none;
border-radius: 15px;
margin: .5em;
font-family:'Slabo 27px';
font-size:1.2em;
}
#color-picker.press button:hover,
#color-picker.press button.hover {
background-color: #666;
opacity: .2;
}
#color-picker.press button:active,
#color-picker.press button.active {
background-color: #417cb8;
box-shadow: 0 5px #27496d;
transform: translateY(5px);
}
#color-picker{
margin: 0 0 1em 0;
}
/*** COLORS ***/
.red {
background-color: #2EC4B6;
color:#EFFFE9;
box-shadow: 0 10px #E71D36;
}
.orange {
background-color: #67D5B5;
color: #F0E5DE;
box-shadow: 0 10px #7C7877;
}
.yellow {
background-color: #41D3BD;
color: #FFFFF2;
box-shadow: 0 10px #791E94;
}
.green {
background-color: #bd1550;
color: #f8ca00;
box-shadow: 0 10px #490a3d;
}
.blue {
background-color: #ee2560;
color: #45d9fd;
box-shadow: 0 10px #08182b;
}
.purple {
background-color: purple;
color: red;
box-shadow: 0 10px #27496d;
}
/*** FOR THE FORM ***/
.floatL {
float: left;
}
.floatR {
float:right;
margin-right: 3em;
}
#form {
margin-top: 1em;
}
#submitForm {
margin-top: 1em;
}
Raw
jsbin.sepugu.js
function setColor(bgcolor){
var body = document.querySelector("body");
body.className = bgcolor;
}
function changeBgColor() {
var color = document.getElementById("colorForm").value;
document.body.style.backgroundColor = color;
}
document.getElementById("submitForm").addEventListener("click", changeBgColor, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment