Learn to yo-yo

shama · shama · commit 32b4d007d744 · 2016-06-21T13:37:29.000-07:00
diff --git a/learn-to-yo-yo/README.md b/learn-to-yo-yo/README.md
@@ -0,0 +1,7 @@
+# Learn to yo-yo
+
+> [https://youtu.be/MKJHuub6UJI](https://youtu.be/MKJHuub6UJI)
+
+* Install [Node.js](https://nodejs.org/).
+* Install dependencies: `npm install`
+* Then run `npm start` and go to http://localhost:9966 in the browser.
diff --git a/learn-to-yo-yo/index.js b/learn-to-yo-yo/index.js
@@ -0,0 +1,33 @@
+var yo = require('yo-yo')
+var css = require('dom-css')
+
+// var element = yo`<div>Grrrr</div>`
+// document.body.appendChild(element)
+//
+// setTimeout(function () {
+//   yo.update(element, yo`<h1>Growl</h1>`)
+// }, 1000)
+
+function list (items, onadd) {
+  return yo`<ul>
+    ${items.map(function (item) {
+      return yo`<li>${item}</li>`
+    })}
+    <li>${button(onadd)}</li>
+  </ul>`
+}
+
+function button (onclick) {
+  var el = yo`<button onclick=${onclick}>add bear</button>`
+  css(el, {
+    'border-radius': 10
+  })
+  return el
+}
+
+var bears = ['Polar', 'Brown', 'Grizzly']
+var element = list(bears, function onadd () {
+  bears.push('Black')
+  yo.update(element, list(bears, onadd))
+})
+document.body.appendChild(element)
diff --git a/learn-to-yo-yo/package.json b/learn-to-yo-yo/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "learn-to-yo-yo",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js",
+    "test": "node test.js"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^8.3.0"
+  }
+}
