Add Todo App

riot · Aug 15, 2015 · d4e3e8c · d4e3e8c
1 parent 7835136
commit d4e3e8c
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 0 deletions.
diff --git a/todo-app/README.md b/todo-app/README.md
@@ -0,0 +1,26 @@
+# Todo App
+
+This is a simple example with in-browser compilation.
+
+## How to try and edit
+
+Open this demo page (under construction) and click `edit on Plunker` button to edit.
+
+## How to try locally
+
+Or, you can try this locally, too. Follow the instruction below.
+
+Install superstatic if you don't have.
+
+```bash
+$ npm install -g superstatic
+```
+
+Download or clone this repo, then run the command.
+
+```bash
+$ cd to/this/dir
+$ ss
+```
+
+Open the URL shown in your browser.
diff --git a/todo-app/index.html b/todo-app/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Riot todo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="todo.css">
+
+    <!--[if lt IE 9]>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
+    <script>html5.addElements('todo')</script>
+    <![endif]-->
+
+  </head>
+
+  <body>
+
+    <todo></todo>
+
+    <script src="todo.tag" type="riot/tag"></script>
+    <script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>
+
+    <script>
+    riot.mount('todo', {
+      title: 'I want to behave!',
+      items: [
+        { title: 'Avoid excessive coffeine', done: true, hidden: false },
+        { title: 'Hidden item', done: false, hidden: true },
+        { title: 'Be less provocative', done: false, hidden: false  },
+        { title: 'Be nice to people', done: false, hidden: false }
+      ]
+    })
+    </script>
+
+  </body>
+
+</html>
diff --git a/todo-app/todo.css b/todo-app/todo.css
@@ -0,0 +1,54 @@
+
+body {
+  font-family: 'myriad pro', sans-serif;
+  font-size: 20px;
+  border: 0;
+}
+
+todo {
+  display: block;
+  max-width: 400px;
+  margin: 5% auto;
+}
+
+form input {
+  font-size: 85%;
+  padding: .4em;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+}
+
+button {
+  background-color: #1FADC5;
+  border: 1px solid rgba(0,0,0,.2);
+  font-size: 75%;
+  color: #fff;
+  padding: .4em 1.2em;
+  border-radius: 2em;
+  cursor: pointer;
+  margin: 0 .23em;
+  outline: none;
+}
+
+button[disabled] {
+  background-color: #ddd;
+  color: #aaa;
+}
+
+ul {
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+  padding: .2em 0;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #ccc;
+}
+
+label {
+  cursor: pointer;
+}
diff --git a/todo-app/todo.tag b/todo-app/todo.tag
@@ -0,0 +1,59 @@
+
+<todo>
+
+  <h3>{ opts.title }</h3>
+
+  <ul>
+    <li each={ items.filter(whatShow) }>
+      <label class={ completed: done }>
+        <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
+      </label>
+    </li>
+  </ul>
+
+  <form onsubmit={ add }>
+    <input name="input" onkeyup={ edit }>
+    <button disabled={ !text }>Add #{ items.filter(whatShow).length + 1 }</button>
+
+    <button disabled={ items.filter(onlyDone).length == 0 } onclick={ removeAllDone }>
+    X{ items.filter(onlyDone).length } </button>
+  </form>
+
+  <!-- this script tag is optional -->
+  <script>
+    this.items = opts.items
+
+    edit(e) {
+      this.text = e.target.value
+    }
+
+    add(e) {
+      if (this.text) {
+        this.items.push({ title: this.text })
+        this.text = this.input.value = ''
+      }
+    }
+
+    removeAllDone(e) {
+      this.items = this.items.filter(function(item) {
+        return !item.done
+      })
+    }
+
+    // an two example how to filter items on the list
+    whatShow(item) {
+      return !item.hidden
+    }
+
+    onlyDone(item) {
+     return item.done
+   }
+
+    toggle(e) {
+      var item = e.item
+      item.done = !item.done
+      return true
+    }
+  </script>
+
+</todo>