1- # TodoMVC Complete TDD Example in Vanilla JavaScript using Elm Architecture
1+ <div align =" center " >
2+
3+ # Todo List App (TodoMVC) in Vanilla JavaScript using Elm Architecture
4+
5+ [ ![ Build Status] ( https://img.shields.io/travis/dwyl/todomvc-vanilla-javascript-elm-architecture-example/master.svg?style=flat-square )] ( https://travis-ci.org/dwyl/todomvc-vanilla-javascript-elm-architecture-example )
6+ [ ![ codecov.io] ( https://img.shields.io/codecov/c/github/dwyl/todomvc-vanilla-javascript-elm-architecture-example/master.svg?style=flat-square )] ( http://codecov.io/github/dwyl/todomvc-vanilla-javascript-elm-architecture-example?branch=master )
7+ [ ![ Code Climate] ( https://img.shields.io/codeclimate/maintainability/dwyl/todomvc-vanilla-javascript-elm-architecture-example.svg?style=flat-square )] ( https://codeclimate.com/github/dwyl/todomvc-vanilla-javascript-elm-architecture-example )
8+ [ ![ Dependencies: None!] ( https://david-dm.org/dwyl/todomvc-vanilla-javascript-elm-architecture-example/status.svg?style=flat-square )] ( https://david-dm.org/dwyl/todomvc-vanilla-javascript-elm-architecture-example )
9+ [ ![ devDependencies Status] ( https://david-dm.org/dwyl/todomvc-vanilla-javascript-elm-architecture-example/dev-status.svg?style=flat-square )] ( https://david-dm.org/dwyl/todomvc-vanilla-javascript-elm-architecture-example?type=dev )
10+ [ ![ contributions welcome] ( https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat-square )] ( https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example/issues )
11+ <!-- uncomment when ready to ship!
12+ [](http://hits.dwyl.io/dwyl/todomvc-vanilla-javascript-elm-architecture-example)
13+ -->
214
3- A step-by-step example/how-to
4- for building a Todo List from scratch
15+ A *** step-by-step*** example/how-to
16+ for building a ** Todo List _ from scratch _ **
517following the TodoMVC specification/UI
6- using "vanilla" JavaScript (no frameworks!)
18+ using "*** Vanilla *** " ** JavaScript** ( _ no frameworks!_ )
719with the Elm Architecture to organise/structure the code.
820
9- ![ elm-todo-gif] ( https://user-images.githubusercontent.com/194400/45237254-10d5e980-b2d6-11e8-8281-b95452bde519.gif )
1021
11- [ ![ Build Status] ( https://travis-ci.org/dwyl/learn-elm-architecture-in-javascript.svg?branch=master )] ( https://travis-ci.org/dwyl/learn-elm-architecture-in-javascript )
12- [ ![ test coverage] ( https://codecov.io/gh/dwyl/learn-elm-architecture-in-javascript/branch/master/graph/badge.svg )] ( https://codecov.io/gh/dwyl/learn-elm-architecture-in-javascript )
13- [ ![ dependencies Status] ( https://david-dm.org/dwyl/learn-elm-architecture-in-javascript/status.svg )] ( https://david-dm.org/dwyl/learn-elm-architecture-in-javascript )
14- [ ![ devDependencies Status] ( https://david-dm.org/dwyl/learn-elm-architecture-in-javascript/dev-status.svg )] ( https://david-dm.org/dwyl/learn-elm-architecture-in-javascript?type=dev )
15- [ ![ contributions welcome] ( https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat )] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/issues )
16- [ ![ HitCount] ( http://hits.dwyl.io/dwyl/learn-elm-architecture-in-javascript.svg )] ( http://hits.dwyl.io/dwyl/learn-elm-architecture-in-javascript )
22+ <a href="https://youtu.be/epPS_DjEWWY?t=32 "
23+ alt="Volvo cars are safer because they learn from every real world crash!">
24+ <img src="https://user-images.githubusercontent.com/194400/45237254-10d5e980-b2d6-11e8-8281-b95452bde519.gif "
25+ alt="Car Designers follow a Testing Mindset">
26+ </a >
1727
28+ </div >
1829
1930> Before you continue, try out the demo:
2031 https://todomvc-app.herokuapp.com/examples/todo-list <br />
@@ -67,8 +78,6 @@ into a file called **`elmish.js`**
6778so that our Todo List application can be as concise
6879and "declarative" as possible.
6980
70-
71-
7281### Todo List?
7382
7483If you are _ unfamiliar_ with Todo lists, simply put:
@@ -101,8 +110,12 @@ to ensure that everything is clear.
101110
102111## _ Who?_
103112
104- This tutorial is for everyone who wants to _ apply_ their "TEA" knowledge
105- and _ think_ about the basics of a Todo List Application.
113+ This tutorial is for anyone/everyone who wants
114+ to develop their "core" JavaScript skills (_ without using a framework/library_ )
115+ while building a "real world" (_ fully functional_ ) Todo List Application.
116+
117+ to _ apply_ their "TEA" knowledge
118+ and _ think_ about the basics of a
106119
107120> As always, if you get "stuck", _ please_ open an issue:
108121https://github.com/dwyl/learn-elm-architecture-in-javascript/issues
@@ -156,9 +169,9 @@ We will be using **Tape** and **JSDOM** for testing
156169both our functions and the final application.
157170If you are ` new ` to either of these tools,
158171please see:
159- [ https://github.com/dwyl/**learn-tape ** ] ( https://github.com/dwyl/learn-tape )
172+ [ https://github.com/dwyl/**todomvc-vanilla-javascript-elm-architecture-example ** ] ( https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example )
160173and
161- [ ** front-end** -with-tape.md] ( https://github.com/dwyl/learn-tape /blob/master/front-end-with-tape.md )
174+ [ ** front-end** -with-tape.md] ( https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example /blob/master/front-end-with-tape.md )
162175
163176
164177#### Create Files
@@ -182,7 +195,7 @@ that "requires" the libraries/files so we can _execute_ the functions.
182195
183196In the ` test/todo-app.test.js ` file, type the following code:
184197``` js
185- const test = require (' tape' ); // https://github.com/dwyl/learn-tape
198+ const test = require (' tape' ); // https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example
186199const fs = require (' fs' ); // to read html files (see below)
187200const path = require (' path' ); // so we can open files cross-platform
188201const html = fs .readFileSync (path .resolve (__dirname ,
@@ -195,9 +208,9 @@ const id = 'test-app'; // all tests use 'test-app' as root element
195208> Most of this code should be _ familiar_ to you
196209 if you have followed previous tutorials.
197210> If anything is _ unclear_ please revisit
198- [ https://github.com/dwyl/**learn-tape ** ] ( https://github.com/dwyl/learn-tape )
211+ [ https://github.com/dwyl/**todomvc-vanilla-javascript-elm-architecture-example ** ] ( https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example )
199212and
200- [ ** front-end** -with-tape.md] ( https://github.com/dwyl/learn-tape /blob/master/front-end-with-tape.md )
213+ [ ** front-end** -with-tape.md] ( https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example /blob/master/front-end-with-tape.md )
201214
202215If you attempt to run the test file: ` node test/todo-app.test.js `
203216you should see no output. <br />
0 commit comments