Skip to content

Instantly share code, notes, and snippets.

@sinovic

sinovic/index.html

Created March 26, 2019 09:14
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 sinovic/fcfa50a440fcce646c393dd0e4966537 to your computer and use it in GitHub Desktop.
Save sinovic/fcfa50a440fcce646c393dd0e4966537 to your computer and use it in GitHub Desktop.
Download ZIP
Generating Html With hyperscript-helpers // source https://jsbin.com/megevip
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Generating Html With hyperscript-helpers">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.rawgit.com/knowthen/d90da7fbbcc3222252d2845eef2adc38/raw/6099003c3102daf281681cd92b7158477a1bc5f4/hyperscript-browser.js"></script>
</head>
<body class="sans-serif bg-white pa3">
<div id="app">
<table>
<thead>
<tr>
<th>Meal</th>
<th>Calorie</th>
</tr>
</thead>
</table>
</div>
<script id="jsbin-javascript">
// 1. using destructuring, create a constant named
// p, which is a function that will create paragraph tags
// Remember, you'll need to use the "tags" namespace
// to destructure from
'use strict';
var _tags = tags;
var p = _tags.p;
// 2. create a constant named myParagraph by using the
// p function you coded in step 1. The paragraph should
// contain a sentence of your choosing.
var myParagraph = p('Hello Worlds!');
// 3. create a constant named node, that references
// the dom node where the id is 'app'.
var node = document.getElementById('app');
// 4. add your 'myParagraph' to the dom node you
// coded in step 3
// node.appendChild(myParagraph)
// HINTS / HELP
// If you need help, you can read the following docs:
// hyperscript-helpers: https://github.com/ohanhi/hyperscript-helpers
// destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
// reference dom node: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
// adding html in code: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
// you can find my solution at: https://jsbin.com/najisaw/1/edit?js,output
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Generating Html With hyperscript-helpers">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<script src="//code.highcharts.com/highcharts.js"><\/script>
<script src="https://cdn.rawgit.com/knowthen/d90da7fbbcc3222252d2845eef2adc38/raw/6099003c3102daf281681cd92b7158477a1bc5f4/hyperscript-browser.js"><\/script>
</head>
<body class="sans-serif bg-white pa3">
<div id="app">
<table>
<thead>
<tr>
<th>Meal</th>
<th>Calorie</th>
</tr>
</thead>
</table>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">// 1. using destructuring, create a constant named
// p, which is a function that will create paragraph tags
// Remember, you'll need to use the "tags" namespace
// to destructure from
const {p} = tags;
// 2. create a constant named myParagraph by using the
// p function you coded in step 1. The paragraph should
// contain a sentence of your choosing.
const myParagraph = p('Hello Worlds!')
// 3. create a constant named node, that references
// the dom node where the id is 'app'.
const node = document.getElementById('app');
// 4. add your 'myParagraph' to the dom node you
// coded in step 3
// node.appendChild(myParagraph)
// HINTS / HELP
// If you need help, you can read the following docs:
// hyperscript-helpers: https://github.com/ohanhi/hyperscript-helpers
// destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
// reference dom node: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
// adding html in code: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
// you can find my solution at: https://jsbin.com/najisaw/1/edit?js,output
</script></body>
</html>
Raw
jsbin.megevip.js
// 1. using destructuring, create a constant named
// p, which is a function that will create paragraph tags
// Remember, you'll need to use the "tags" namespace
// to destructure from
'use strict';
var _tags = tags;
var p = _tags.p;
// 2. create a constant named myParagraph by using the
// p function you coded in step 1. The paragraph should
// contain a sentence of your choosing.
var myParagraph = p('Hello Worlds!');
// 3. create a constant named node, that references
// the dom node where the id is 'app'.
var node = document.getElementById('app');
// 4. add your 'myParagraph' to the dom node you
// coded in step 3
// node.appendChild(myParagraph)
// HINTS / HELP
// If you need help, you can read the following docs:
// hyperscript-helpers: https://github.com/ohanhi/hyperscript-helpers
// destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
// reference dom node: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
// adding html in code: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
// you can find my solution at: https://jsbin.com/najisaw/1/edit?js,output
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment