Skip to content

Commit 4ca2758

Browse files
Fun-Era-lFun-Era-l
committed
Upload Local Project
0 parents  commit 4ca2758

File tree

6 files changed

+647
-0
lines changed

6 files changed

+647
-0
lines changed

‎localStorage.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* The Object.assign() method is used to copy the values of all
3+
* enumerable own properties from one or more source objects to
4+
* a target object. It will return the target object.
5+
*
6+
* 向window.model添加 init / flush 两个枚举属性(函数)
7+
*/
8+
(function() {
9+
var model = window.model;
10+
var storage = window.localStorage;
11+
12+
Object.assign(model, {
13+
// 使用回调函数进行初始化 提取storage中的data(s)到model中去
14+
// 若data(s)存在，就将model.data(m,执行时的‘内存’)置为该data值 否则将storage的
15+
// model.TOKEN项置为空并报错
16+
init: function(callback) {
17+
var data = storage.getItem(model.TOKEN);
18+
try {
19+
// 解析JSON字符串，构造并返回由JSON字符串描述的JavaScript值或对象
20+
if (data) model.data = JSON.parse(data);
21+
}
22+
catch (e) {
23+
storage.setItem(model.TOKEN, '');
24+
console.error(e);
25+
}
26+
27+
if (callback) callback();
28+
},
29+
// 将storage中的TOKEN对应的数据设成model.data对应的json值
30+
// 从model到storage
31+
flush: function(callback) {
32+
try {
33+
//将js对象转换为json字符串 存入storage的TOKEN对应值中
34+
storage.setItem(model.TOKEN, JSON.stringify(model.data));
35+
}
36+
catch (e) {
37+
console.error(e);
38+
}
39+
if (callback) callback();
40+
}
41+
});
42+
})();

‎model.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
model = {
2+
data: {
3+
items: [
4+
// {msg:'', completed: false}
5+
],
6+
msg: '',
7+
filter: 'all'
8+
},
9+
TOKEN: 'TodoMVC'
10+
11+
// data provider interface
12+
// init: null
13+
// flush: null
14+
};

‎todo.css

