Skip to content

Instantly share code, notes, and snippets.

@indigeaux

indigeaux/index.html

Forked from anonymous/index.html
Created July 16, 2016 07:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save indigeaux/a93da46133f2c58e39ede9fc8cb344d8 to your computer and use it in GitHub Desktop.
Save indigeaux/a93da46133f2c58e39ede9fc8cb344d8 to your computer and use it in GitHub Desktop.
Download ZIP
Make a Color Picker // source http://jsbin.com/zujeci
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make a Color Picker</title>
<link rel="stylesheet" href="main.css" media="screen" charset="utf-8">
<style id="jsbin-css">
button {
min-width: 3em;
min-height: 3em;
border-radius: 1.5em;
}
.red {
background-color: #ffcccc;
margin: auto;
}
.orange {
background-color: #ffddcc;
}
.yellow {
background-color: #ffffe6;
margin: auto;
}
.green {
background-color: #ccffdd;
margin: auto;
}
.blue {
background-color: #ccf5ff;
margin: auto;
}
.violet {
background-color: #f2ccff;
margin: auto;
}
.text {
text-decoration: line-through;
letter-spacing: 10px;
font-size: 30px;
text-shadow: 5px 5px white;
}
.pallet1 {
background-color: #e4d1d1;
margin: auto;
}
.pallet2 {
background-color: #b9b0b0;
margin: auto;
}
.pallet3 {
background-color: #d9ecd0;
margin: auto;
}
.pallet4 {
background-color: #77a8a8;
margin: auto;
}
.text2 {
color: #40E6FF;
margin: auto;
border: 5px solid #40E6FF;
}
.text1 {
color: #0DFAFF;
margin: auto;
border: 5px solid #0DFAFF;
}
.text3 {
color: #73D1FF;
margin: auto;
border: 5px solid #73D1FF;
}
.text4 {
color: #A6BDFF;
margin: auto;
border: 5px solid #A6BDFF;
}
.text5 {
color: #D9A8FF;
margin: auto;
border: 5px solid #D9A8FF;
}
.square1 {
width:300px;
height:20px;
border: 2px solid black;
}
.square2 {
width:300px;
height:20px;
border: 2px solid black;
}
.square3 {
width:300px;
height:20px;
border: 2px solid black;
}
.square4 {
width:300px;
height:20px;
border: 2px solid black;
}
.square5 {
width:300px;
height:20px;
border: 2px solid black;
}
.red2 {
background-color: #ffcccc;
margin: auto;
width:300px;
height:20px;
}
.orange2 {
background-color: #ffddcc;
margin: auto;
width:300px;
height:20px;
}
.yellow2 {
background-color: #ffffe6;
margin: auto;
width:300px;
height:20px;
}
.green2 {
background-color: #ccffdd;
margin: auto;
width:300px;
height:20px;
}
.blue2 {
background-color: #ccf5ff;
margin: auto;
width:300px;
height:20px;
}
.violet2 {
background-color: #f2ccff;
margin: auto;
width:300px;
height:20px;
}
</style>
</head>
<body>
<div id="color-picker">
<button class="red" onclick="setColor('red');"></button>
<button class="orange" onclick="setColor('orange');"></button>
<button class="yellow" onclick="setColor('yellow');"></button>
<button class="green" onclick="setColor('green');"></button</button>
<button class="blue" onclick="setColor('blue');"></button>
<button class="violet" onclick="setColor('violet');"></button>
</div>
<div id="colorpicker2">
<button class="pallet1" onclick="setColor('pallet1');"></button>
<button class="pallet2" onclick="setColor('pallet2');"></button>
<button class="pallet3" onclick="setColor('pallet3');"></button>
<button class="pallet4" onclick="setColor('pallet4');"></button>
</div>
<div class="text">
<p> LEARNER'S GUILD </p>
</div>
<div>
<button class="text1"
onclick="setText('text1');"></button>
<button class="text2" onclick="setText('text2');"></button>
<button class="text3" onclick="setText('text3');"></button>
<button class="text4" onclick="setText('text4');"></button>
<button class="text5" onclick="setText('text5');"></button>
</div>
<div class="square1">
</div>
<div class="square2">
</div>
<div class="square3">
</div>
<div class="square4">
</div>
<div class="square5">
</div>
<script id="jsbin-javascript">
function setColor(color) {
var body = document.querySelector("body");
body.className = color;
var square1 = document.querySelector(".square1");
var square2= document.querySelector(".square2");
var square3= document.querySelector(".square3");
var square4= document.querySelector(".square4");
var square5= document.querySelector(".square5");
if (color == "red") {
square1.className = "orange2";
square2.className = "yellow2";
square3.className = ("green2");
square4.className = ("blue2");
square5.className = ("violet2");
}
else if (color == "orange"){
square1.className = "yellow2";
square2.className = "green2";
square3.className = "blue2";
square4.className = "violet2";
square5.className = "red2";
}
else if (color== "yellow"){
square1.className = "green2";
square2.className = "blue2";
square3.className = "violet2";
square4.className = "red2";
square5.className = "orange2";
}
else if (color== "green"){
square1.className = "blue2";
square2.className = "violet2";
square3.className = "red2";
square4.className = "orange2";
square5.className = "yellow2";
}
else if (color== "blue"){
square1.className = "violet2";
square2.className = "red2";
square3.className = "orange2";
square4.className = "yellow2";
square5.className = "green2";
}
else if (color== "violet"){
square1.className = "red2";
square2.className = "orange2";
square3.className = "yellow2";
square4.className = "green2";
square5.className = "blue2";
}
else {
return "NO RAINBOW :,(";
}
}
function setText(textcolor) {
var text=
document.querySelector("p");
text.className= textcolor;
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make a Color Picker</title>
<link rel="stylesheet" href="main.css" media="screen" charset="utf-8">
</head>
<body>
<div id="color-picker">
<button class="red" onclick="setColor('red');"></button>
<button class="orange" onclick="setColor('orange');"></button>
<button class="yellow" onclick="setColor('yellow');"></button>
<button class="green" onclick="setColor('green');"></button</button>
<button class="blue" onclick="setColor('blue');"></button>
<button class="violet" onclick="setColor('violet');"></button>
</div>
<div id="colorpicker2">
<button class="pallet1" onclick="setColor('pallet1');"></button>
<button class="pallet2" onclick="setColor('pallet2');"></button>
<button class="pallet3" onclick="setColor('pallet3');"></button>
<button class="pallet4" onclick="setColor('pallet4');"></button>
</div>
<div class="text">
<p> LEARNER'S GUILD </p>
</div>
<div>
<button class="text1"
onclick="setText('text1');"></button>
<button class="text2" onclick="setText('text2');"></button>
<button class="text3" onclick="setText('text3');"></button>
<button class="text4" onclick="setText('text4');"></button>
<button class="text5" onclick="setText('text5');"></button>
</div>
<div class="square1">
</div>
<div class="square2">
</div>
<div class="square3">
</div>
<div class="square4">
</div>
<div class="square5">
</div>
</body>
<script type="text/javascript" src="script.js"><\/script>
</html>
</script>
<script id="jsbin-source-css" type="text/css">button {
min-width: 3em;
min-height: 3em;
border-radius: 1.5em;
}
.red {
background-color: #ffcccc;
margin: auto;
}
.orange {
background-color: #ffddcc;
}
.yellow {
background-color: #ffffe6;
margin: auto;
}
.green {
background-color: #ccffdd;
margin: auto;
}
.blue {
background-color: #ccf5ff;
margin: auto;
}
.violet {
background-color: #f2ccff;
margin: auto;
}
.text {
text-decoration: line-through;
letter-spacing: 10px;
font-size: 30px;
text-shadow: 5px 5px white;
}
.pallet1 {
background-color: #e4d1d1;
margin: auto;
}
.pallet2 {
background-color: #b9b0b0;
margin: auto;
}
.pallet3 {
background-color: #d9ecd0;
margin: auto;
}
.pallet4 {
background-color: #77a8a8;
margin: auto;
}
.text2 {
color: #40E6FF;
margin: auto;
border: 5px solid #40E6FF;
}
.text1 {
color: #0DFAFF;
margin: auto;
border: 5px solid #0DFAFF;
}
.text3 {
color: #73D1FF;
margin: auto;
border: 5px solid #73D1FF;
}
.text4 {
color: #A6BDFF;
margin: auto;
border: 5px solid #A6BDFF;
}
.text5 {
color: #D9A8FF;
margin: auto;
border: 5px solid #D9A8FF;
}
.square1 {
width:300px;
height:20px;
border: 2px solid black;
}
.square2 {
width:300px;
height:20px;
border: 2px solid black;
}
.square3 {
width:300px;
height:20px;
border: 2px solid black;
}
.square4 {
width:300px;
height:20px;
border: 2px solid black;
}
.square5 {
width:300px;
height:20px;
border: 2px solid black;
}
.red2 {
background-color: #ffcccc;
margin: auto;
width:300px;
height:20px;
}
.orange2 {
background-color: #ffddcc;
margin: auto;
width:300px;
height:20px;
}
.yellow2 {
background-color: #ffffe6;
margin: auto;
width:300px;
height:20px;
}
.green2 {
background-color: #ccffdd;
margin: auto;
width:300px;
height:20px;
}
.blue2 {
background-color: #ccf5ff;
margin: auto;
width:300px;
height:20px;
}
.violet2 {
background-color: #f2ccff;
margin: auto;
width:300px;
height:20px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">function setColor(color) {
var body = document.querySelector("body");
body.className = color;
var square1 = document.querySelector(".square1");
var square2= document.querySelector(".square2");
var square3= document.querySelector(".square3");
var square4= document.querySelector(".square4");
var square5= document.querySelector(".square5");
if (color == "red") {
square1.className = "orange2";
square2.className = "yellow2";
square3.className = ("green2");
square4.className = ("blue2");
square5.className = ("violet2");
}
else if (color == "orange"){
square1.className = "yellow2";
square2.className = "green2";
square3.className = "blue2";
square4.className = "violet2";
square5.className = "red2";
}
else if (color== "yellow"){
square1.className = "green2";
square2.className = "blue2";
square3.className = "violet2";
square4.className = "red2";
square5.className = "orange2";
}
else if (color== "green"){
square1.className = "blue2";
square2.className = "violet2";
square3.className = "red2";
square4.className = "orange2";
square5.className = "yellow2";
}
else if (color== "blue"){
square1.className = "violet2";
square2.className = "red2";
square3.className = "orange2";
square4.className = "yellow2";
square5.className = "green2";
}
else if (color== "violet"){
square1.className = "red2";
square2.className = "orange2";
square3.className = "yellow2";
square4.className = "green2";
square5.className = "blue2";
}
else {
return "NO RAINBOW :,(";
}
}
function setText(textcolor) {
var text=
document.querySelector("p");
text.className= textcolor;
}
</script></body>
<script type="text/javascript" src="script.js"></script>
</html>
Raw
jsbin.zujeci.css
button {
min-width: 3em;
min-height: 3em;
border-radius: 1.5em;
}
.red {
background-color: #ffcccc;
margin: auto;
}
.orange {
background-color: #ffddcc;
}
.yellow {
background-color: #ffffe6;
margin: auto;
}
.green {
background-color: #ccffdd;
margin: auto;
}
.blue {
background-color: #ccf5ff;
margin: auto;
}
.violet {
background-color: #f2ccff;
margin: auto;
}
.text {
text-decoration: line-through;
letter-spacing: 10px;
font-size: 30px;
text-shadow: 5px 5px white;
}
.pallet1 {
background-color: #e4d1d1;
margin: auto;
}
.pallet2 {
background-color: #b9b0b0;
margin: auto;
}
.pallet3 {
background-color: #d9ecd0;
margin: auto;
}
.pallet4 {
background-color: #77a8a8;
margin: auto;
}
.text2 {
color: #40E6FF;
margin: auto;
border: 5px solid #40E6FF;
}
.text1 {
color: #0DFAFF;
margin: auto;
border: 5px solid #0DFAFF;
}
.text3 {
color: #73D1FF;
margin: auto;
border: 5px solid #73D1FF;
}
.text4 {
color: #A6BDFF;
margin: auto;
border: 5px solid #A6BDFF;
}
.text5 {
color: #D9A8FF;
margin: auto;
border: 5px solid #D9A8FF;
}
.square1 {
width:300px;
height:20px;
border: 2px solid black;
}
.square2 {
width:300px;
height:20px;
border: 2px solid black;
}
.square3 {
width:300px;
height:20px;
border: 2px solid black;
}
.square4 {
width:300px;
height:20px;
border: 2px solid black;
}
.square5 {
width:300px;
height:20px;
border: 2px solid black;
}
.red2 {
background-color: #ffcccc;
margin: auto;
width:300px;
height:20px;
}
.orange2 {
background-color: #ffddcc;
margin: auto;
width:300px;
height:20px;
}
.yellow2 {
background-color: #ffffe6;
margin: auto;
width:300px;
height:20px;
}
.green2 {
background-color: #ccffdd;
margin: auto;
width:300px;
height:20px;
}
.blue2 {
background-color: #ccf5ff;
margin: auto;
width:300px;
height:20px;
}
.violet2 {
background-color: #f2ccff;
margin: auto;
width:300px;
height:20px;
}
Raw
jsbin.zujeci.js
function setColor(color) {
var body = document.querySelector("body");
body.className = color;
var square1 = document.querySelector(".square1");
var square2= document.querySelector(".square2");
var square3= document.querySelector(".square3");
var square4= document.querySelector(".square4");
var square5= document.querySelector(".square5");
if (color == "red") {
square1.className = "orange2";
square2.className = "yellow2";
square3.className = ("green2");
square4.className = ("blue2");
square5.className = ("violet2");
}
else if (color == "orange"){
square1.className = "yellow2";
square2.className = "green2";
square3.className = "blue2";
square4.className = "violet2";
square5.className = "red2";
}
else if (color== "yellow"){
square1.className = "green2";
square2.className = "blue2";
square3.className = "violet2";
square4.className = "red2";
square5.className = "orange2";
}
else if (color== "green"){
square1.className = "blue2";
square2.className = "violet2";
square3.className = "red2";
square4.className = "orange2";
square5.className = "yellow2";
}
else if (color== "blue"){
square1.className = "violet2";
square2.className = "red2";
square3.className = "orange2";
square4.className = "yellow2";
square5.className = "green2";
}
else if (color== "violet"){
square1.className = "red2";
square2.className = "orange2";
square3.className = "yellow2";
square4.className = "green2";
square5.className = "blue2";
}
else {
return "NO RAINBOW :,(";
}
}
function setText(textcolor) {
var text=
document.querySelector("p");
text.className= textcolor;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment