Created
March 26, 2019 09:14
-
-
Save sinovic/d7882f59e3eacb0837bbc3a7fbb4c0db to your computer and use it in GitHub Desktop.
Generating Html With hyperscript-helpers // source https://jsbin.com/megevip
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Generating Html With hyperscript-helpers"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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