Add JavaScript ES5 to update folder (#2206)

index.html

@@ -254,7 +254,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>

updates/javascript-es5/.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules

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.
+
+## 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.
+
+```
+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/
+```

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);
+})();

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;
+	}
+}