+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
*{
2+
margin: 0px;
3+
padding: 0px;
4+
animation-duration: 0.5s;
5+
}
6+
7+
body{
8+
background-color: #f0f0f0;
9+
display:flex;
10+
flex-direction: column;
11+
}
12+
13+
#title{
14+
text-align: center;
15+
}
16+
17+
#title h1{
18+
color: rgba(175, 47, 47, 0.15);
19+
font-size: 54pt;
20+
font-weight: bold;
21+
}
22+
23+
#list{
24+
margin: 10px auto;
25+
width: 95%;
26+
text-align: center;
27+
font-size: 0px;
28+
}
29+
30+
#todo-list{
31+
min-height: 368px;
32+
max-height: 368px;
33+
overflow-y: auto;
34+
border: 1px solid rgba(175, 47, 47, 0.15);
35+
background-color: #f9f9f9;
36+
width: 90%;
37+
box-sizing: border-box;
38+
margin: 0 auto;
39+
}
40+
41+
#new-todo{
42+
height: 60px;
43+
margin: auto;
44+
font-size: x-large;
45+
padding-top: 1vh;
46+
padding-bottom: 1vh;
47+
padding-left: 13vw;
48+
padding-right: 0px;
49+
opacity: 0.5;
50+
width: 100%;
51+
box-sizing: border-box;
52+
border: 1px solid rgba(175, 47, 47, 0.15);
53+
}
54+
55+
.todo{
56+
font-size: larger;
57+
padding: 2px 2px;
58+
opacity: 0.5;
59+
width: 100%;
60+
}
61+
62+
#toggle-all{
63+
position: absolute;
64+
background-color: rgba(175, 47, 47, 0.15);
65+
border: hidden;
66+
left: 8%;
67+
width: 5%;
68+
z-index: 99;
69+
top: 50%;
70+
transform: translate(-50%, -50%);
71+
}
72+
73+
.listItem{
74+
display: flex;
75+
align-items: center;
76+
padding: 10px;
77+
margin: auto;
78+
height: 46px;
79+
width: 100%;
80+
box-sizing: border-box;
81+
text-align: left;
82+
font-size: 16pt;
83+
border-bottom: 1px solid rgba(175, 47, 47, 0.15);
84+
background-color: #f9f9f9;
85+
z-index: 99;
86+
}
87+
88+
.listItem p{
89+
display: inline-block;
90+
margin-left: 5%;
91+
cursor: pointer;
92+
width: 75%;
93+
}
94+
95+
.done{
96+
display: inline-block;
97+
border: 2px solid black;
98+
opacity: 0.2;
99+
border-radius: 50%;
100+
box-sizing: border-box;
101+
width: 20px;
102+
height: 20px;
103+
margin-left: 2%;
104+
background-color: transparent;
105+
}
106+
107+
.isdone{
108+
background-color: rgba(175, 47, 47, 0.5);
109+
}
110+
111+
.Done{
112+
position: static;
113+
text-decoration: line-through;
114+
color: grey;
115+
}
116+
117+
.none{
118+
display: none;
119+
}
120+
121+
#filterList{
122+
width: 100%;
123+
margin: auto;
124+
text-align: center;
125+
126+
font-size: 0pt;
127+
display: block;
128+
}
129+
130+
li{
131+
color: #f4f4f4;
132+
display: inline-block;
133+
font-size: 3vh;
134+
font-weight: bold;
135+
font-family: Arial, Helvetica, sans-serif;
136+
text-align: center;
137+
width: 29vw;
138+
height: 5vh;
139+
line-height: 30px;
140+
cursor: pointer;
141+
background-color: rgba(175, 47, 47, 0.15);
142+
}
143+
li#all,li#active{
144+
border-right:1vw #f4f4f4 solid;
145+
}
146+
.select{
147+
opacity: 1;
148+
color: rgba(175, 47, 47, 0.15);
149+
background-color: #f4f4f4;
150+
}
151+
152+
#clear-completed{
153+
color: #f4f4f4;
154+
visibility: hidden;
155+
border: hidden;
156+
display: block;
157+
margin-left: auto;
158+
margin-right: auto;
159+
font-size: 3vh;
160+
height: 5vh;
161+
width: 30vh;
162+
font-weight: bold;
163+
background-color: rgba(204, 83, 13, 0.13);
164+
opacity: 1;
165+
}
166+
167+
#leftItems{
168+
color: rgba(175, 47, 47, 0.75);
169+
font-size: 16pt;
170+
margin-top: 20px;
171+
margin-left: auto;
172+
margin-right: auto;
173+
}
174+
175+
#userInput{
176+
position: relative;
177+
width:90vw;
178+
margin:auto;
179+
}
180+
181+
/* 使用@keyframes 定义动画效果 */
182+
@keyframes in{
183+
0% {
184+
transform: translateY(-50px);
185+
opacity: 0;
186+
z-index: 99;
187+
}
188+
100% {
189+
transform: translateY(0px);
190+
opacity: 1;
191+
z-index: 99;
192+
}
193+
}
194+
195+
@keyframes leftOut{
196+
0%{
197+
transform: translateX(0px);
198+
opacity: 1;
199+
}
200+
100%{
201+
transform: translateX(-100px);
202+
opacity: 0;
203+
}
204+
}
205+
206+
@keyframes rightOut{
207+
0%{
208+
transform: translateX(0px);
209+
opacity: 1;
210+
}
211+
100%{
212+
transform: translateX(100px);
213+
opacity: 0;
214+
}
215+
}
216+
#main{
217+
flex:1;
218+
}
219+
#footer{
220+
text-align: center;
221+
width: 90vw;
222+
margin:auto;
223+
}
224+
#todoItems{
225+
display: inline;
226+
}
227+
228+

‎todo.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<meta content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=2" name="viewport"/>
6+
<title>Todo</title>
7+
<link rel="stylesheet" href="todo.css"/>
8+
</head>
9+
<body>
10+
<section id="main">
11+
<header class="header">
12+
<div id="title">
13+
<h1>todos</h1>
14+
</div>
15+
<div id="userInput">
16+
<input id="toggle-all" type="checkbox"/>
17+
<input id="new-todo" type="text" placeholder="What needs to be done?" autofocus>
18+
</div>
19+
<ul id="todo-list"></ul>
20+
</header>
21+
</section>
22+
<div id="footer">
23+
<ul id="filterList">
24+
<li id="all">all</li>
25+
<li id="active">active</li>
26+
<li id="completed">completed</li>
27+
</ul>
28+
<div>
29+
<div id="leftItems"></div>
30+
</div>
31+
<button id="clear-completed">Clear completed</button>
32+
</div>
33+
<script src="zepto.js"></script>
34+
<script src="model.js"></script>
35+
<script src="localStorage.js"></script>
36+
<script src="todo.js"></script>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)