Skip to content

Instantly share code, notes, and snippets.

@alexanderchan

alexanderchan/index.html

Forked from anonymous/index.html
Created October 19, 2016 15:32
Show Gist options
  • Save alexanderchan/482afcb8b866deb40e9a8d5f49eceef9 to your computer and use it in GitHub Desktop.
Save alexanderchan/482afcb8b866deb40e9a8d5f49eceef9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/pesemo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id='App'></div>
<script src="http://fb.me/react-0.14.3.js"></script>
<script src="http://fb.me/react-dom-0.14.3.js"></script>
<script id="jsbin-javascript">
/*jshint esnext:true */
var toConvert = `
@ghost-white: #F8F8F0;
@light-ghost-white: #F8F8F2;
@light-gray: #CCC;
@gray: #888;
@brown-gray: #49483E;
@dark-gray: #282828;
@yellow: #E6DB74;
@blue: #66D9EF;
@pink: #F92672;
@purple: #AE81FF;
@brown: #75715E;
@orange: #FD971F;
@light-orange: #FFD569;
@green: #A6E22E;
@sea-green: #529B2F;
`
function replacer(match, p1, p2, p3, p4, p5, p6, offset, string) {
return 'rgb('
+ parseInt(p1 || p4, 16) + ', '
+ parseInt(p2 || p5, 16) + ', '
+ parseInt(p3 || p6, 16) + ')';
}
function convertAll(textToConvert) {
return textToConvert.replace(/#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})|#([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})/ig, replacer)
}
document.getElementById('App').innerHTML = '<pre>' + convertAll(toConvert) + '</pre>'
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"><\/script>
<div id='App'></div>
<script src="//fb.me/react-0.14.3.js"><\/script>
<script src="//fb.me/react-dom-0.14.3.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">/*jshint esnext:true */
var toConvert = `
@ghost-white: #F8F8F0;
@light-ghost-white: #F8F8F2;
@light-gray: #CCC;
@gray: #888;
@brown-gray: #49483E;
@dark-gray: #282828;
@yellow: #E6DB74;
@blue: #66D9EF;
@pink: #F92672;
@purple: #AE81FF;
@brown: #75715E;
@orange: #FD971F;
@light-orange: #FFD569;
@green: #A6E22E;
@sea-green: #529B2F;
`
function replacer(match, p1, p2, p3, p4, p5, p6, offset, string) {
return 'rgb('
+ parseInt(p1 || p4, 16) + ', '
+ parseInt(p2 || p5, 16) + ', '
+ parseInt(p3 || p6, 16) + ')';
}
function convertAll(textToConvert) {
return textToConvert.replace(/#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})|#([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})/ig, replacer)
}
document.getElementById('App').innerHTML = '<pre>' + convertAll(toConvert) + '</pre>'</script></body>
</html>
Raw
jsbin.pesemo.js
/*jshint esnext:true */
var toConvert = `
@ghost-white: #F8F8F0;
@light-ghost-white: #F8F8F2;
@light-gray: #CCC;
@gray: #888;
@brown-gray: #49483E;
@dark-gray: #282828;
@yellow: #E6DB74;
@blue: #66D9EF;
@pink: #F92672;
@purple: #AE81FF;
@brown: #75715E;
@orange: #FD971F;
@light-orange: #FFD569;
@green: #A6E22E;
@sea-green: #529B2F;
`
function replacer(match, p1, p2, p3, p4, p5, p6, offset, string) {
return 'rgb('
+ parseInt(p1 || p4, 16) + ', '
+ parseInt(p2 || p5, 16) + ', '
+ parseInt(p3 || p6, 16) + ')';
}
function convertAll(textToConvert) {
return textToConvert.replace(/#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})|#([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})/ig, replacer)
}
document.getElementById('App').innerHTML = '<pre>' + convertAll(toConvert) + '</pre>'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment