55A ** _ step-by-step_ tutorial** showing you how to
66build a ** Todo List App _ from scratch_ ** in ** ` JavaScript ` ** .
77
8- [ ![ GitHub Workflow Status] ( https://img.shields.io/github/workflow/status/dwyl/javascript-todo-list-tutorial/Node.js%20CI? style=flat-square )] ( https://github.com/dwyl/javascript-todo-list-tutorial/actions )
9- [ ![ codecov.io] ( https://img.shields.io/codecov/c/github/dwyl/javascript-todo-list-tutorial/master .svg?style=flat-square )] ( https://codecov.io/github/dwyl/javascript-todo-list-tutorial?branch=master )
10- [ ![ Dependencies: None] ( https://img.shields.io/badge/dependencies-none-brightgreen.svg?style=flat-square )] ( https://github.com/dwyl/javascript-todo-list-tutorial/blob/master /package.json#L12 " Zero Dependencies ")
8+ [ ![ GitHub Workflow Status] ( https://img.shields.io/github/actions/ workflow/status/dwyl/javascript-todo-list-tutorial/ci.yml?label=build& style=flat-square&branch=main )] ( https://github.com/dwyl/javascript-todo-list-tutorial/actions )
9+ [ ![ codecov.io] ( https://img.shields.io/codecov/c/github/dwyl/javascript-todo-list-tutorial/main .svg?style=flat-square )] ( https://codecov.io/github/dwyl/javascript-todo-list-tutorial?branch=main )
10+ [ ![ Dependencies: None] ( https://img.shields.io/badge/dependencies-none-brightgreen.svg?style=flat-square )] ( https://github.com/dwyl/javascript-todo-list-tutorial/blob/main /package.json#L12 " Zero Dependencies ")
1111[ ![ contributions welcome] ( https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat-square )] ( https://github.com/dwyl/javascript-todo-list-tutorial/issues )
1212[ ![ HitCount] ( https://hits.dwyl.com/dwyl/todo-list-javascript-tutorial.svg )] ( https://hits.dwyl.com/dwyl/javascript-todo-list-tutorial )
13- <!-- uncomment when service is working ... [](http://inch-ci.org/github/dwyl/javascript-todo-list-tutorial) -->
13+ <!-- uncomment when service is working ... [](http://inch-ci.org/github/dwyl/javascript-todo-list-tutorial) -->
1414
1515
16- <a href="https://todomvc-app.herokuapp.com "
16+ <a href="https://dwyl.github.io/javascript-todo-list-tutorial/ "
1717 alt="Try the Demo on Heroku!">
1818 <img src="https://user-images.githubusercontent.com/194400/45237254-10d5e980-b2d6-11e8-8281-b95452bde519.gif "
1919 alt="Step one: learn JavaScript!">
2020</a >
2121
2222</div >
2323
24- > Before you continue, try the demo: https://todomvc-app.herokuapp.com <br />
24+ > Before you continue, try the demo: https://dwyl.github.io/javascript-todo-list-tutorial/ <br />
2525
2626> Add a few items to the list. Double-click/tap the item to edit it.
2727 Check-off your todos and navigate the footer to filter for Active/Completed.
@@ -72,7 +72,7 @@ into a "mini frontend framework" called "***elmish***".
7272(_ elmish is inspired by Elm but only meant for educational purposes!_ )
7373
7474The journey to creating ** elmish** is captured in
75- [ ** ` elmish.md ` ** ] ( https://github.com/dwyl/javascript-todo-list-tutorial/blob/master /elmish.md )
75+ [ ** ` elmish.md ` ** ] ( https://github.com/dwyl/javascript-todo-list-tutorial/blob/main /elmish.md )
7676and fully documented code is in ** ` elmish.js ` ** .
7777This means our Todo List App can be as concise
7878and "declarative" as possible.
@@ -166,19 +166,19 @@ helper functions e.g: `mount`, `div`, `input` and `route`.
166166You can _ opt_ to _ either_ : <br />
167167
168168** a)** read the ` Elm ` (_ ish_ ) docs/tutorial
169- [ ` elmish.md ` ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master /elmish.md )
169+ [ ` elmish.md ` ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main /elmish.md )
170170*** ` before ` *** building the Todo List App -
171171this will give you both TDD practice
172172and a deeper understanding of building a micro framework.
173173i.e. "** _ prospective_ learning** "<br />
174174
175175** b)** refer the ` Elm ` (_ ish_ ) docs/tutorial
176- [ ` elmish.md ` ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master /elmish.md )
176+ [ ` elmish.md ` ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main /elmish.md )
177177*** ` while ` *** building the Todo List App when you "** _ need_ to know** "
178178how one of the helper functions works. i.e. "** _ contextual_ learning** " <br />
179179
180180** c)** ** only _ consult_ ** the ` Elm ` (_ ish_ ) docs/tutorial
181- [ ` elmish.md ` ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master /elmish.md )
181+ [ ` elmish.md ` ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main /elmish.md )
182182*** ` if ` *** you are "stuck" *** ` while ` *** building the Todo List App.
183183i.e. "** _ debug_ learning** " <br />
184184
@@ -201,7 +201,7 @@ If you are `new` to either of these tools,
201201please see:
202202[ github.com/dwyl/** learn-tape** ] ( https://github.com/dwyl/learn-tape )
203203and
204- [ ** front-end** -with-tape.md] ( https://github.com/dwyl/learn-tape/blob/master /front-end-with-tape.md )
204+ [ ** front-end** -with-tape.md] ( https://github.com/dwyl/learn-tape/blob/main /front-end-with-tape.md )
205205
206206We will be using ** JSDOC** for documentation.
207207Please see [ our tutorial] ( https://github.com/dwyl/learn-jsdoc ) if this is new to you.
@@ -241,7 +241,7 @@ if you have followed previous tutorials.
241241> If anything is _ unclear_ please revisit
242242[ https://github.com/dwyl/**learn-tape ** ] ( https://github.com/dwyl/learn-tape )
243243and
244- [ ** front-end** -with-tape.md] ( https://github.com/dwyl/learn-tape/blob/master /front-end-with-tape.md )
244+ [ ** front-end** -with-tape.md] ( https://github.com/dwyl/learn-tape/blob/main /front-end-with-tape.md )
245245
246246If you attempt to run the test file: ` node test/todo-app.test.js `
247247you should see no output. <br />
@@ -274,7 +274,7 @@ has 3 keys:
274274
275275> The TodoMVC Specification requires us to display a ** ` counter ` **
276276 of the items in the Todo list:
277- https://github.com/tastejs/todomvc/blob/master /app-spec.md#counter
277+ https://github.com/tastejs/todomvc/blob/main /app-spec.md#counter
278278
279279![ javascript-todo-list-count] ( https://user-images.githubusercontent.com/194400/73112092-e73a5400-3f04-11ea-90f6-d4ae541a129c.png )
280280
@@ -777,7 +777,7 @@ This is "_enough_" functionality to start _using_ the todo list (_ourselves_)
777777and ** UX-testing** it with _ prospective_ "*** users*** ".
778778
779779If you followed through the "Elm(ish)" tutorial
780- [ ` elmish.md ` ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master /elmish.md )
780+ [ ` elmish.md ` ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main /elmish.md )
781781you will have seen that we created a _ sample_ ` view ` in the last few _ tests_
782782to "_ exercise_ " the DOM element creation functions.
783783This means that we _ already know_ how to build a ` view ` for our Todo List App!
@@ -1432,7 +1432,7 @@ people _using_ the app will interact with!
14321432#### Requirements?
14331433
14341434Take a look at this list of test output:
1435- https://github.com/tastejs/todomvc/tree/master /tests#example-output
1435+ https://github.com/tastejs/todomvc/tree/main /tests#example-output
14361436
14371437```
14381438TodoMVC
@@ -1620,7 +1620,7 @@ however, in order to "listen" for the **`[Enter]`** key "event"
16201620
16211621Thankfully, we touched upon this while building ` Elm ` (_ ish_ ),
16221622if you need a recap, see:
1623- [ ** elmish.md#subscriptions-for-event-listeners** ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master /elmish.md#subscriptions-for-event-listeners )
1623+ [ ** elmish.md#subscriptions-for-event-listeners** ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main /elmish.md#subscriptions-for-event-listeners )
16241624
16251625Try to make the "** 2. New Todo** " batch of tests _ pass_
16261626by creating (_ and exporting_ ) a ** ` subscriptions ` ** function
@@ -1940,7 +1940,7 @@ First let's review the TodoMVC "Editing" test assertions:
19401940```
19411941
19421942Further reading of the TodoMVC Spec:
1943- https://github.com/tastejs/todomvc/blob/master /app-spec.md#item
1943+ https://github.com/tastejs/todomvc/blob/main /app-spec.md#item
19441944reveals the following acceptance criteria:
19451945
19461946
@@ -2283,15 +2283,15 @@ which will handle the "double-click" event and set `model.editing`.
22832283### 5.2 Double-Click item ` <label> ` to Edit
22842284
22852285The TodoMVC *** spec*** for item
2286- https://github.com/tastejs/todomvc/blob/master /app-spec.md#item
2286+ https://github.com/tastejs/todomvc/blob/main /app-spec.md#item
22872287includes the line:
22882288
22892289``` sh
22902290Double-clicking the < label> activates editing mode, by toggling the .editing class on its < li>
22912291```
22922292
22932293> _ ** Note** : the sample TodoMVC Browser Tests:
2294- https://github.com/tastejs/todomvc/tree/master /tests#example-output
2294+ https://github.com/tastejs/todomvc/tree/main /tests#example-output
22952295does ** not** include a test-case for ** double-clicking** .
22962296We are going to add one below for "extra credit"._
22972297
@@ -3222,8 +3222,8 @@ please "star" the project on GitHub ⭐️ to show your appreciation
32223222and share it with others in the community who might find it useful! Thanks! ✨
32233223
32243224Consider sharing your creation with your friends
3225- by deploying it to Heroku !
3226- https://github.com/dwyl/learn-heroku
3225+ by deploying it to GitHub Pages !
3226+ https://github.com/dwyl/learn-github-pages
32273227
32283228
32293229# Thanks for Learning with Us!
0 commit comments