From be017e119505f8367e3b93d05ea469ec5af16834 Mon Sep 17 00:00:00 2001
From: Thorsten Kober <tkober@gmail.com>
Date: Fri, 22 Sep 2023 11:17:55 -0400
Subject: [PATCH 1/3] initial commit

---
 index.html                                |   2 +-
 updates/javascript-es5/.gitignore         |   2 +
 updates/javascript-es5/README.md          |  42 ++
 updates/javascript-es5/dist/app.js        |  25 +
 updates/javascript-es5/dist/base.css      | 141 ++++
 updates/javascript-es5/dist/controller.js | 266 ++++++++
 updates/javascript-es5/dist/helpers.js    |  51 ++
 updates/javascript-es5/dist/index.css     | 393 +++++++++++
 updates/javascript-es5/dist/index.html    |  54 ++
 updates/javascript-es5/dist/model.js      | 119 ++++
 updates/javascript-es5/dist/store.js      | 146 ++++
 updates/javascript-es5/dist/template.js   | 111 +++
 updates/javascript-es5/dist/view.js       | 215 ++++++
 updates/javascript-es5/index.html         |  54 ++
 updates/javascript-es5/package-lock.json  | 787 ++++++++++++++++++++++
 updates/javascript-es5/package.json       |  22 +
 updates/javascript-es5/scripts/build.js   |  56 ++
 updates/javascript-es5/src/app.js         |  25 +
 updates/javascript-es5/src/controller.js  | 266 ++++++++
 updates/javascript-es5/src/helpers.js     |  51 ++
 updates/javascript-es5/src/model.js       | 119 ++++
 updates/javascript-es5/src/store.js       | 146 ++++
 updates/javascript-es5/src/template.js    | 111 +++
 updates/javascript-es5/src/view.js        | 215 ++++++
 24 files changed, 3418 insertions(+), 1 deletion(-)
 create mode 100644 updates/javascript-es5/.gitignore
 create mode 100644 updates/javascript-es5/README.md
 create mode 100644 updates/javascript-es5/dist/app.js
 create mode 100644 updates/javascript-es5/dist/base.css
 create mode 100644 updates/javascript-es5/dist/controller.js
 create mode 100644 updates/javascript-es5/dist/helpers.js
 create mode 100644 updates/javascript-es5/dist/index.css
 create mode 100644 updates/javascript-es5/dist/index.html
 create mode 100644 updates/javascript-es5/dist/model.js
 create mode 100644 updates/javascript-es5/dist/store.js
 create mode 100644 updates/javascript-es5/dist/template.js
 create mode 100644 updates/javascript-es5/dist/view.js
 create mode 100644 updates/javascript-es5/index.html
 create mode 100644 updates/javascript-es5/package-lock.json
 create mode 100644 updates/javascript-es5/package.json
 create mode 100644 updates/javascript-es5/scripts/build.js
 create mode 100644 updates/javascript-es5/src/app.js
 create mode 100644 updates/javascript-es5/src/controller.js
 create mode 100644 updates/javascript-es5/src/helpers.js
 create mode 100644 updates/javascript-es5/src/model.js
 create mode 100644 updates/javascript-es5/src/store.js
 create mode 100644 updates/javascript-es5/src/template.js
 create mode 100644 updates/javascript-es5/src/view.js

diff --git a/index.html b/index.html
index 8391059e31..9ea861354a 100644
--- a/index.html
+++ b/index.html
@@ -251,7 +251,7 @@ <h2>Real-time</h2>
 					<h2>Compare these to a non-framework implementation</h2>
 					<ul class="applist">
 						<li class="routing">
-							<a href="examples/vanillajs/" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">Vanilla JS</a>
+							<a href="updates/javascript-es5/dist/" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">JavaScript ES5</a>
 						</li>
 						<li class="routing">
 							<a href="examples/vanilla-es6/" data-source="https://developer.mozilla.org/en/JavaScript" data-content="Just ECMAScript 6 and DOM APIs. Compiled with Google Closure Compiler.">Vanilla ES6</a>
