Skip to content

Instantly share code, notes, and snippets.

@philholden

philholden/esnextbin.md

Created September 15, 2016 19:12
Show Gist options
  • Save philholden/2965bb767365fd8466072b040692de3d to your computer and use it in GitHub Desktop.
Save philholden/2965bb767365fd8466072b040692de3d to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNext Bin Sketch</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Raw
index.js
import {StyleSheet, css} from 'aphrodite'
const app = document.getElementById('app')
const randomColor = () => '#xxxxxx'.replace(
/x/g,
() => (Math.random() * 16 | 0).toString(16)
)
setInterval(() => {
const styles = StyleSheet.create({
random: {
backgroundColor: randomColor(),
color: randomColor(),
}
})
app.innerHTML = `
<div class="${css(styles.random)}">
This is red.
</div>
`
}, 500)
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"aphrodite": "0.3.3"
}
}
Raw
transpiled.js
'use strict';
var _aphrodite = require('aphrodite');
var app = document.getElementById('app');
var randomColor = function randomColor() {
return '#xxxxxx'.replace(/x/g, function () {
return (Math.random() * 16 | 0).toString(16);
});
};
setInterval(function () {
var styles = _aphrodite.StyleSheet.create({
random: {
backgroundColor: randomColor(),
color: randomColor()
}
});
app.innerHTML = '\n <div class="' + (0, _aphrodite.css)(styles.random) + '">\n This is red.\n </div>\n ';
}, 500);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment