diff --git a/src/app.css b/src/app.css
index 25f4f6f..4ecf211 100644
--- a/src/app.css
+++ b/src/app.css
@@ -366,6 +366,11 @@ label[for='toggle-all'] {
position: absolute;
}
+.todo-list li a {
+ color: inherit;
+ text-decoration: none;
+}
+
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
diff --git a/src/app.js b/src/app.js
index 7457273..9729701 100644
--- a/src/app.js
+++ b/src/app.js
@@ -24,12 +24,16 @@ function grabMethodFromBody (req, res) {
app.use(methodOverride(grabMethodFromBody))
-const renderIndexPage = require('./index-page')
+const {renderIndexPage, renderTodoPage} = require('./index-page')
function sendIndexPage (req, res) {
res.send(renderIndexPage())
}
+function sendTodoPage (req, res) {
+ res.send(renderTodoPage(req.params.id))
+}
+
function activeTodosPage (req, res) {
const filter = (todo) => !todo.done
res.send(renderIndexPage(filter, req.url))
@@ -102,6 +106,7 @@ function clearCompleted (req, res, next) {
}
app.get('/', broadcast, sendIndexPage)
+app.get('/todo/:id', sendTodoPage)
app.get('/app.css', sendAppCss)
app.get('/active', activeTodosPage)
app.get('/completed', completedTodosPage)
diff --git a/src/index-page.js b/src/index-page.js
index 745984d..c2e8e8a 100644
--- a/src/index-page.js
+++ b/src/index-page.js
@@ -1,3 +1,7 @@
+'use strict'
+
+const la = require('lazy-ass')
+const is = require('check-more-types')
const render = require('./render/render')
const Todos = require('todomvc-model')
const toHTML = require('vdom-to-html')
@@ -10,7 +14,7 @@ const header = [
'',
'',
'TodoMVC',
- '',
+ '',
'',
'',
'',
@@ -38,4 +42,10 @@ function renderIndexPage (filter, route) {
return header + '\n' + todosMarkup + '\n' + footer
}
-module.exports = renderIndexPage
+function renderTodoPage (id) {
+ la(is.unemptyString(id), 'missing todo id', id)
+ const filter = (todo) => todo.id === id
+ return renderIndexPage(filter)
+}
+
+module.exports = {renderIndexPage, renderTodoPage}
diff --git a/src/render/render-todo.js b/src/render/render-todo.js
index a1ad6fe..b8800ad 100644
--- a/src/render/render-todo.js
+++ b/src/render/render-todo.js
@@ -31,7 +31,11 @@ function render (Todos, todo) {
value: 'PATCH'
})
]),
- h('label', todo.what),
+ h('label', [
+ h('a', {
+ href: `/todo/${todo.id}`
+ }, todo.what)
+ ]),
h('form', {
method: 'POST',
action: '/',