Skip to content

Instantly share code, notes, and snippets.

@Maighdlyn

Maighdlyn/index.html

Created February 23, 2017 09:47
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/14af78e07f04296f5db93502b92d08a0 to your computer and use it in GitHub Desktop.
Save Maighdlyn/14af78e07f04296f5db93502b92d08a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
button{
padding: 20px;
border-radius: 25px;
width: 100px;
text-align: center;
display: inline-block;
}
.red{
background-color: FireBrick;
}
.blue{
background-color: DeepSkyBlue;
}
.yellow{
background-color: Yellow;
}
</style>
</head>
<body>
<h1>Color Picker</h1>
<button class='red'>red</button>
<button class='blue'>blue</button>
<button class='yellow'>yellow</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="ColorPicker.js"></script>
<script id="jsbin-javascript">
$(document).ready(function(){
$('.red').click(function(){
$('body').removeClass();
$('body').addClass('red');
});
$('.blue').click(function(){
$('body').removeClass();
$('body').addClass('blue');
});
$('.yellow').click(function(){
$('body').removeClass();
$('body').addClass('yellow');
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Color Picker</h1>
<button class='red'>red</button>
<button class='blue'>blue</button>
<button class='yellow'>yellow</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"><\/script>
<script type="text/javascript" src="ColorPicker.js"><\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">button{
padding: 20px;
border-radius: 25px;
width: 100px;
text-align: center;
display: inline-block;
}
.red{
background-color: FireBrick;
}
.blue{
background-color: DeepSkyBlue;
}
.yellow{
background-color: Yellow;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
$('.red').click(function(){
$('body').removeClass();
$('body').addClass('red');
});
$('.blue').click(function(){
$('body').removeClass();
$('body').addClass('blue');
});
$('.yellow').click(function(){
$('body').removeClass();
$('body').addClass('yellow');
});
});</script></body>
</html>
Raw
jsbin.gist.css
button{
padding: 20px;
border-radius: 25px;
width: 100px;
text-align: center;
display: inline-block;
}
.red{
background-color: FireBrick;
}
.blue{
background-color: DeepSkyBlue;
}
.yellow{
background-color: Yellow;
}
Raw
jsbin.gist.js
$(document).ready(function(){
$('.red').click(function(){
$('body').removeClass();
$('body').addClass('red');
});
$('.blue').click(function(){
$('body').removeClass();
$('body').addClass('blue');
});
$('.yellow').click(function(){
$('body').removeClass();
$('body').addClass('yellow');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment