diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..5cb3f0f --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,8 @@ +version: 2 +updates: +- package-ecosystem: npm + directory: "/" + schedule: + interval: monthly + time: "17:00" + timezone: Europe/London diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..f9bf53b --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,33 @@ +# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Node.js CI + +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [22.x, 24.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v4 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci +# - run: npm run build --if-present + - run: npm test + - name: Upload coverage to Codecov + uses: codecov/codecov-action@v5 diff --git a/.gitignore b/.gitignore index 63c5c23..e6a2045 100644 --- a/.gitignore +++ b/.gitignore @@ -18,7 +18,7 @@ coverage # nyc test coverage .nyc_output -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) @@ -54,5 +54,3 @@ typings/ # next.js build output .next - -package-lock.json diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index e618693..0000000 --- a/.travis.yml +++ /dev/null @@ -1,5 +0,0 @@ -language: node_js -node_js: - - node -after_success: - - bash <(curl -s https://codecov.io/bash) diff --git a/LICENSE b/LICENSE index 58cc169..51a26dd 100644 --- a/LICENSE +++ b/LICENSE @@ -1,7 +1,7 @@ GNU GENERAL PUBLIC LICENSE Version 2, June 1991 - Copyright (C) 1989, 1991 Free Software Foundation, Inc., + Copyright (C) 1989, 1991 Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. diff --git a/README.md b/README.md index 558f5bc..86b718d 100644 --- a/README.md +++ b/README.md @@ -3,26 +3,25 @@ # Todo List App JavaScript Tutorial A **_step-by-step_ tutorial** showing you how to -build a **Todo List App _from scratch_** in **JavaScript**. +build a **Todo List App _from scratch_** in **`JavaScript`**. -[![Build Status](https://img.shields.io/travis/dwyl/javascript-todo-list-tutorial/master.svg?style=flat-square)](https://travis-ci.org/dwyl/javascript-todo-list-tutorial) -[![codecov.io](https://img.shields.io/codecov/c/github/dwyl/javascript-todo-list-tutorial/master.svg?style=flat-square)](http://codecov.io/github/dwyl/javascript-todo-list-tutorial?branch=master) -[![Dependencies: None!](https://david-dm.org/dwyl/javascript-todo-list-tutorial/status.svg?style=flat-square)](https://david-dm.org/dwyl/javascript-todo-list-tutorial) -[![devDependencies Status](https://david-dm.org/dwyl/javascript-todo-list-tutorial/dev-status.svg?style=flat-square)](https://david-dm.org/dwyl/javascript-todo-list-tutorial?type=dev) +[![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) +[![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) +[![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") [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat-square)](https://github.com/dwyl/javascript-todo-list-tutorial/issues) -[![HitCount](http://hits.dwyl.io/dwyl/todo-list-javascript-tutorial.svg)](http://hits.dwyl.io/dwyl/javascript-todo-list-tutorial) - +[![HitCount](https://hits.dwyl.com/dwyl/todo-list-javascript-tutorial.svg)](https://hits.dwyl.com/dwyl/javascript-todo-list-tutorial) + - + Step one: learn JavaScript! -> Before you continue, try the demo: https://todomvc-app.herokuapp.com
+> Before you continue, try the demo: https://dwyl.github.io/javascript-todo-list-tutorial/
> Add a few items to the list. Double-click/tap the item to edit it. Check-off your todos and navigate the footer to filter for Active/Completed. @@ -37,14 +36,14 @@ Once you have had a "play" with the demo, come back and _build_ it!! The _purpose_ of this **Todo List _mini_ project** is to _practice_ your "VanillaJS" skills and _consolidate_ your understanding of The Elm Architecture (TEA) -by creating a "real world" _useable_ App following _strict_ +by creating a real world _useable_ App following _strict_ Documentation and Test Driven Development. This will _show_ you that it's not only _possible_ to write docs and tests _first_, you will see _first hand_ that **`code`** is **more concise**, **well-documented** and thus **_easier_ to maintain** -and you will get your "work" done ***much faster***. +and you will get your work done ***much faster***. These are _foundational_ skills that will pay **_immediate_ returns** on the time invested, @@ -73,7 +72,7 @@ into a "mini frontend framework" called "***elmish***". (_elmish is inspired by Elm but only meant for educational purposes!_) The journey to creating **elmish** is captured in -[**`elmish.md`**](https://github.com/dwyl/javascript-todo-list-tutorial/blob/master/elmish.md) +[**`elmish.md`**](https://github.com/dwyl/javascript-todo-list-tutorial/blob/main/elmish.md) and fully documented code is in **`elmish.js`**. This means our Todo List App can be as concise and "declarative" as possible. @@ -100,7 +99,7 @@ using a common user interface (UI): a Todo List Application. We _highly recommend_ checking out the following links: -+ Website: http://todomvc.com ++ Website: https://todomvc.com + GitHub project: https://github.com/tastejs/todomvc For our purposes we will simply be re-using the **TodoMVC `CSS`** @@ -167,19 +166,19 @@ helper functions e.g: `mount`, `div`, `input` and `route`. You can _opt_ to _either_:
**a)** read the `Elm`(_ish_) docs/tutorial -[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md) +[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main/elmish.md) ***`before`*** building the Todo List App - this will give you both TDD practice and a deeper understanding of building a micro framework. i.e. "**_prospective_ learning**"
**b)** refer the `Elm`(_ish_) docs/tutorial -[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md) +[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main/elmish.md) ***`while`*** building the Todo List App when you "**_need_ to know**" how one of the helper functions works. i.e. "**_contextual_ learning**"
**c)** **only _consult_** the `Elm`(_ish_) docs/tutorial -[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md) +[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main/elmish.md) ***`if`*** you are "stuck" ***`while`*** building the Todo List App. i.e. "**_debug_ learning**"
@@ -202,13 +201,18 @@ If you are `new` to either of these tools, please see: [github.com/dwyl/**learn-tape**](https://github.com/dwyl/learn-tape) and -[**front-end**-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md) +[**front-end**-with-tape.md](https://github.com/dwyl/learn-tape/blob/main/front-end-with-tape.md) We will be using **JSDOC** for documentation. Please see [our tutorial](https://github.com/dwyl/learn-jsdoc) if this is new to you. +
+ #### Create Files +Create a **`new`** directory e.g: `/todo-app` +So that you can build the Todo List from scratch! + In your editor/terminal create the following files: + `test/todo-app.test.js` @@ -242,7 +246,7 @@ if you have followed previous tutorials. > If anything is _unclear_ please revisit [https://github.com/dwyl/**learn-tape**](https://github.com/dwyl/learn-tape) and -[**front-end**-with-tape.md](https://github.com/dwyl/javascript-todo-list-tutorial/blob/master/front-end-with-tape.md) +[**front-end**-with-tape.md](https://github.com/dwyl/learn-tape/blob/main/front-end-with-tape.md) If you attempt to run the test file: `node test/todo-app.test.js` you should see no output.
@@ -275,7 +279,7 @@ has 3 keys: > The TodoMVC Specification requires us to display a **`counter`** of the items in the Todo list: -https://github.com/tastejs/todomvc/blob/master/app-spec.md#counter +https://github.com/tastejs/todomvc/blob/main/app-spec.md#counter ![javascript-todo-list-count](https://user-images.githubusercontent.com/194400/73112092-e73a5400-3f04-11ea-90f6-d4ae541a129c.png) @@ -778,7 +782,7 @@ This is "_enough_" functionality to start _using_ the todo list (_ourselves_) and **UX-testing** it with _prospective_ "***users***". If you followed through the "Elm(ish)" tutorial -[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md) +[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/main/elmish.md) you will have seen that we created a _sample_ `view` in the last few _tests_ to "_exercise_" the DOM element creation functions. This means that we _already know_ how to build a `view` for our Todo List App! @@ -821,7 +825,7 @@ and _just_ focus on rendering the _list_ itself. In your web browser, open **Dev**eloper **Tools** and _inspect_ the HTML for the Todo list: -http://todomvc.com/examples/vanillajs/ +https://todomvc.com/examples/vanillajs/ ![todomvc-main-section-todo-list-html](https://user-images.githubusercontent.com/194400/43717480-9fb80982-997f-11e8-9ffe-6aa90a89a042.png) @@ -1052,7 +1056,7 @@ Onwards! ### `