diff --git a/updates/javascript-es5/.gitignore b/updates/javascript-es5/.gitignore
new file mode 100644
index 0000000000..03e05e4c07
--- /dev/null
+++ b/updates/javascript-es5/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules
diff --git a/updates/javascript-es5/README.md b/updates/javascript-es5/README.md
new file mode 100644
index 0000000000..2701ce917a
--- /dev/null
+++ b/updates/javascript-es5/README.md
@@ -0,0 +1,42 @@
+# TodoMVC: JavaScript Es5
+
+## Description
+
+This application uses JavaScript with ES5 language features to implement a todo application.
+
+JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it..
+
+[JavaScript - developer.mozilla.org](http://developer.mozilla.org/en-US/docs/JavaScript)
+
+## Implementation details
+
+This implementation uses an explicit MVC pattern, with a clear file structure to reflect the architecture. The storage solution uses an in-memory data object that implements a simple array to hold the todos.
+
+## Built steps
+
+A simple build script copies all necessary files to a `dist` folder.
+It does not rely on compilers or transpilers and serves raw html, css and js files to the user.
+
+```
+npm run build
+```
+
+## Requirements
+
+The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.
+
+```
+* Node (min version: 18.13.0)
+* NPM (min version: 8.19.3)
+```
+
+## Local preview
+
+```
+terminal:
+1. npm install
+2. npm run dev
+
+browser:
+1. http://localhost:7001/
+```
diff --git a/updates/javascript-es5/dist/app.js b/updates/javascript-es5/dist/app.js
new file mode 100644
index 0000000000..c4bc5924db
--- /dev/null
+++ b/updates/javascript-es5/dist/app.js
@@ -0,0 +1,25 @@
+/* global app, $on */
+(function () {
+    "use strict";
+
+    /**
+     * Sets up a brand new Todo list.
+     *
+     * @param {string} name The name of your new to do list.
+     */
+    function Todo(name) {
+        this.storage = new app.Store(name);
+        this.model = new app.Model(this.storage);
+        this.template = new app.Template();
+        this.view = new app.View(this.template);
+        this.controller = new app.Controller(this.model, this.view);
+    }
+
+    var todo = new Todo("javascript-es5");
+
+    function setView() {
+        todo.controller.setView(document.location.hash);
+    }
+    $on(window, "load", setView);
+    $on(window, "hashchange", setView);
+})();
diff --git a/updates/javascript-es5/dist/base.css b/updates/javascript-es5/dist/base.css
new file mode 100644
index 0000000000..da65968a73
--- /dev/null
+++ b/updates/javascript-es5/dist/base.css
@@ -0,0 +1,141 @@
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#issue-count {
+	display: none;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}
diff --git a/updates/javascript-es5/dist/controller.js b/updates/javascript-es5/dist/controller.js
new file mode 100644
index 0000000000..229b19dde9
--- /dev/null
+++ b/updates/javascript-es5/dist/controller.js
@@ -0,0 +1,266 @@
+(function (window) {
+    "use strict";
+
+    /**
+     * Takes a model and view and acts as the controller between them
+     *
+     * @constructor
+     * @param {object} model The model instance
+     * @param {object} view The view instance
+     */
+    function Controller(model, view) {
+        var self = this;
+        self.model = model;
+        self.view = view;
+
+        self.view.bind("newTodo", function (title) {
+            self.addItem(title);
+        });
+
+        self.view.bind("itemEdit", function (item) {
+            self.editItem(item.id);
+        });
+
+        self.view.bind("itemEditDone", function (item) {
+            self.editItemSave(item.id, item.title);
+        });
+
+        self.view.bind("itemEditCancel", function (item) {
+            self.editItemCancel(item.id);
+        });
+
+        self.view.bind("itemRemove", function (item) {
+            self.removeItem(item.id);
+        });
+
+        self.view.bind("itemToggle", function (item) {
+            self.toggleComplete(item.id, item.completed);
+        });
+
+        self.view.bind("removeCompleted", function () {
+            self.removeCompletedItems();
+        });
+
+        self.view.bind("toggleAll", function (status) {
+            self.toggleAll(status.completed);
+        });
+    }
+
+    /**
+     * Loads and initialises the view
+     *
+     * @param {string} '' | 'active' | 'completed'
+     */
+    Controller.prototype.setView = function (locationHash) {
+        var route = locationHash.split("/")[1];
+        var page = route || "";
+        this._updateFilterState(page);
+    };
+
+    /**
+     * An event to fire on load. Will get all items and display them in the
+     * todo-list
+     */
+    Controller.prototype.showAll = function () {
+        var self = this;
+        self.model.read(function (data) {
+            self.view.render("showEntries", data);
+        });
+    };
+
+    /**
+     * Renders all active tasks
+     */
+    Controller.prototype.showActive = function () {
+        var self = this;
+        self.model.read({ completed: false }, function (data) {
+            self.view.render("showEntries", data);
+        });
+    };
+
+    /**
+     * Renders all completed tasks
+     */
+    Controller.prototype.showCompleted = function () {
+        var self = this;
+        self.model.read({ completed: true }, function (data) {
+            self.view.render("showEntries", data);
+        });
+    };
+
+    /**
+     * An event to fire whenever you want to add an item. Simply pass in the event
+     * object and it'll handle the DOM insertion and saving of the new item.
+     */
+    Controller.prototype.addItem = function (title) {
+        var self = this;
+
+        if (title.trim() === "")
+            return;
+
+        self.model.create(title, function () {
+            self.view.render("clearNewTodo");
+            self._filter(true);
+        });
+    };
+
+    /*
+     * Triggers the item editing mode.
+     */
+    Controller.prototype.editItem = function (id) {
+        var self = this;
+        self.model.read(id, function (data) {
+            self.view.render("editItem", { id: id, title: data[0].title });
+        });
+    };
+
+    /*
+     * Finishes the item editing mode successfully.
+     */
+    Controller.prototype.editItemSave = function (id, title) {
+        var self = this;
+        title = title.trim();
+
+        if (title.length !== 0) {
+            self.model.update(id, { title: title }, function () {
+                self.view.render("editItemDone", { id: id, title: title });
+            });
+        } else {
+            self.removeItem(id);
+        }
+    };
+
+    /*
+     * Cancels the item editing mode.
+     */
+    Controller.prototype.editItemCancel = function (id) {
+        var self = this;
+        self.model.read(id, function (data) {
+            self.view.render("editItemDone", { id: id, title: data[0].title });
+        });
+    };
+
+    /**
+     * By giving it an ID it'll find the DOM element matching that ID,
+     * remove it from the DOM and also remove it from storage.
+     *
+     * @param {number} id The ID of the item to remove from the DOM and
+     * storage
+     */
+    Controller.prototype.removeItem = function (id) {
+        var self = this;
+        self.model.remove(id, function () {
+            self.view.render("removeItem", id);
+        });
+
+        self._filter();
+    };
+
+    /**
+     * Will remove all completed items from the DOM and storage.
+     */
+    Controller.prototype.removeCompletedItems = function () {
+        var self = this;
+        self.model.read({ completed: true }, function (data) {
+            data.forEach(function (item) {
+                self.removeItem(item.id);
+            });
+        });
+
+        self._filter();
+    };
+
+    /**
+     * Give it an ID of a model and a checkbox and it will update the item
+     * in storage based on the checkbox's state.
+     *
+     * @param {number} id The ID of the element to complete or uncomplete
+     * @param {object} checkbox The checkbox to check the state of complete
+     *                          or not
+     * @param {boolean|undefined} silent Prevent re-filtering the todo items
+     */
+    Controller.prototype.toggleComplete = function (id, completed, silent) {
+        var self = this;
+        self.model.update(id, { completed: completed }, function () {
+            self.view.render("elementComplete", {
+                id: id,
+                completed: completed,
+            });
+        });
+
+        if (!silent)
+            self._filter();
+    };
+
+    /**
+     * Will toggle ALL checkboxes' on/off state and completeness of models.
+     * Just pass in the event object.
+     */
+    Controller.prototype.toggleAll = function (completed) {
+        var self = this;
+        self.model.read({ completed: !completed }, function (data) {
+            data.forEach(function (item) {
+                self.toggleComplete(item.id, completed, true);
+            });
+        });
+
+        self._filter();
+    };
+
+    /**
+     * Updates the pieces of the page which change depending on the remaining
+     * number of todos.
+     */
+    Controller.prototype._updateCount = function () {
+        var self = this;
+        self.model.getCount(function (todos) {
+            self.view.render("updateElementCount", todos.active);
+            self.view.render("clearCompletedButton", {
+                completed: todos.completed,
+                visible: todos.completed > 0,
+            });
+
+            self.view.render("toggleAll", { checked: todos.completed === todos.total });
+            self.view.render("contentBlockVisibility", { visible: todos.total > 0 });
+        });
+    };
+
+    /**
+     * Re-filters the todo items, based on the active route.
+     * @param {boolean|undefined} force  forces a re-painting of todo items.
+     */
+    Controller.prototype._filter = function (force) {
+        var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1);
+
+        // Update the elements on the page, which change with each completed todo
+        this._updateCount();
+
+        // If the last active route isn't "All", or we're switching routes, we
+        // re-create the todo item elements, calling:
+        //   this.show[All|Active|Completed]();
+        if (force || this._lastActiveRoute !== "All" || this._lastActiveRoute !== activeRoute)
+            this[`show${activeRoute}`]();
+
+        this._lastActiveRoute = activeRoute;
+    };
+
+    /**
+     * Simply updates the filter nav's selected states
+     */
+    Controller.prototype._updateFilterState = function (currentPage) {
+        // Store a reference to the active route, allowing us to re-filter todo
+        // items as they are marked complete or incomplete.
+        this._activeRoute = currentPage;
+
+        if (currentPage === "")
+            this._activeRoute = "All";
+
+        this._filter();
+
+        this.view.render("setFilter", currentPage);
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.Controller = Controller;
+})(window);
diff --git a/updates/javascript-es5/dist/helpers.js b/updates/javascript-es5/dist/helpers.js
new file mode 100644
index 0000000000..de93a88f2d
--- /dev/null
+++ b/updates/javascript-es5/dist/helpers.js
@@ -0,0 +1,51 @@
+/* global NodeList */
+(function (window) {
+    "use strict";
+
+    // Get element(s) by CSS selector:
+    window.qs = function (selector, scope) {
+        return (scope || document).querySelector(selector);
+    };
+    window.qsa = function (selector, scope) {
+        return (scope || document).querySelectorAll(selector);
+    };
+
+    // addEventListener wrapper:
+    window.$on = function (target, type, callback, useCapture) {
+        target.addEventListener(type, callback, !!useCapture);
+    };
+
+    // Attach a handler to event for all elements that match the selector,
+    // now or in the future, based on a root element
+    window.$delegate = function (target, selector, type, handler) {
+        function dispatchEvent(event) {
+            var targetElement = event.target;
+            var potentialElements = window.qsa(selector, target);
+            var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
+
+            if (hasMatch)
+                handler.call(targetElement, event);
+        }
+
+        // https://developer.mozilla.org/en-US/docs/Web/Events/blur
+        var useCapture = type === "blur" || type === "focus";
+
+        window.$on(target, type, dispatchEvent, useCapture);
+    };
+
+    // Find the element's parent with the given tag name:
+    // $parent(qs('a'), 'div');
+    window.$parent = function (element, tagName) {
+        if (!element.parentNode)
+            return undefined;
+
+        if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase())
+            return element.parentNode;
+
+        return window.$parent(element.parentNode, tagName);
+    };
+
+    // Allow for looping on nodes by chaining:
+    // qsa('.foo').forEach(function () {})
+    NodeList.prototype.forEach = Array.prototype.forEach;
+})(window);
diff --git a/updates/javascript-es5/dist/index.css b/updates/javascript-es5/dist/index.css
new file mode 100644
index 0000000000..fcc3da583a
--- /dev/null
+++ b/updates/javascript-es5/dist/index.css
@@ -0,0 +1,393 @@
+@charset "utf-8";
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #111111;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-weight: 300;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 400;
+	color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 400;
+	color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 400;
+	color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp h1 {
+	position: absolute;
+	top: -140px;
+	width: 100%;
+	font-size: 80px;
+	font-weight: 200;
+	text-align: center;
+	color: #b83f45;
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	height: 65px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+	width: 1px;
+	height: 1px;
+	border: none; /* Mobile Safari */
+	opacity: 0;
+	position: absolute;
+	right: 100%;
+	bottom: 100%;
+}
+
+.toggle-all + label {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 45px;
+	height: 65px;
+	font-size: 0;
+	position: absolute;
+	top: -65px;
+	left: -0;
+}
+
+.toggle-all + label:before {
+	content: '❯';
+	display: inline-block;
+	font-size: 22px;
+	color: #949494;
+	padding: 10px 27px 10px 27px;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+.toggle-all:checked + label:before {
+	color: #484848;
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: calc(100% - 43px);
+	padding: 12px 16px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle {
+	opacity: 0;
+}
+
+.todo-list li .toggle + label {
+	/*
+		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+	*/
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+	background-repeat: no-repeat;
+	background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
+}
+
+.todo-list li label {
+	word-break: break-all;
+	padding: 15px 15px 15px 60px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+	font-weight: 400;
+	color: #484848;
+}
+
+.todo-list li.completed label {
+	color: #949494;
+	text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #949494;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover,
+.todo-list li .destroy:focus {
+	color: #C18585;
+}
+
+.todo-list li .destroy:after {
+	content: '×';
+	display: block;
+	height: 100%;
+	line-height: 1.1;
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+.footer {
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	font-size: 15px;
+	border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.todo-count strong {
+	font-weight: 300;
+}
+
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.filters li a:hover {
+	border-color: #DB7676;
+}
+
+.filters li a.selected {
+	border-color: #CE4646;
+}
+
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 19px;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.clear-completed:hover {
+	text-decoration: underline;
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #4d4d4d;
+	font-size: 11px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+.info p {
+	line-height: 1;
+}
+
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+.info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+
+	.todo-list li .toggle {
+		height: 40px;
+	}
+}
+
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+
+	.filters {
+		bottom: 10px;
+	}
+}
+
+:focus,
+.toggle:focus + label,
+.toggle-all:focus + label {
+	box-shadow: 0 0 2px 2px #CF7D7D;
+	outline: 0;
+}
diff --git a/updates/javascript-es5/dist/index.html b/updates/javascript-es5/dist/index.html
new file mode 100644
index 0000000000..942fce36b2
--- /dev/null
+++ b/updates/javascript-es5/dist/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" data-framework="javascript">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="description" content="A TodoMVC written with JavaScript es5 features." />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>TodoMVC: JavaScript Es5</title>
+        <link rel="stylesheet" href="base.css" />
+        <link rel="stylesheet" href="index.css" />
+    </head>
+    <body>
+        <section class="todoapp">
+            <header class="header">
+                <h1>todos</h1>
+                <input class="new-todo" placeholder="What needs to be done?" autofocus />
+            </header>
+            <main class="main">
+                <div class="toggle-all-container">
+                    <input class="toggle-all" type="checkbox" />
+                    <label class="toggle-all-label" for="toggle-all">Mark all as complete</label>
+                </div>
+                <ul class="todo-list"></ul>
+            </main>
+            <footer class="footer">
+                <span class="todo-count"></span>
+                <ul class="filters">
+                    <li>
+                        <a href="#/" class="selected">All</a>
+                    </li>
+                    <li>
+                        <a href="#/active">Active</a>
+                    </li>
+                    <li>
+                        <a href="#/completed">Completed</a>
+                    </li>
+                </ul>
+                <button class="clear-completed">Clear completed</button>
+            </footer>
+        </section>
+        <footer class="info">
+            <p>Double-click to edit a todo</p>
+			<p>Created by the TodoMVC Team</p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+        </footer>
+        <script src="helpers.js"></script>
+        <script src="store.js"></script>
+        <script src="model.js"></script>
+        <script src="template.js"></script>
+        <script src="view.js"></script>
+        <script src="controller.js"></script>
+        <script src="app.js"></script>
+    </body>
+</html>
diff --git a/updates/javascript-es5/dist/model.js b/updates/javascript-es5/dist/model.js
new file mode 100644
index 0000000000..2268fe8539
--- /dev/null
+++ b/updates/javascript-es5/dist/model.js
@@ -0,0 +1,119 @@
+(function (window) {
+    "use strict";
+
+    /**
+     * Creates a new Model instance and hooks up the storage.
+     *
+     * @constructor
+     * @param {object} storage A reference to the client side storage class
+     */
+    function Model(storage) {
+        this.storage = storage;
+    }
+
+    /**
+     * Creates a new todo model
+     *
+     * @param {string} [title] The title of the task
+     * @param {function} [callback] The callback to fire after the model is created
+     */
+    Model.prototype.create = function (title, callback) {
+        title = title || "";
+        callback = callback || function () {};
+
+        var newItem = {
+            title: title.trim(),
+            completed: false,
+        };
+
+        this.storage.save(newItem, callback);
+    };
+
+    /**
+     * Finds and returns a model in storage. If no query is given it'll simply
+     * return everything. If you pass in a string or number it'll look that up as
+     * the ID of the model to find. Lastly, you can pass it an object to match
+     * against.
+     *
+     * @param {string|number|object} [query] A query to match models against
+     * @param {function} [callback] The callback to fire after the model is found
+     *
+     * @example
+     * model.read(1, func); // Will find the model with an ID of 1
+     * model.read('1'); // Same as above
+     * //Below will find a model with foo equalling bar and hello equalling world.
+     * model.read({ foo: 'bar', hello: 'world' });
+     */
+    Model.prototype.read = function (query, callback) {
+        var queryType = typeof query;
+        callback = callback || function () {};
+
+        if (queryType === "function") {
+            callback = query;
+            return this.storage.findAll(callback);
+        } else if (queryType === "string" || queryType === "number") {
+            query = parseInt(query, 10);
+            return this.storage.find({ id: query }, callback);
+        } else {
+            return this.storage.find(query, callback);
+        }
+    };
+
+    /**
+     * Updates a model by giving it an ID, data to update, and a callback to fire when
+     * the update is complete.
+     *
+     * @param {number} id The id of the model to update
+     * @param {object} data The properties to update and their new value
+     * @param {function} callback The callback to fire when the update is complete.
+     */
+    Model.prototype.update = function (id, data, callback) {
+        this.storage.save(data, callback, id);
+    };
+
+    /**
+     * Removes a model from storage
+     *
+     * @param {number} id The ID of the model to remove
+     * @param {function} callback The callback to fire when the removal is complete.
+     */
+    Model.prototype.remove = function (id, callback) {
+        this.storage.remove(id, callback);
+    };
+
+    /**
+     * WARNING: Will remove ALL data from storage.
+     *
+     * @param {function} callback The callback to fire when the storage is wiped.
+     */
+    Model.prototype.removeAll = function (callback) {
+        this.storage.drop(callback);
+    };
+
+    /**
+     * Returns a count of all todos
+     */
+    Model.prototype.getCount = function (callback) {
+        var todos = {
+            active: 0,
+            completed: 0,
+            total: 0,
+        };
+
+        this.storage.findAll(function (data) {
+            data.forEach(function (todo) {
+                if (todo.completed)
+                    todos.completed++;
+                else
+                    todos.active++;
+
+                todos.total++;
+            });
+            callback(todos);
+        });
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.Model = Model;
+})(window);
diff --git a/updates/javascript-es5/dist/store.js b/updates/javascript-es5/dist/store.js
new file mode 100644
index 0000000000..2493c12aa2
--- /dev/null
+++ b/updates/javascript-es5/dist/store.js
@@ -0,0 +1,146 @@
+/* jshint eqeqeq:false */
+(function (window) {
+    "use strict";
+
+    var MemoryStorage = {};
+    var ID = 1;
+
+    /**
+     * Creates a new client side storage object and will create an empty
+     * collection if no collection already exists.
+     *
+     * @param {string} name The name of our DB we want to use
+     * @param {function} callback Our fake DB uses callbacks because in
+     * real life you probably would be making AJAX calls
+     */
+    function Store(name, callback) {
+        callback = callback || function () {};
+
+        this._dbName = name;
+
+        if (!MemoryStorage[name]) {
+            var data = {
+                todos: [],
+            };
+
+            MemoryStorage[name] = JSON.stringify(data);
+        }
+
+        callback.call(this, JSON.parse(MemoryStorage[name]));
+    }
+
+    /**
+     * Finds items based on a query given as a JS object
+     *
+     * @param {object} query The query to match against (i.e. {foo: 'bar'})
+     * @param {function} callback     The callback to fire when the query has
+     * completed running
+     *
+     * @example
+     * db.find({foo: 'bar', hello: 'world'}, function (data) {
+     *     // data will return any items that have foo: bar and
+     *     // hello: world in their properties
+     * });
+     */
+    Store.prototype.find = function (query, callback) {
+        if (!callback)
+            return;
+
+        var todos = JSON.parse(MemoryStorage[this._dbName]).todos;
+
+        callback.call(
+            this,
+            todos.filter(function (todo) {
+                for (var q in query) {
+                    if (query[q] !== todo[q])
+                        return false;
+                }
+
+                return true;
+            })
+        );
+    };
+
+    /**
+     * Will retrieve all data from the collection
+     *
+     * @param {function} callback The callback to fire upon retrieving data
+     */
+    Store.prototype.findAll = function (callback) {
+        callback = callback || function () {};
+        callback.call(this, JSON.parse(MemoryStorage[this._dbName]).todos);
+    };
+
+    /**
+     * Will save the given data to the DB. If no item exists it will create a new
+     * item, otherwise it'll simply update an existing item's properties
+     *
+     * @param {object} updateData The data to save back into the DB
+     * @param {function} callback The callback to fire after saving
+     * @param {number} id An optional param to enter an ID of an item to update
+     */
+    Store.prototype.save = function (updateData, callback, id) {
+        var data = JSON.parse(MemoryStorage[this._dbName]);
+        var todos = data.todos;
+
+        callback = callback || function () {};
+
+        // If an ID was actually given, find the item and update each property
+        if (id) {
+            for (var i = 0; i < todos.length; i++) {
+                if (todos[i].id === id) {
+                    for (var key in updateData)
+                        todos[i][key] = updateData[key];
+
+                    break;
+                }
+            }
+
+            MemoryStorage[this._dbName] = JSON.stringify(data);
+            callback.call(this, todos);
+        } else {
+            // Generate an ID
+            updateData.id = ID++;
+
+            todos.push(updateData);
+            MemoryStorage[this._dbName] = JSON.stringify(data);
+            callback.call(this, [updateData]);
+        }
+    };
+
+    /**
+     * Will remove an item from the Store based on its ID
+     *
+     * @param {number} id The ID of the item you want to remove
+     * @param {function} callback The callback to fire after saving
+     */
+    Store.prototype.remove = function (id, callback) {
+        var data = JSON.parse(MemoryStorage[this._dbName]);
+        var todos = data.todos;
+
+        for (var i = 0; i < todos.length; i++) {
+            if (todos[i].id === id) {
+                todos.splice(i, 1);
+                break;
+            }
+        }
+
+        MemoryStorage[this._dbName] = JSON.stringify(data);
+        callback.call(this, todos);
+    };
+
+    /**
+     * Will drop all storage and start fresh
+     *
+     * @param {function} callback The callback to fire after dropping the data
+     */
+    Store.prototype.drop = function (callback) {
+        var data = { todos: [] };
+        MemoryStorage[this._dbName] = JSON.stringify(data);
+        callback.call(this, data.todos);
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.Store = Store;
+})(window);
diff --git a/updates/javascript-es5/dist/template.js b/updates/javascript-es5/dist/template.js
new file mode 100644
index 0000000000..fca160f3ba
--- /dev/null
+++ b/updates/javascript-es5/dist/template.js
@@ -0,0 +1,111 @@
+/* jshint laxbreak:true */
+(function (window) {
+    "use strict";
+
+    var htmlEscapes = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#x27;",
+        "`": "&#x60;",
+    };
+
+    var escapeHtmlChar = function (chr) {
+        return htmlEscapes[chr];
+    };
+
+    var reUnescapedHtml = /[&<>"'`]/g;
+    var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source);
+
+    var escape = function (string) {
+        return string && reHasUnescapedHtml.test(string) ? string.replace(reUnescapedHtml, escapeHtmlChar) : string;
+    };
+
+    /**
+     * Sets up defaults for all the Template methods such as a default template
+     *
+     * @constructor
+     */
+    function Template() {
+        this.defaultTemplate
+            = '<li data-id="{{id}}" class="{{completed}}">'
+            + '<div class="view">'
+            + '<input class="toggle" type="checkbox" {{checked}}>'
+            + "<label>{{title}}</label>"
+            + '<button class="destroy"></button>'
+            + "</div>"
+            + "</li>";
+    }
+
+    /**
+     * Creates an <li> HTML string and returns it for placement in your app.
+     *
+     * NOTE: In real life you should be using a templating engine such as Mustache
+     * or Handlebars, however, this is a vanilla JS example.
+     *
+     * @param {object} data The object containing keys you want to find in the
+     *                      template to replace.
+     * @returns {string} HTML String of an <li> element
+     *
+     * @example
+     * view.show({
+     *    id: 1,
+     *    title: "Hello World",
+     *    completed: 0,
+     * });
+     */
+    Template.prototype.show = function (data) {
+        var i, l;
+        var view = "";
+
+        for (i = 0, l = data.length; i < l; i++) {
+            var template = this.defaultTemplate;
+            var completed = "";
+            var checked = "";
+
+            if (data[i].completed) {
+                completed = "completed";
+                checked = "checked";
+            }
+
+            template = template.replace("{{id}}", data[i].id);
+            template = template.replace("{{title}}", escape(data[i].title));
+            template = template.replace("{{completed}}", completed);
+            template = template.replace("{{checked}}", checked);
+
+            view = view + template;
+        }
+
+        return view;
+    };
+
+    /**
+     * Displays a counter of how many to dos are left to complete
+     *
+     * @param {number} activeTodos The number of active todos.
+     * @returns {string} String containing the count
+     */
+    Template.prototype.itemCounter = function (activeTodos) {
+        var plural = activeTodos === 1 ? "" : "s";
+
+        return `<strong>${activeTodos}</strong> item${plural} left`;
+    };
+
+    /**
+     * Updates the text within the "Clear completed" button
+     *
+     * @param  {[type]} completedTodos The number of completed todos.
+     * @returns {string} String containing the count
+     */
+    Template.prototype.clearCompletedButton = function (completedTodos) {
+        if (completedTodos > 0)
+            return "Clear completed";
+        else
+            return "";
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.Template = Template;
+})(window);
diff --git a/updates/javascript-es5/dist/view.js b/updates/javascript-es5/dist/view.js
new file mode 100644
index 0000000000..b34323332f
--- /dev/null
+++ b/updates/javascript-es5/dist/view.js
@@ -0,0 +1,215 @@
+/* global qs, qsa, $on, $parent, $delegate */
+
+(function (window) {
+    "use strict";
+
+    /**
+     * View that abstracts away the browser's DOM completely.
+     * It has two simple entry points:
+     *
+     *   - bind(eventName, handler)
+     *     Takes a todo application event and registers the handler
+     *   - render(command, parameterObject)
+     *     Renders the given command with the options
+     */
+    function View(template) {
+        this.template = template;
+
+        this.ENTER_KEY = 13;
+        this.ESCAPE_KEY = 27;
+
+        this.$todoList = qs(".todo-list");
+        this.$todoItemCounter = qs(".todo-count");
+        this.$clearCompleted = qs(".clear-completed");
+        this.$main = qs(".main");
+        this.$footer = qs(".footer");
+        this.$toggleAllInput = qs(".toggle-all");
+        this.$toggleAll = qs(".toggle-all-label");
+        this.$newTodo = qs(".new-todo");
+    }
+
+    View.prototype._removeItem = function (id) {
+        var elem = qs(`[data-id="${id}"]`);
+
+        if (elem)
+            this.$todoList.removeChild(elem);
+    };
+
+    View.prototype._clearCompletedButton = function (completedCount, visible) {
+        this.$clearCompleted.textContent = this.template.clearCompletedButton(completedCount);
+        this.$clearCompleted.style.display = visible ? "block" : "none";
+    };
+
+    View.prototype._setFilter = function (currentPage) {
+        qs(".filters .selected").className = "";
+        qs(`.filters [href="#/${currentPage}"]`).className = "selected";
+    };
+
+    View.prototype._elementComplete = function (id, completed) {
+        var listItem = qs(`[data-id="${id}"]`);
+
+        if (!listItem)
+            return;
+
+        listItem.className = completed ? "completed" : "";
+
+        // In case it was toggled from an event and not by clicking the checkbox
+        qs("input", listItem).checked = completed;
+    };
+
+    View.prototype._editItem = function (id, title) {
+        var listItem = qs(`[data-id="${id}"]`);
+
+        if (!listItem)
+            return;
+
+        listItem.className = `${listItem.className} editing`;
+
+        var input = document.createElement("input");
+        input.className = "edit";
+
+        listItem.appendChild(input);
+        input.focus();
+        input.value = title;
+    };
+
+    View.prototype._editItemDone = function (id, title) {
+        var listItem = qs(`[data-id="${id}"]`);
+
+        if (!listItem)
+            return;
+
+        var input = qs("input.edit", listItem);
+        listItem.removeChild(input);
+
+        listItem.className = listItem.className.replace("editing", "");
+
+        qsa("label", listItem).forEach(function (label) {
+            label.textContent = title;
+        });
+    };
+
+    View.prototype._replaceContentWithHtml = function (element, html) {
+        const parsedDocument = new DOMParser().parseFromString(html, "text/html");
+        element.replaceChildren(...parsedDocument.body.childNodes);
+    };
+
+    View.prototype.render = function (viewCmd, parameter) {
+        var self = this;
+        var viewCommands = {
+            showEntries: function () {
+                self._replaceContentWithHtml(self.$todoList, self.template.show(parameter));
+            },
+            removeItem: function () {
+                self._removeItem(parameter);
+            },
+            updateElementCount: function () {
+                self._replaceContentWithHtml(self.$todoItemCounter, self.template.itemCounter(parameter));
+            },
+            clearCompletedButton: function () {
+                self._clearCompletedButton(parameter.completed, parameter.visible);
+            },
+            contentBlockVisibility: function () {
+                self.$main.style.display = self.$footer.style.display = parameter.visible ? "block" : "none";
+            },
+            toggleAll: function () {
+                self.$toggleAll.checked = parameter.checked;
+            },
+            setFilter: function () {
+                self._setFilter(parameter);
+            },
+            clearNewTodo: function () {
+                self.$newTodo.value = "";
+            },
+            elementComplete: function () {
+                self._elementComplete(parameter.id, parameter.completed);
+            },
+            editItem: function () {
+                self._editItem(parameter.id, parameter.title);
+            },
+            editItemDone: function () {
+                self._editItemDone(parameter.id, parameter.title);
+            },
+        };
+
+        viewCommands[viewCmd]();
+    };
+
+    View.prototype._itemId = function (element) {
+        var li = $parent(element, "li");
+        return parseInt(li.dataset.id, 10);
+    };
+
+    View.prototype._bindItemEditDone = function (handler) {
+        var self = this;
+        $delegate(self.$todoList, "li .edit", "blur", function () {
+            if (!this.dataset.iscanceled) {
+                handler({
+                    id: self._itemId(this),
+                    title: this.value,
+                });
+            }
+        });
+
+        $delegate(self.$todoList, "li .edit", "keypress", function (event) {
+            if (event.keyCode === self.ENTER_KEY) {
+                // Remove the cursor from the input when you hit enter just like if it
+                // were a real form
+                this.blur();
+            }
+        });
+    };
+
+    View.prototype._bindItemEditCancel = function (handler) {
+        var self = this;
+        $delegate(self.$todoList, "li .edit", "keyup", function (event) {
+            if (event.keyCode === self.ESCAPE_KEY) {
+                this.dataset.iscanceled = true;
+                this.blur();
+
+                handler({ id: self._itemId(this) });
+            }
+        });
+    };
+
+    View.prototype.bind = function (event, handler) {
+        var self = this;
+        if (event === "newTodo") {
+            $on(self.$newTodo, "change", function () {
+                handler(self.$newTodo.value);
+            });
+        } else if (event === "removeCompleted") {
+            $on(self.$clearCompleted, "click", function () {
+                handler();
+            });
+        } else if (event === "toggleAll") {
+            $on(self.$toggleAll, "click", function () {
+                self.$toggleAllInput.click();
+                handler({ completed: self.$toggleAllInput.checked });
+            });
+        } else if (event === "itemEdit") {
+            $delegate(self.$todoList, "li label", "dblclick", function () {
+                handler({ id: self._itemId(this) });
+            });
+        } else if (event === "itemRemove") {
+            $delegate(self.$todoList, ".destroy", "click", function () {
+                handler({ id: self._itemId(this) });
+            });
+        } else if (event === "itemToggle") {
+            $delegate(self.$todoList, ".toggle", "click", function () {
+                handler({
+                    id: self._itemId(this),
+                    completed: this.checked,
+                });
+            });
+        } else if (event === "itemEditDone") {
+            self._bindItemEditDone(handler);
+        } else if (event === "itemEditCancel") {
+            self._bindItemEditCancel(handler);
+        }
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.View = View;
+})(window);
diff --git a/updates/javascript-es5/index.html b/updates/javascript-es5/index.html
new file mode 100644
index 0000000000..088aebabc0
--- /dev/null
+++ b/updates/javascript-es5/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" data-framework="javascript">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="description" content="A TodoMVC written with JavaScript es5 features." />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>TodoMVC: JavaScript Es5</title>
+        <link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
+        <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css" />
+    </head>
+    <body>
+        <section class="todoapp">
+            <header class="header">
+                <h1>todos</h1>
+                <input class="new-todo" placeholder="What needs to be done?" autofocus />
+            </header>
+            <main class="main">
+                <div class="toggle-all-container">
+                    <input class="toggle-all" type="checkbox" />
+                    <label class="toggle-all-label" for="toggle-all">Mark all as complete</label>
+                </div>
+                <ul class="todo-list"></ul>
+            </main>
+            <footer class="footer">
+                <span class="todo-count"></span>
+                <ul class="filters">
+                    <li>
+                        <a href="#/" class="selected">All</a>
+                    </li>
+                    <li>
+                        <a href="#/active">Active</a>
+                    </li>
+                    <li>
+                        <a href="#/completed">Completed</a>
+                    </li>
+                </ul>
+                <button class="clear-completed">Clear completed</button>
+            </footer>
+        </section>
+        <footer class="info">
+            <p>Double-click to edit a todo</p>
+			<p>Created by the TodoMVC Team</p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+        </footer>
+        <script src="src/helpers.js"></script>
+        <script src="src/store.js"></script>
+        <script src="src/model.js"></script>
+        <script src="src/template.js"></script>
+        <script src="src/view.js"></script>
+        <script src="src/controller.js"></script>
+        <script src="src/app.js"></script>
+    </body>
+</html>
diff --git a/updates/javascript-es5/package-lock.json b/updates/javascript-es5/package-lock.json
new file mode 100644
index 0000000000..3794b03322
--- /dev/null
+++ b/updates/javascript-es5/package-lock.json
@@ -0,0 +1,787 @@
+{
+    "name": "todomvc-javascript-es5",
+    "version": "1.0.0",
+    "lockfileVersion": 2,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "todomvc-javascript-es5",
+            "version": "1.0.0",
+            "dependencies": {
+                "todomvc-app-css": "^2.4.2",
+                "todomvc-common": "^1.0.5"
+            },
+            "devDependencies": {
+                "http-server": "^14.1.1"
+            },
+            "engines": {
+                "node": ">=18.13.0",
+                "npm": ">=8.19.3"
+            }
+        },
+        "node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/async": {
+            "version": "2.6.4",
+            "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+            "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+            "dev": true,
+            "dependencies": {
+                "lodash": "^4.17.14"
+            }
+        },
+        "node_modules/basic-auth": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+            "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+            "dev": true,
+            "dependencies": {
+                "safe-buffer": "5.1.2"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/call-bind": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+            "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+            "dev": true,
+            "dependencies": {
+                "function-bind": "^1.1.1",
+                "get-intrinsic": "^1.0.2"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dev": true,
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dev": true,
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true
+        },
+        "node_modules/corser": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+            "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.4.0"
+            }
+        },
+        "node_modules/debug": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "dev": true,
+            "dependencies": {
+                "ms": "^2.1.1"
+            }
+        },
+        "node_modules/eventemitter3": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+            "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+            "dev": true
+        },
+        "node_modules/follow-redirects": {
+            "version": "1.15.2",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+            "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/RubenVerborgh"
+                }
+            ],
+            "engines": {
+                "node": ">=4.0"
+            },
+            "peerDependenciesMeta": {
+                "debug": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/function-bind": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+            "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+            "dev": true
+        },
+        "node_modules/get-intrinsic": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+            "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+            "dev": true,
+            "dependencies": {
+                "function-bind": "^1.1.1",
+                "has": "^1.0.3",
+                "has-symbols": "^1.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+            "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+            "dev": true,
+            "dependencies": {
+                "function-bind": "^1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.4.0"
+            }
+        },
+        "node_modules/has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/has-symbols": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+            "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/he": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+            "dev": true,
+            "bin": {
+                "he": "bin/he"
+            }
+        },
+        "node_modules/html-encoding-sniffer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+            "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+            "dev": true,
+            "dependencies": {
+                "whatwg-encoding": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/http-proxy": {
+            "version": "1.18.1",
+            "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+            "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+            "dev": true,
+            "dependencies": {
+                "eventemitter3": "^4.0.0",
+                "follow-redirects": "^1.0.0",
+                "requires-port": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/http-server": {
+            "version": "14.1.1",
+            "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+            "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+            "dev": true,
+            "dependencies": {
+                "basic-auth": "^2.0.1",
+                "chalk": "^4.1.2",
+                "corser": "^2.0.1",
+                "he": "^1.2.0",
+                "html-encoding-sniffer": "^3.0.0",
+                "http-proxy": "^1.18.1",
+                "mime": "^1.6.0",
+                "minimist": "^1.2.6",
+                "opener": "^1.5.1",
+                "portfinder": "^1.0.28",
+                "secure-compare": "3.0.1",
+                "union": "~0.5.0",
+                "url-join": "^4.0.1"
+            },
+            "bin": {
+                "http-server": "bin/http-server"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "dev": true,
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "dev": true
+        },
+        "node_modules/mime": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+            "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+            "dev": true,
+            "bin": {
+                "mime": "cli.js"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/minimist": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+            "dev": true,
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/mkdirp": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+            "dev": true,
+            "dependencies": {
+                "minimist": "^1.2.6"
+            },
+            "bin": {
+                "mkdirp": "bin/cmd.js"
+            }
+        },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "dev": true
+        },
+        "node_modules/object-inspect": {
+            "version": "1.12.3",
+            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+            "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+            "dev": true,
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/opener": {
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+            "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+            "dev": true,
+            "bin": {
+                "opener": "bin/opener-bin.js"
+            }
+        },
+        "node_modules/portfinder": {
+            "version": "1.0.32",
+            "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+            "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+            "dev": true,
+            "dependencies": {
+                "async": "^2.6.4",
+                "debug": "^3.2.7",
+                "mkdirp": "^0.5.6"
+            },
+            "engines": {
+                "node": ">= 0.12.0"
+            }
+        },
+        "node_modules/qs": {
+            "version": "6.11.0",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+            "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+            "dev": true,
+            "dependencies": {
+                "side-channel": "^1.0.4"
+            },
+            "engines": {
+                "node": ">=0.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/requires-port": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+            "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+            "dev": true
+        },
+        "node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+            "dev": true
+        },
+        "node_modules/safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+            "dev": true
+        },
+        "node_modules/secure-compare": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+            "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+            "dev": true
+        },
+        "node_modules/side-channel": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+            "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+            "dev": true,
+            "dependencies": {
+                "call-bind": "^1.0.0",
+                "get-intrinsic": "^1.0.2",
+                "object-inspect": "^1.9.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/todomvc-app-css": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.4.2.tgz",
+            "integrity": "sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg=="
+        },
+        "node_modules/todomvc-common": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/todomvc-common/-/todomvc-common-1.0.5.tgz",
+            "integrity": "sha512-D8kEJmxVMQIWwztEdH+WeiAfXRbbSCpgXq4NkYi+gduJ2tr8CNq7sYLfJvjpQ10KD9QxJwig57rvMbV2QAESwQ=="
+        },
+        "node_modules/union": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+            "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+            "dev": true,
+            "dependencies": {
+                "qs": "^6.4.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/url-join": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+            "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+            "dev": true
+        },
+        "node_modules/whatwg-encoding": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+            "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+            "dev": true,
+            "dependencies": {
+                "iconv-lite": "0.6.3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        }
+    },
+    "dependencies": {
+        "ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
+            "requires": {
+                "color-convert": "^2.0.1"
+            }
+        },
+        "async": {
+            "version": "2.6.4",
+            "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+            "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+            "dev": true,
+            "requires": {
+                "lodash": "^4.17.14"
+            }
+        },
+        "basic-auth": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+            "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+            "dev": true,
+            "requires": {
+                "safe-buffer": "5.1.2"
+            }
+        },
+        "call-bind": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+            "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+            "dev": true,
+            "requires": {
+                "function-bind": "^1.1.1",
+                "get-intrinsic": "^1.0.2"
+            }
+        },
+        "chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dev": true,
+            "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            }
+        },
+        "color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dev": true,
+            "requires": {
+                "color-name": "~1.1.4"
+            }
+        },
+        "color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true
+        },
+        "corser": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+            "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+            "dev": true
+        },
+        "debug": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "dev": true,
+            "requires": {
+                "ms": "^2.1.1"
+            }
+        },
+        "eventemitter3": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+            "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+            "dev": true
+        },
+        "follow-redirects": {
+            "version": "1.15.2",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+            "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+            "dev": true
+        },
+        "function-bind": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+            "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+            "dev": true
+        },
+        "get-intrinsic": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+            "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+            "dev": true,
+            "requires": {
+                "function-bind": "^1.1.1",
+                "has": "^1.0.3",
+                "has-symbols": "^1.0.3"
+            }
+        },
+        "has": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+            "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+            "dev": true,
+            "requires": {
+                "function-bind": "^1.1.1"
+            }
+        },
+        "has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "dev": true
+        },
+        "has-symbols": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+            "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+            "dev": true
+        },
+        "he": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+            "dev": true
+        },
+        "html-encoding-sniffer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+            "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+            "dev": true,
+            "requires": {
+                "whatwg-encoding": "^2.0.0"
+            }
+        },
+        "http-proxy": {
+            "version": "1.18.1",
+            "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+            "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+            "dev": true,
+            "requires": {
+                "eventemitter3": "^4.0.0",
+                "follow-redirects": "^1.0.0",
+                "requires-port": "^1.0.0"
+            }
+        },
+        "http-server": {
+            "version": "14.1.1",
+            "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+            "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+            "dev": true,
+            "requires": {
+                "basic-auth": "^2.0.1",
+                "chalk": "^4.1.2",
+                "corser": "^2.0.1",
+                "he": "^1.2.0",
+                "html-encoding-sniffer": "^3.0.0",
+                "http-proxy": "^1.18.1",
+                "mime": "^1.6.0",
+                "minimist": "^1.2.6",
+                "opener": "^1.5.1",
+                "portfinder": "^1.0.28",
+                "secure-compare": "3.0.1",
+                "union": "~0.5.0",
+                "url-join": "^4.0.1"
+            }
+        },
+        "iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "dev": true,
+            "requires": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            }
+        },
+        "lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "dev": true
+        },
+        "mime": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+            "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+            "dev": true
+        },
+        "minimist": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+            "dev": true
+        },
+        "mkdirp": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+            "dev": true,
+            "requires": {
+                "minimist": "^1.2.6"
+            }
+        },
+        "ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "dev": true
+        },
+        "object-inspect": {
+            "version": "1.12.3",
+            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+            "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+            "dev": true
+        },
+        "opener": {
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+            "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+            "dev": true
+        },
+        "portfinder": {
+            "version": "1.0.32",
+            "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+            "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+            "dev": true,
+            "requires": {
+                "async": "^2.6.4",
+                "debug": "^3.2.7",
+                "mkdirp": "^0.5.6"
+            }
+        },
+        "qs": {
+            "version": "6.11.0",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+            "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+            "dev": true,
+            "requires": {
+                "side-channel": "^1.0.4"
+            }
+        },
+        "requires-port": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+            "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+            "dev": true
+        },
+        "safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+            "dev": true
+        },
+        "safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+            "dev": true
+        },
+        "secure-compare": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+            "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+            "dev": true
+        },
+        "side-channel": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+            "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+            "dev": true,
+            "requires": {
+                "call-bind": "^1.0.0",
+                "get-intrinsic": "^1.0.2",
+                "object-inspect": "^1.9.0"
+            }
+        },
+        "supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
+            "requires": {
+                "has-flag": "^4.0.0"
+            }
+        },
+        "todomvc-app-css": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.4.2.tgz",
+            "integrity": "sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg=="
+        },
+        "todomvc-common": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/todomvc-common/-/todomvc-common-1.0.5.tgz",
+            "integrity": "sha512-D8kEJmxVMQIWwztEdH+WeiAfXRbbSCpgXq4NkYi+gduJ2tr8CNq7sYLfJvjpQ10KD9QxJwig57rvMbV2QAESwQ=="
+        },
+        "union": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+            "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+            "dev": true,
+            "requires": {
+                "qs": "^6.4.0"
+            }
+        },
+        "url-join": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+            "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+            "dev": true
+        },
+        "whatwg-encoding": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+            "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+            "dev": true,
+            "requires": {
+                "iconv-lite": "0.6.3"
+            }
+        }
+    }
+}
diff --git a/updates/javascript-es5/package.json b/updates/javascript-es5/package.json
new file mode 100644
index 0000000000..ac516bdb93
--- /dev/null
+++ b/updates/javascript-es5/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "todomvc-javascript-es5",
+    "version": "1.0.0",
+    "description": "A TodoMVC written with JavaScript es5 features.",
+    "engines": {
+        "node": ">=18.13.0",
+        "npm": ">=8.19.3"
+    },
+    "private": true,
+    "scripts": {
+        "dev": "http-server ./ -p 7001 -c-1 --cors",
+        "build": "node scripts/build.js",
+        "serve": "http-server ./dist -p 7002 -c-1 --cors"
+    },
+    "dependencies": {
+        "todomvc-app-css": "^2.4.2",
+        "todomvc-common": "^1.0.5"
+    },
+    "devDependencies": {
+        "http-server": "^14.1.1"
+    }
+}
diff --git a/updates/javascript-es5/scripts/build.js b/updates/javascript-es5/scripts/build.js
new file mode 100644
index 0000000000..046de0e7ed
--- /dev/null
+++ b/updates/javascript-es5/scripts/build.js
@@ -0,0 +1,56 @@
+const fs = require("fs").promises;
+const path = require("path");
+
+const rootDirectory = "./";
+const sourceDirectory = "./src";
+const targetDirectory = "./dist";
+
+const htmlFile = "index.html";
+
+const filesToMove = ["node_modules/todomvc-common/base.css", "node_modules/todomvc-app-css/index.css"];
+
+const copy = async (src, dest) => {
+    await fs.copyFile(src, dest);
+};
+
+const build = async () => {
+    // remove dist directory if it exists
+    await fs.rm(targetDirectory, { recursive: true, force: true });
+
+    // re-create the directory.
+    await fs.mkdir(targetDirectory);
+
+    // copy src folder
+    await fs.cp(sourceDirectory, targetDirectory, { recursive: true }, (err) => {
+        if (err)
+            console.error(err);
+    });
+
+    // copy html file
+    await fs.copyFile(path.join(rootDirectory, htmlFile), path.join(targetDirectory, htmlFile));
+
+    // copy files to move
+    for (let i = 0; i < filesToMove.length; i++)
+        await copy(filesToMove[i], path.join(targetDirectory, path.basename(filesToMove[i])));
+
+    // read html file
+    let html = await fs.readFile(path.join(targetDirectory, htmlFile), "utf8");
+
+    // remove base paths from files to move
+    for (let i = 0; i < filesToMove.length; i++) {
+        const basePath = `${filesToMove[i].split("/").slice(0, -1).join("/")}/`;
+        html = html.replace(basePath, "");
+    }
+
+    // remove basePath from source directory
+    const basePath = `${path.basename(sourceDirectory)}/`;
+    const re = new RegExp(basePath, "g");
+    html = html.replace(re, "");
+
+    // write html files
+    await fs.writeFile(`${targetDirectory}/${htmlFile}`, html);
+
+    console.log("done!!");
+};
+
+build();
diff --git a/updates/javascript-es5/src/app.js b/updates/javascript-es5/src/app.js
new file mode 100644
index 0000000000..c4bc5924db
--- /dev/null
+++ b/updates/javascript-es5/src/app.js
@@ -0,0 +1,25 @@
+/* global app, $on */
+(function () {
+    "use strict";
+
+    /**
+     * Sets up a brand new Todo list.
+     *
+     * @param {string} name The name of your new to do list.
+     */
+    function Todo(name) {
+        this.storage = new app.Store(name);
+        this.model = new app.Model(this.storage);
+        this.template = new app.Template();
+        this.view = new app.View(this.template);
+        this.controller = new app.Controller(this.model, this.view);
+    }
+
+    var todo = new Todo("javascript-es5");
+
+    function setView() {
+        todo.controller.setView(document.location.hash);
+    }
+    $on(window, "load", setView);
+    $on(window, "hashchange", setView);
+})();
diff --git a/updates/javascript-es5/src/controller.js b/updates/javascript-es5/src/controller.js
new file mode 100644
index 0000000000..229b19dde9
--- /dev/null
+++ b/updates/javascript-es5/src/controller.js
@@ -0,0 +1,266 @@
+(function (window) {
+    "use strict";
+
+    /**
+     * Takes a model and view and acts as the controller between them
+     *
+     * @constructor
+     * @param {object} model The model instance
+     * @param {object} view The view instance
+     */
+    function Controller(model, view) {
+        var self = this;
+        self.model = model;
+        self.view = view;
+
+        self.view.bind("newTodo", function (title) {
+            self.addItem(title);
+        });
+
+        self.view.bind("itemEdit", function (item) {
+            self.editItem(item.id);
+        });
+
+        self.view.bind("itemEditDone", function (item) {
+            self.editItemSave(item.id, item.title);
+        });
+
+        self.view.bind("itemEditCancel", function (item) {
+            self.editItemCancel(item.id);
+        });
+
+        self.view.bind("itemRemove", function (item) {
+            self.removeItem(item.id);
+        });
+
+        self.view.bind("itemToggle", function (item) {
+            self.toggleComplete(item.id, item.completed);
+        });
+
+        self.view.bind("removeCompleted", function () {
+            self.removeCompletedItems();
+        });
+
+        self.view.bind("toggleAll", function (status) {
+            self.toggleAll(status.completed);
+        });
+    }
+
+    /**
+     * Loads and initialises the view
+     *
+     * @param {string} '' | 'active' | 'completed'
+     */
+    Controller.prototype.setView = function (locationHash) {
+        var route = locationHash.split("/")[1];
+        var page = route || "";
+        this._updateFilterState(page);
+    };
+
+    /**
+     * An event to fire on load. Will get all items and display them in the
+     * todo-list
+     */
+    Controller.prototype.showAll = function () {
+        var self = this;
+        self.model.read(function (data) {
+            self.view.render("showEntries", data);
+        });
+    };
+
+    /**
+     * Renders all active tasks
+     */
+    Controller.prototype.showActive = function () {
+        var self = this;
+        self.model.read({ completed: false }, function (data) {
+            self.view.render("showEntries", data);
+        });
+    };
+
+    /**
+     * Renders all completed tasks
+     */
+    Controller.prototype.showCompleted = function () {
+        var self = this;
+        self.model.read({ completed: true }, function (data) {
+            self.view.render("showEntries", data);
+        });
+    };
+
+    /**
+     * An event to fire whenever you want to add an item. Simply pass in the event
+     * object and it'll handle the DOM insertion and saving of the new item.
+     */
+    Controller.prototype.addItem = function (title) {
+        var self = this;
+
+        if (title.trim() === "")
+            return;
+
+        self.model.create(title, function () {
+            self.view.render("clearNewTodo");
+            self._filter(true);
+        });
+    };
+
+    /*
+     * Triggers the item editing mode.
+     */
+    Controller.prototype.editItem = function (id) {
+        var self = this;
+        self.model.read(id, function (data) {
+            self.view.render("editItem", { id: id, title: data[0].title });
+        });
+    };
+
+    /*
+     * Finishes the item editing mode successfully.
+     */
+    Controller.prototype.editItemSave = function (id, title) {
+        var self = this;
+        title = title.trim();
+
+        if (title.length !== 0) {
+            self.model.update(id, { title: title }, function () {
+                self.view.render("editItemDone", { id: id, title: title });
+            });
+        } else {
+            self.removeItem(id);
+        }
+    };
+
+    /*
+     * Cancels the item editing mode.
+     */
+    Controller.prototype.editItemCancel = function (id) {
+        var self = this;
+        self.model.read(id, function (data) {
+            self.view.render("editItemDone", { id: id, title: data[0].title });
+        });
+    };
+
+    /**
+     * By giving it an ID it'll find the DOM element matching that ID,
+     * remove it from the DOM and also remove it from storage.
+     *
+     * @param {number} id The ID of the item to remove from the DOM and
+     * storage
+     */
+    Controller.prototype.removeItem = function (id) {
+        var self = this;
+        self.model.remove(id, function () {
+            self.view.render("removeItem", id);
+        });
+
+        self._filter();
+    };
+
+    /**
+     * Will remove all completed items from the DOM and storage.
+     */
+    Controller.prototype.removeCompletedItems = function () {
+        var self = this;
+        self.model.read({ completed: true }, function (data) {
+            data.forEach(function (item) {
+                self.removeItem(item.id);
+            });
+        });
+
+        self._filter();
+    };
+
+    /**
+     * Give it an ID of a model and a checkbox and it will update the item
+     * in storage based on the checkbox's state.
+     *
+     * @param {number} id The ID of the element to complete or uncomplete
+     * @param {object} checkbox The checkbox to check the state of complete
+     *                          or not
+     * @param {boolean|undefined} silent Prevent re-filtering the todo items
+     */
+    Controller.prototype.toggleComplete = function (id, completed, silent) {
+        var self = this;
+        self.model.update(id, { completed: completed }, function () {
+            self.view.render("elementComplete", {
+                id: id,
+                completed: completed,
+            });
+        });
+
+        if (!silent)
+            self._filter();
+    };
+
+    /**
+     * Will toggle ALL checkboxes' on/off state and completeness of models.
+     * Just pass in the event object.
+     */
+    Controller.prototype.toggleAll = function (completed) {
+        var self = this;
+        self.model.read({ completed: !completed }, function (data) {
+            data.forEach(function (item) {
+                self.toggleComplete(item.id, completed, true);
+            });
+        });
+
+        self._filter();
+    };
+
+    /**
+     * Updates the pieces of the page which change depending on the remaining
+     * number of todos.
+     */
+    Controller.prototype._updateCount = function () {
+        var self = this;
+        self.model.getCount(function (todos) {
+            self.view.render("updateElementCount", todos.active);
+            self.view.render("clearCompletedButton", {
+                completed: todos.completed,
+                visible: todos.completed > 0,
+            });
+
+            self.view.render("toggleAll", { checked: todos.completed === todos.total });
+            self.view.render("contentBlockVisibility", { visible: todos.total > 0 });
+        });
+    };
+
+    /**
+     * Re-filters the todo items, based on the active route.
+     * @param {boolean|undefined} force  forces a re-painting of todo items.
+     */
+    Controller.prototype._filter = function (force) {
+        var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1);
+
+        // Update the elements on the page, which change with each completed todo
+        this._updateCount();
+
+        // If the last active route isn't "All", or we're switching routes, we
+        // re-create the todo item elements, calling:
+        //   this.show[All|Active|Completed]();
+        if (force || this._lastActiveRoute !== "All" || this._lastActiveRoute !== activeRoute)
+            this[`show${activeRoute}`]();
+
+        this._lastActiveRoute = activeRoute;
+    };
+
+    /**
+     * Simply updates the filter nav's selected states
+     */
+    Controller.prototype._updateFilterState = function (currentPage) {
+        // Store a reference to the active route, allowing us to re-filter todo
+        // items as they are marked complete or incomplete.
+        this._activeRoute = currentPage;
+
+        if (currentPage === "")
+            this._activeRoute = "All";
+
+        this._filter();
+
+        this.view.render("setFilter", currentPage);
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.Controller = Controller;
+})(window);
diff --git a/updates/javascript-es5/src/helpers.js b/updates/javascript-es5/src/helpers.js
new file mode 100644
index 0000000000..de93a88f2d
--- /dev/null
+++ b/updates/javascript-es5/src/helpers.js
@@ -0,0 +1,51 @@
+/* global NodeList */
+(function (window) {
+    "use strict";
+
+    // Get element(s) by CSS selector:
+    window.qs = function (selector, scope) {
+        return (scope || document).querySelector(selector);
+    };
+    window.qsa = function (selector, scope) {
+        return (scope || document).querySelectorAll(selector);
+    };
+
+    // addEventListener wrapper:
+    window.$on = function (target, type, callback, useCapture) {
+        target.addEventListener(type, callback, !!useCapture);
+    };
+
+    // Attach a handler to event for all elements that match the selector,
+    // now or in the future, based on a root element
+    window.$delegate = function (target, selector, type, handler) {
+        function dispatchEvent(event) {
+            var targetElement = event.target;
+            var potentialElements = window.qsa(selector, target);
+            var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
+
+            if (hasMatch)
+                handler.call(targetElement, event);
+        }
+
+        // https://developer.mozilla.org/en-US/docs/Web/Events/blur
+        var useCapture = type === "blur" || type === "focus";
+
+        window.$on(target, type, dispatchEvent, useCapture);
+    };
+
+    // Find the element's parent with the given tag name:
+    // $parent(qs('a'), 'div');
+    window.$parent = function (element, tagName) {
+        if (!element.parentNode)
+            return undefined;
+
+        if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase())
+            return element.parentNode;
+
+        return window.$parent(element.parentNode, tagName);
+    };
+
+    // Allow for looping on nodes by chaining:
+    // qsa('.foo').forEach(function () {})
+    NodeList.prototype.forEach = Array.prototype.forEach;
+})(window);
diff --git a/updates/javascript-es5/src/model.js b/updates/javascript-es5/src/model.js
new file mode 100644
index 0000000000..2268fe8539
--- /dev/null
+++ b/updates/javascript-es5/src/model.js
@@ -0,0 +1,119 @@
+(function (window) {
+    "use strict";
+
+    /**
+     * Creates a new Model instance and hooks up the storage.
+     *
+     * @constructor
+     * @param {object} storage A reference to the client side storage class
+     */
+    function Model(storage) {
+        this.storage = storage;
+    }
+
+    /**
+     * Creates a new todo model
+     *
+     * @param {string} [title] The title of the task
+     * @param {function} [callback] The callback to fire after the model is created
+     */
+    Model.prototype.create = function (title, callback) {
+        title = title || "";
+        callback = callback || function () {};
+
+        var newItem = {
+            title: title.trim(),
+            completed: false,
+        };
+
+        this.storage.save(newItem, callback);
+    };
+
+    /**
+     * Finds and returns a model in storage. If no query is given it'll simply
+     * return everything. If you pass in a string or number it'll look that up as
+     * the ID of the model to find. Lastly, you can pass it an object to match
+     * against.
+     *
+     * @param {string|number|object} [query] A query to match models against
+     * @param {function} [callback] The callback to fire after the model is found
+     *
+     * @example
+     * model.read(1, func); // Will find the model with an ID of 1
+     * model.read('1'); // Same as above
+     * //Below will find a model with foo equalling bar and hello equalling world.
+     * model.read({ foo: 'bar', hello: 'world' });
+     */
+    Model.prototype.read = function (query, callback) {
+        var queryType = typeof query;
+        callback = callback || function () {};
+
+        if (queryType === "function") {
+            callback = query;
+            return this.storage.findAll(callback);
+        } else if (queryType === "string" || queryType === "number") {
+            query = parseInt(query, 10);
+            return this.storage.find({ id: query }, callback);
+        } else {
+            return this.storage.find(query, callback);
+        }
+    };
+
+    /**
+     * Updates a model by giving it an ID, data to update, and a callback to fire when
+     * the update is complete.
+     *
+     * @param {number} id The id of the model to update
+     * @param {object} data The properties to update and their new value
+     * @param {function} callback The callback to fire when the update is complete.
+     */
+    Model.prototype.update = function (id, data, callback) {
+        this.storage.save(data, callback, id);
+    };
+
+    /**
+     * Removes a model from storage
+     *
+     * @param {number} id The ID of the model to remove
+     * @param {function} callback The callback to fire when the removal is complete.
+     */
+    Model.prototype.remove = function (id, callback) {
+        this.storage.remove(id, callback);
+    };
+
+    /**
+     * WARNING: Will remove ALL data from storage.
+     *
+     * @param {function} callback The callback to fire when the storage is wiped.
+     */
+    Model.prototype.removeAll = function (callback) {
+        this.storage.drop(callback);
+    };
+
+    /**
+     * Returns a count of all todos
+     */
+    Model.prototype.getCount = function (callback) {
+        var todos = {
+            active: 0,
+            completed: 0,
+            total: 0,
+        };
+
+        this.storage.findAll(function (data) {
+            data.forEach(function (todo) {
+                if (todo.completed)
+                    todos.completed++;
+                else
+                    todos.active++;
+
+                todos.total++;
+            });
+            callback(todos);
+        });
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.Model = Model;
+})(window);
diff --git a/updates/javascript-es5/src/store.js b/updates/javascript-es5/src/store.js
new file mode 100644
index 0000000000..2493c12aa2
--- /dev/null
+++ b/updates/javascript-es5/src/store.js
@@ -0,0 +1,146 @@
+/* jshint eqeqeq:false */
+(function (window) {
+    "use strict";
+
+    var MemoryStorage = {};
+    var ID = 1;
+
+    /**
+     * Creates a new client side storage object and will create an empty
+     * collection if no collection already exists.
+     *
+     * @param {string} name The name of our DB we want to use
+     * @param {function} callback Our fake DB uses callbacks because in
+     * real life you probably would be making AJAX calls
+     */
+    function Store(name, callback) {
+        callback = callback || function () {};
+
+        this._dbName = name;
+
+        if (!MemoryStorage[name]) {
+            var data = {
+                todos: [],
+            };
+
+            MemoryStorage[name] = JSON.stringify(data);
+        }
+
+        callback.call(this, JSON.parse(MemoryStorage[name]));
+    }
+
+    /**
+     * Finds items based on a query given as a JS object
+     *
+     * @param {object} query The query to match against (i.e. {foo: 'bar'})
+     * @param {function} callback     The callback to fire when the query has
+     * completed running
+     *
+     * @example
+     * db.find({foo: 'bar', hello: 'world'}, function (data) {
+     *     // data will return any items that have foo: bar and
+     *     // hello: world in their properties
+     * });
+     */
+    Store.prototype.find = function (query, callback) {
+        if (!callback)
+            return;
+
+        var todos = JSON.parse(MemoryStorage[this._dbName]).todos;
+
+        callback.call(
+            this,
+            todos.filter(function (todo) {
+                for (var q in query) {
+                    if (query[q] !== todo[q])
+                        return false;
+                }
+
+                return true;
+            })
+        );
+    };
+
+    /**
+     * Will retrieve all data from the collection
+     *
+     * @param {function} callback The callback to fire upon retrieving data
+     */
+    Store.prototype.findAll = function (callback) {
+        callback = callback || function () {};
+        callback.call(this, JSON.parse(MemoryStorage[this._dbName]).todos);
+    };
+
+    /**
+     * Will save the given data to the DB. If no item exists it will create a new
+     * item, otherwise it'll simply update an existing item's properties
+     *
+     * @param {object} updateData The data to save back into the DB
+     * @param {function} callback The callback to fire after saving
+     * @param {number} id An optional param to enter an ID of an item to update
+     */
+    Store.prototype.save = function (updateData, callback, id) {
+        var data = JSON.parse(MemoryStorage[this._dbName]);
+        var todos = data.todos;
+
+        callback = callback || function () {};
+
+        // If an ID was actually given, find the item and update each property
+        if (id) {
+            for (var i = 0; i < todos.length; i++) {
+                if (todos[i].id === id) {
+                    for (var key in updateData)
+                        todos[i][key] = updateData[key];
+
+                    break;
+                }
+            }
+
+            MemoryStorage[this._dbName] = JSON.stringify(data);
+            callback.call(this, todos);
+        } else {
+            // Generate an ID
+            updateData.id = ID++;
+
+            todos.push(updateData);
+            MemoryStorage[this._dbName] = JSON.stringify(data);
+            callback.call(this, [updateData]);
+        }
+    };
+
+    /**
+     * Will remove an item from the Store based on its ID
+     *
+     * @param {number} id The ID of the item you want to remove
+     * @param {function} callback The callback to fire after saving
+     */
+    Store.prototype.remove = function (id, callback) {
+        var data = JSON.parse(MemoryStorage[this._dbName]);
+        var todos = data.todos;
+
+        for (var i = 0; i < todos.length; i++) {
+            if (todos[i].id === id) {
+                todos.splice(i, 1);
+                break;
+            }
+        }
+
+        MemoryStorage[this._dbName] = JSON.stringify(data);
+        callback.call(this, todos);
+    };
+
+    /**
+     * Will drop all storage and start fresh
+     *
+     * @param {function} callback The callback to fire after dropping the data
+     */
+    Store.prototype.drop = function (callback) {
+        var data = { todos: [] };
+        MemoryStorage[this._dbName] = JSON.stringify(data);
+        callback.call(this, data.todos);
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.Store = Store;
+})(window);
diff --git a/updates/javascript-es5/src/template.js b/updates/javascript-es5/src/template.js
new file mode 100644
index 0000000000..fca160f3ba
--- /dev/null
+++ b/updates/javascript-es5/src/template.js
@@ -0,0 +1,111 @@
+/* jshint laxbreak:true */
+(function (window) {
+    "use strict";
+
+    var htmlEscapes = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#x27;",
+        "`": "&#x60;",
+    };
+
+    var escapeHtmlChar = function (chr) {
+        return htmlEscapes[chr];
+    };
+
+    var reUnescapedHtml = /[&<>"'`]/g;
+    var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source);
+
+    var escape = function (string) {
+        return string && reHasUnescapedHtml.test(string) ? string.replace(reUnescapedHtml, escapeHtmlChar) : string;
+    };
+
+    /**
+     * Sets up defaults for all the Template methods such as a default template
+     *
+     * @constructor
+     */
+    function Template() {
+        this.defaultTemplate
+            = '<li data-id="{{id}}" class="{{completed}}">'
+            + '<div class="view">'
+            + '<input class="toggle" type="checkbox" {{checked}}>'
+            + "<label>{{title}}</label>"
+            + '<button class="destroy"></button>'
+            + "</div>"
+            + "</li>";
+    }
+
+    /**
+     * Creates an <li> HTML string and returns it for placement in your app.
+     *
+     * NOTE: In real life you should be using a templating engine such as Mustache
+     * or Handlebars, however, this is a vanilla JS example.
+     *
+     * @param {object} data The object containing keys you want to find in the
+     *                      template to replace.
+     * @returns {string} HTML String of an <li> element
+     *
+     * @example
+     * view.show({
+     *    id: 1,
+     *    title: "Hello World",
+     *    completed: 0,
+     * });
+     */
+    Template.prototype.show = function (data) {
+        var i, l;
+        var view = "";
+
+        for (i = 0, l = data.length; i < l; i++) {
+            var template = this.defaultTemplate;
+            var completed = "";
+            var checked = "";
+
+            if (data[i].completed) {
+                completed = "completed";
+                checked = "checked";
+            }
+
+            template = template.replace("{{id}}", data[i].id);
+            template = template.replace("{{title}}", escape(data[i].title));
+            template = template.replace("{{completed}}", completed);
+            template = template.replace("{{checked}}", checked);
+
+            view = view + template;
+        }
+
+        return view;
+    };
+
+    /**
+     * Displays a counter of how many to dos are left to complete
+     *
+     * @param {number} activeTodos The number of active todos.
+     * @returns {string} String containing the count
+     */
+    Template.prototype.itemCounter = function (activeTodos) {
+        var plural = activeTodos === 1 ? "" : "s";
+
+        return `<strong>${activeTodos}</strong> item${plural} left`;
+    };
+
+    /**
+     * Updates the text within the "Clear completed" button
+     *
+     * @param  {[type]} completedTodos The number of completed todos.
+     * @returns {string} String containing the count
+     */
+    Template.prototype.clearCompletedButton = function (completedTodos) {
+        if (completedTodos > 0)
+            return "Clear completed";
+        else
+            return "";
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.Template = Template;
+})(window);
diff --git a/updates/javascript-es5/src/view.js b/updates/javascript-es5/src/view.js
new file mode 100644
index 0000000000..b34323332f
--- /dev/null
+++ b/updates/javascript-es5/src/view.js
@@ -0,0 +1,215 @@
+/* global qs, qsa, $on, $parent, $delegate */
+
+(function (window) {
+    "use strict";
+
+    /**
+     * View that abstracts away the browser's DOM completely.
+     * It has two simple entry points:
+     *
+     *   - bind(eventName, handler)
+     *     Takes a todo application event and registers the handler
+     *   - render(command, parameterObject)
+     *     Renders the given command with the options
+     */
+    function View(template) {
+        this.template = template;
+
+        this.ENTER_KEY = 13;
+        this.ESCAPE_KEY = 27;
+
+        this.$todoList = qs(".todo-list");
+        this.$todoItemCounter = qs(".todo-count");
+        this.$clearCompleted = qs(".clear-completed");
+        this.$main = qs(".main");
+        this.$footer = qs(".footer");
+        this.$toggleAllInput = qs(".toggle-all");
+        this.$toggleAll = qs(".toggle-all-label");
+        this.$newTodo = qs(".new-todo");
+    }
+
+    View.prototype._removeItem = function (id) {
+        var elem = qs(`[data-id="${id}"]`);
+
+        if (elem)
+            this.$todoList.removeChild(elem);
+    };
+
+    View.prototype._clearCompletedButton = function (completedCount, visible) {
+        this.$clearCompleted.textContent = this.template.clearCompletedButton(completedCount);
+        this.$clearCompleted.style.display = visible ? "block" : "none";
+    };
+
+    View.prototype._setFilter = function (currentPage) {
+        qs(".filters .selected").className = "";
+        qs(`.filters [href="#/${currentPage}"]`).className = "selected";
+    };
+
+    View.prototype._elementComplete = function (id, completed) {
+        var listItem = qs(`[data-id="${id}"]`);
+
+        if (!listItem)
+            return;
+
+        listItem.className = completed ? "completed" : "";
+
+        // In case it was toggled from an event and not by clicking the checkbox
+        qs("input", listItem).checked = completed;
+    };
+
+    View.prototype._editItem = function (id, title) {
+        var listItem = qs(`[data-id="${id}"]`);
+
+        if (!listItem)
+            return;
+
+        listItem.className = `${listItem.className} editing`;
+
+        var input = document.createElement("input");
+        input.className = "edit";
+
+        listItem.appendChild(input);
+        input.focus();
+        input.value = title;
+    };
+
+    View.prototype._editItemDone = function (id, title) {
+        var listItem = qs(`[data-id="${id}"]`);
+
+        if (!listItem)
+            return;
+
+        var input = qs("input.edit", listItem);
+        listItem.removeChild(input);
+
+        listItem.className = listItem.className.replace("editing", "");
+
+        qsa("label", listItem).forEach(function (label) {
+            label.textContent = title;
+        });
+    };
+
+    View.prototype._replaceContentWithHtml = function (element, html) {
+        const parsedDocument = new DOMParser().parseFromString(html, "text/html");
+        element.replaceChildren(...parsedDocument.body.childNodes);
+    };
+
+    View.prototype.render = function (viewCmd, parameter) {
+        var self = this;
+        var viewCommands = {
+            showEntries: function () {
+                self._replaceContentWithHtml(self.$todoList, self.template.show(parameter));
+            },
+            removeItem: function () {
+                self._removeItem(parameter);
+            },
+            updateElementCount: function () {
+                self._replaceContentWithHtml(self.$todoItemCounter, self.template.itemCounter(parameter));
+            },
+            clearCompletedButton: function () {
+                self._clearCompletedButton(parameter.completed, parameter.visible);
+            },
+            contentBlockVisibility: function () {
+                self.$main.style.display = self.$footer.style.display = parameter.visible ? "block" : "none";
+            },
+            toggleAll: function () {
+                self.$toggleAll.checked = parameter.checked;
+            },
+            setFilter: function () {
+                self._setFilter(parameter);
+            },
+            clearNewTodo: function () {
+                self.$newTodo.value = "";
+            },
+            elementComplete: function () {
+                self._elementComplete(parameter.id, parameter.completed);
+            },
+            editItem: function () {
+                self._editItem(parameter.id, parameter.title);
+            },
+            editItemDone: function () {
+                self._editItemDone(parameter.id, parameter.title);
+            },
+        };
+
+        viewCommands[viewCmd]();
+    };
+
+    View.prototype._itemId = function (element) {
+        var li = $parent(element, "li");
+        return parseInt(li.dataset.id, 10);
+    };
+
+    View.prototype._bindItemEditDone = function (handler) {
+        var self = this;
+        $delegate(self.$todoList, "li .edit", "blur", function () {
+            if (!this.dataset.iscanceled) {
+                handler({
+                    id: self._itemId(this),
+                    title: this.value,
+                });
+            }
+        });
+
+        $delegate(self.$todoList, "li .edit", "keypress", function (event) {
+            if (event.keyCode === self.ENTER_KEY) {
+                // Remove the cursor from the input when you hit enter just like if it
+                // were a real form
+                this.blur();
+            }
+        });
+    };
+
+    View.prototype._bindItemEditCancel = function (handler) {
+        var self = this;
+        $delegate(self.$todoList, "li .edit", "keyup", function (event) {
+            if (event.keyCode === self.ESCAPE_KEY) {
+                this.dataset.iscanceled = true;
+                this.blur();
+
+                handler({ id: self._itemId(this) });
+            }
+        });
+    };
+
+    View.prototype.bind = function (event, handler) {
+        var self = this;
+        if (event === "newTodo") {
+            $on(self.$newTodo, "change", function () {
+                handler(self.$newTodo.value);
+            });
+        } else if (event === "removeCompleted") {
+            $on(self.$clearCompleted, "click", function () {
+                handler();
+            });
+        } else if (event === "toggleAll") {
+            $on(self.$toggleAll, "click", function () {
+                self.$toggleAllInput.click();
+                handler({ completed: self.$toggleAllInput.checked });
+            });
+        } else if (event === "itemEdit") {
+            $delegate(self.$todoList, "li label", "dblclick", function () {
+                handler({ id: self._itemId(this) });
+            });
+        } else if (event === "itemRemove") {
+            $delegate(self.$todoList, ".destroy", "click", function () {
+                handler({ id: self._itemId(this) });
+            });
+        } else if (event === "itemToggle") {
+            $delegate(self.$todoList, ".toggle", "click", function () {
+                handler({
+                    id: self._itemId(this),
+                    completed: this.checked,
+                });
+            });
+        } else if (event === "itemEditDone") {
+            self._bindItemEditDone(handler);
+        } else if (event === "itemEditCancel") {
+            self._bindItemEditCancel(handler);
+        }
+    };
+
+    // Export to window
+    window.app = window.app || {};
+    window.app.View = View;
+})(window);

From c3425298f33097cd1870020612634dacfd3962d9 Mon Sep 17 00:00:00 2001
From: Thorsten Kober <tkober@gmail.com>
Date: Mon, 23 Oct 2023 12:56:13 -0400
Subject: [PATCH 2/3] adjust index

---
 updates/javascript-es5/dist/index.html | 8 +++++---
 updates/javascript-es5/index.html      | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/updates/javascript-es5/dist/index.html b/updates/javascript-es5/dist/index.html
index 942fce36b2..2665af63f3 100644
--- a/updates/javascript-es5/dist/index.html
+++ b/updates/javascript-es5/dist/index.html
@@ -39,10 +39,12 @@ <h1>todos</h1>
             </footer>
         </section>
         <footer class="info">
-            <p>Double-click to edit a todo</p>
-			<p>Created by the TodoMVC Team</p>
+			<p>Double-click to edit a todo</p>
+			<p>Created by <a href="http://twitter.com/oscargodson">Oscar Godson</a></p>
+			<p>Refactored by <a href="https://github.com/cburgmer">Christoph Burgmer</a></p>
+            <p>Maintenanced by the TodoMVC team</p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-        </footer>
+		</footer>
         <script src="helpers.js"></script>
         <script src="store.js"></script>
         <script src="model.js"></script>
diff --git a/updates/javascript-es5/index.html b/updates/javascript-es5/index.html
index 088aebabc0..fc4d28bbc6 100644
--- a/updates/javascript-es5/index.html
+++ b/updates/javascript-es5/index.html
@@ -39,10 +39,12 @@ <h1>todos</h1>
             </footer>
         </section>
         <footer class="info">
-            <p>Double-click to edit a todo</p>
-			<p>Created by the TodoMVC Team</p>
+			<p>Double-click to edit a todo</p>
+			<p>Created by <a href="http://twitter.com/oscargodson">Oscar Godson</a></p>
+			<p>Refactored by <a href="https://github.com/cburgmer">Christoph Burgmer</a></p>
+            <p>Maintenanced by the TodoMVC team</p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-        </footer>
+		</footer>
         <script src="src/helpers.js"></script>
         <script src="src/store.js"></script>
         <script src="src/model.js"></script>

From d1683cd36de854aa1e6322ac189e9a2d1d02eba0 Mon Sep 17 00:00:00 2001
From: Thorsten Kober <tkober@gmail.com>
Date: Mon, 23 Oct 2023 13:02:29 -0400
Subject: [PATCH 3/3] update readme

---
 updates/javascript-es5/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/updates/javascript-es5/README.md b/updates/javascript-es5/README.md
index 2701ce917a..19e1dddf4d 100644
--- a/updates/javascript-es5/README.md
+++ b/updates/javascript-es5/README.md
@@ -8,11 +8,11 @@ JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programm
 
 [JavaScript - developer.mozilla.org](http://developer.mozilla.org/en-US/docs/JavaScript)
 
-## Implementation details
+## Implementation Details
 
 This implementation uses an explicit MVC pattern, with a clear file structure to reflect the architecture. The storage solution uses an in-memory data object that implements a simple array to hold the todos.
 
-## Built steps
+## Build Steps
 
 A simple build script copies all necessary files to a `dist` folder.
 It does not rely on compilers or transpilers and serves raw html, css and js files to the user.
@@ -30,7 +30,7 @@ The only requirement is an installation of Node, to be able to install dependenc
 * NPM (min version: 8.19.3)
 ```
 
-## Local preview
+## Local Preview
 
 ```
 terminal: