2f:[] 2d:{"title":"101 - The basics","cells":[{"id":227,"value":"# 101 - The basics","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"## Using styles across your notebook\n\nYou can use styling across the notebook by writing it inside an `html` cell","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"\n\n\n\n\n\n\n\n\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":303,"value":"

This is just an H1 tag

This is just an H2 tag

This is just an H3 tag

\n\n

Example heading New

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":319,"value":"btn = document.querySelector('.btn') // you'll have to run this cell to activate the eventListener written below","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"btn.addEventListener('click', () => console.log(1433)) // check browser's console","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"## Fetching Data\n\nGenerally, fetching data you can upload it to this notebook as an attachment and then use it form the variable. You can use `.json`, `.csv` and other formats too. You could also load data directly from a url.\n\n```js\nresponse = fetch('https://jsonplaceholder.typicode.com/todos/') // cell 1\nresponse.json() // cell 2\n```\n\n_Use https://jsonplaceholder.typicode.com/_ for fetching sample JSON data","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"response = await fetch('https://jsonplaceholder.typicode.com/todos/10')","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"response.json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"photos = await fetch('https://jsonplaceholder.typicode.com/photos/30')","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"pic = photos.json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"![sample image](${pic['thumbnailUrl']})","pinned":true,"hidden":false,"mode":"md"},{"id":301,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"# Generators","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"function* giveToys() {\n yield '🧸 Teddy Bear';\n yield '🚗 Toy Car';\n yield '🪁 Kite';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"// instantiate the generator function\ntoys = giveToys()","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"// // a continuous while loop that increments a variable\n// {\n// let i = 0;\n// while(true) {\n// return ++i\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"// // a continuous while loop that increments a variable and yields it one by one\n// {\n// let i = 0;\n// while(true) {\n// yield ++i\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"// // continuous yields a variable but with a slight delay (using `Promises`)\n// {\n// let i = 0;\n// while (true) {\n// yield Promises.delay(1000, ++i);\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"// // can do the same thing using Promise await and yield\n// {\n// let i = 0\n// while(true) {\n// await Promises.delay(1000)\n// yield ++i\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"// // a clock that \n// {\n// while(true) yield Promises.delay(1000, Date.now())\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"// {\n// while(true) {\n// const now = new Date()\n// yield Promises.delay(1000, `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`)\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"{\n while(true) {\n const now = new Date()\n const hrs = (now.getHours() < 10 ? '0' : '') + now.getHours()\n const mins = (now.getMinutes() < 10 ? '0' : '') + now.getMinutes()\n const secs = (now.getSeconds() < 10 ? '0' : '') + now.getSeconds()\n \n yield Promises.delay(1000, htl.html`

${hrs}:${mins}:${secs}

`)\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"// you can also yield numbers within a range. the `yield*` delegates the iteration to the `[] / Array` returned by the `_.range` fn\n\n// loop = {\n// while (true) {\n// yield* _.range(-100, 100)\n// }\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"// you can yield each element of an iterable with a delay like so... (NOTE: this will iterate once till the end of the arr & stop)\n\nloop_one = {\n const arr = [1, 2, 3, 45, 56, 6, 1, 5, 1, 3, 5, 3, 4, 5, 3, 1, 'e', 6, 5, 'w']\n let i = 0\n while(true) {\n await Promises.delay(1000)\n i++\n yield arr[i]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"// you can also continue the loop back and forth by putting a condition along with a delay\n// -----\n\n// loop_cont = {\n// const arr = _.range([-50, 50])\n// let i = 0\n// let d = 'up'\n// while(true) {\n// await Promises.delay(100)\n// if(i === 50) {\n// d = 'down';\n// } else if(i === -50) {\n// d = 'up';\n// }\n// i = d === 'up' ? i + 1 : i - 1;\n// yield i\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"function* everytime() {\n yield 1\n yield 2\n yield 3\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"x = everytime()","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"x","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"// you can add snippets in a code block and execute it like...\n{\n const x = 123\n\n function abc(param=297) {\n return param + x\n }\n\n // add a return to the block to print it on the cell\n return abc()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"Generally, you would use `d3.select` or javascript to select the DOM element and the operate, insert or modify the element. Instead in notebooks, you could directly write an html block and then use javascript to operate, insert or modify on run-time, like the following\n","pinned":false,"hidden":false,"mode":"md"}],"files":"$W2f","stdlib":"1","titling":"auto"}