Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 12, 2016 21:00
Show Gist options
  • Save anonymous/8146e35c41eba534f2f5e14805dd54ab to your computer and use it in GitHub Desktop.
Save anonymous/8146e35c41eba534f2f5e14805dd54ab to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/wujofeqasi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<div id="root"></div>
</head>
<body>
<script id="jsbin-javascript">
'use strict';
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
var models = [{
title: 'lake',
url: "http://noorimages.com/wp-content/uploads/2016/08/KOY2015NGMC1010-0015-1-280x186.jpg",
nb: 0
}, {
title: 'woemn',
url: 'http://noorimages.com/wp-content/uploads/2016/08/HAR2009004C-0002-265x186.jpg',
nb: 0
}];
function create(models) {
return div.apply(undefined, [{}].concat(_toConsumableArray(models.map(function (model) {
return div({}, img({ src: model.url }), h2({ textContent: model.title }), h4({ textContent: model.nb, onclick: increment.bind(null, model) }));
}))));
}
function div(attrs) {
for (var _len = arguments.length, childs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
childs[_key - 1] = arguments[_key];
}
return h.apply(undefined, ['DIV', attrs].concat(childs));
}
function img(attrs) {
for (var _len2 = arguments.length, childs = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
childs[_key2 - 1] = arguments[_key2];
}
return h.apply(undefined, ['IMG', attrs].concat(childs));
}
function h2(attrs) {
for (var _len3 = arguments.length, childs = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
childs[_key3 - 1] = arguments[_key3];
}
return h.apply(undefined, ['H2', attrs].concat(childs));
}
function h4(attrs) {
for (var _len4 = arguments.length, childs = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
childs[_key4 - 1] = arguments[_key4];
}
return h.apply(undefined, ['H4', attrs].concat(childs));
}
function increment(model) {
model.nb += 1;
rerender();
}
function h(type) {
var attrs = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var elm = document.createElement(type);
Object.assign(elm, attrs);
for (var _len5 = arguments.length, childs = Array(_len5 > 2 ? _len5 - 2 : 0), _key5 = 2; _key5 < _len5; _key5++) {
childs[_key5 - 2] = arguments[_key5];
}
childs.forEach(function (child) {
elm.appendChild(child);
});
return elm;
}
function render(root, el) {
while (root.firstChild) {
root.removeChild(root.firstChild);
}
root.appendChild(el);
}
function rerender() {
return render(document.querySelector('#root'), create(models));
}
render(document.querySelector('#root'), create(models));
</script>
<script id="jsbin-source-javascript" type="text/javascript">
const models = [{
title: 'lake',
url:"http://noorimages.com/wp-content/uploads/2016/08/KOY2015NGMC1010-0015-1-280x186.jpg",
nb: 0
}, {
title: 'woemn',
url:'http://noorimages.com/wp-content/uploads/2016/08/HAR2009004C-0002-265x186.jpg',
nb: 0
}];
function create(models) {
return (
div({},
...models.map(model => {
return (
div({},
img({src: model.url}),
h2({textContent: model.title}),
h4({textContent: model.nb, onclick: increment.bind(null, model)}))
);
})
)
);
}
function div(attrs, ...childs){
return h('DIV', attrs, ...childs);
}
function img(attrs, ...childs){
return h('IMG', attrs, ...childs);
}
function h2(attrs, ...childs){
return h('H2', attrs, ...childs);
}
function h4(attrs, ...childs){
return h('H4', attrs, ...childs);
}
function increment(model){
model.nb += 1;
rerender();
}
function h(type, attrs={}, ...childs) {
const elm = document.createElement(type);
Object.assign(elm, attrs);
childs.forEach((child)=> {
elm.appendChild(child);
});
return elm;
}
function render(root, el){
while( root.firstChild) {
root.removeChild( root.firstChild);
}
root.appendChild(el);
}
function rerender(){
return render(document.querySelector('#root'), create(models));
}
render(document.querySelector('#root'), create(models));
</script></body>
</html>
Raw
jsbin.wujofeqasi.js
'use strict';
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
var models = [{
title: 'lake',
url: "http://noorimages.com/wp-content/uploads/2016/08/KOY2015NGMC1010-0015-1-280x186.jpg",
nb: 0
}, {
title: 'woemn',
url: 'http://noorimages.com/wp-content/uploads/2016/08/HAR2009004C-0002-265x186.jpg',
nb: 0
}];
function create(models) {
return div.apply(undefined, [{}].concat(_toConsumableArray(models.map(function (model) {
return div({}, img({ src: model.url }), h2({ textContent: model.title }), h4({ textContent: model.nb, onclick: increment.bind(null, model) }));
}))));
}
function div(attrs) {
for (var _len = arguments.length, childs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
childs[_key - 1] = arguments[_key];
}
return h.apply(undefined, ['DIV', attrs].concat(childs));
}
function img(attrs) {
for (var _len2 = arguments.length, childs = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
childs[_key2 - 1] = arguments[_key2];
}
return h.apply(undefined, ['IMG', attrs].concat(childs));
}
function h2(attrs) {
for (var _len3 = arguments.length, childs = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
childs[_key3 - 1] = arguments[_key3];
}
return h.apply(undefined, ['H2', attrs].concat(childs));
}
function h4(attrs) {
for (var _len4 = arguments.length, childs = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
childs[_key4 - 1] = arguments[_key4];
}
return h.apply(undefined, ['H4', attrs].concat(childs));
}
function increment(model) {
model.nb += 1;
rerender();
}
function h(type) {
var attrs = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var elm = document.createElement(type);
Object.assign(elm, attrs);
for (var _len5 = arguments.length, childs = Array(_len5 > 2 ? _len5 - 2 : 0), _key5 = 2; _key5 < _len5; _key5++) {
childs[_key5 - 2] = arguments[_key5];
}
childs.forEach(function (child) {
elm.appendChild(child);
});
return elm;
}
function render(root, el) {
while (root.firstChild) {
root.removeChild(root.firstChild);
}
root.appendChild(el);
}
function rerender() {
return render(document.querySelector('#root'), create(models));
}
render(document.querySelector('#root'), create(models));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment