Skip to content

Commit 5a19851

Browse files
flashdesignoryflashdesignory
authored
Add local storage to todoMVC-es5 (#414)
1 parent a999ad1 commit 5a19851

24 files changed

+3552
-36
lines changed

‎experimental/todomvc-localstorage/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Speedometer 3.0: TodoMVC: JavaScript Es5
2+
3+
## Description
4+
5+
This application uses JavaScript with ES5 language features to implement a todo application.
6+
7+
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..
8+
9+
[JavaScript - developer.mozilla.org](http://developer.mozilla.org/en-US/docs/JavaScript)
10+
11+
## Implementation details
12+
13+
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.
14+
15+
## Built steps
16+
17+
A simple build script copies all necessary files to a `dist` folder.
18+
It does not rely on compilers or transpilers and serves raw html, css and js files to the user.
19+
20+
```
21+
npm run build
22+
```
23+
24+
## Requirements
25+
26+
The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.
27+
28+
```
29+
* Node (min version: 18.13.0)
30+
* NPM (min version: 8.19.3)
31+
```
32+
33+
## Local preview
34+
35+
```
36+
terminal:
37+
1. npm install
38+
2. npm run dev
39+
40+
browser:
41+
1. http://localhost:7001/
42+
```

‎experimental/todomvc-localstorage/dist/app.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* global app, $on */
2+
(function () {
3+
"use strict";
4+
5+
/**
6+
* Sets up a brand new Todo list.
7+
*
8+
* @param {string} name The name of your new to do list.
9+
*/
10+
function Todo(name) {
11+
this.storage = new app.Store(name);
12+
this.model = new app.Model(this.storage);
13+
this.template = new app.Template();
14+
this.view = new app.View(this.template);
15+
this.controller = new app.Controller(this.model, this.view);
16+
}
17+
18+
var todo = new Todo("javascript-es5");
19+
20+
function setView() {
21+
todo.controller.setView(document.location.hash);
22+
}
23+
$on(window, "load", setView);
24+
$on(window, "hashchange", setView);
25+
})();

‎experimental/todomvc-localstorage/dist/base.css

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
hr {
2+
margin: 20px 0;
3+
border: 0;
4+
border-top: 1px dashed #c5c5c5;
5+
border-bottom: 1px dashed #f7f7f7;
6+
}
7+
8+
.learn a {
9+
font-weight: normal;
10+
text-decoration: none;
11+
color: #b83f45;
12+
}
13+
14+
.learn a:hover {
15+
text-decoration: underline;
16+
color: #787e7e;
17+
}
18+
19+
.learn h3,
20+
.learn h4,
21+
.learn h5 {
22+
margin: 10px 0;
23+
font-weight: 500;
24+
line-height: 1.2;
25+
color: #000;
26+
}
27+
28+
.learn h3 {
29+
font-size: 24px;
30+
}
31+
32+
.learn h4 {
33+
font-size: 18px;
34+
}
35+
36+
.learn h5 {
37+
margin-bottom: 0;
38+
font-size: 14px;
39+
}
40+
41+
.learn ul {
42+
padding: 0;
43+
margin: 0 0 30px 25px;
44+
}
45+
46+
.learn li {
47+
line-height: 20px;
48+
}
49+
50+
.learn p {
51+
font-size: 15px;
52+
font-weight: 300;
53+
line-height: 1.3;
54+
margin-top: 0;
55+
margin-bottom: 0;
56+
}
57+
58+
#issue-count {
59+
display: none;
60+
}
61+
62+
.quote {
63+
border: none;
64+
margin: 20px 0 60px 0;
65+
}
66+
67+
.quote p {
68+
font-style: italic;
69+
}
70+
71+
.quote p:before {
72+
content: '“';
73+
font-size: 50px;
74+
opacity: .15;
75+
position: absolute;
76+
top: -20px;
77+
left: 3px;
78+
}
79+
80+
.quote p:after {
81+
content: '”';
82+
font-size: 50px;
83+
opacity: .15;
84+
position: absolute;
85+
bottom: -42px;
86+
right: 3px;
87+
}
88+
89+
.quote footer {
90+
position: absolute;
91+
bottom: -40px;
92+
right: 0;
93+
}
94+
95+
.quote footer img {
96+
border-radius: 3px;
97+
}
98+
99+
.quote footer a {
100+
margin-left: 5px;
101+
vertical-align: middle;
102+
}
103+
104+
.speech-bubble {
105+
position: relative;
106+
padding: 10px;
107+
background: rgba(0, 0, 0, .04);
108+
border-radius: 5px;
109+
}
110+
111+
.speech-bubble:after {
112+
content: '';
113+
position: absolute;
114+
top: 100%;
115+
right: 30px;
116+
border: 13px solid transparent;
117+
border-top-color: rgba(0, 0, 0, .04);
118+
}
119+
120+
.learn-bar > .learn {
121+
position: absolute;
122+
width: 272px;
123+
top: 8px;
124+
left: -300px;
125+
padding: 10px;
126+
border-radius: 5px;
127+
background-color: rgba(255, 255, 255, .6);
128+
transition-property: left;
129+
transition-duration: 500ms;
130+
}
131+
132+
@media (min-width: 899px) {
133+
.learn-bar {
134+
width: auto;
135+
padding-left: 300px;
136+
}
137+
138+
.learn-bar > .learn {
139+
left: 8px;
140+
}
141+
}

0 commit comments

Comments
 (0)