Skip to content
GitLab
Commit c811a338 authored by HSX's avatar HSX
Browse files

localstorage added

parent 793602ec
Hide whitespace changes
Inline Side-by-side
Readme.md
View file @ c811a338
### web-shell 实习期项目
\ No newline at end of file
### web-shell 实习期项目
## Syntax
- ```add``` title content deadline : 添加标题为title，内容为content，截至时间为dealine代办事件
# deadline should be the format "yyyy/MM/dd"
- ```modify``` id title = newtitle ： 修改id条事件的title/ content/ deadline
# title be substitued by content or deadline, and space is allowed
- ```resolve``` id ： 完成id条事件，完成事件字体变为灰色
- ```delete``` id ： 删除id条事件
- ```update``` ： 根据代办事件的deadline和当前时间，若超过时间则字体变为红色
\ No newline at end of file
index.html
View file @ c811a338
......@@ -18,7 +18,7 @@
<!-- todo card display part -->
<div id="list-todo">
<div id="todo-0" x-resolved="1">
<div id="todo-00" x-resolved="1">
<strong>title</strong>
<span>&nbsp;(id=0)</span>
<p>
......
index.js
View file @ c811a338
......@@ -26,22 +26,25 @@ var id = 1;
* @param {string} content
* @param {Date} deadline
*/
function addTodoToDOM(id, title, content, deadline) {
function addTodoToDOM(id, title, content, deadline, resolve = 0) {
// bonus: save all todos into localStorage
const newId = "todo-" + id;
const todoElem = document.createElement("div");
const todoTitleElem = document.createElement("strong");
const todoIdElem = document.createElement("span");
const todoContentElem = document.createElement("p");
const todoDeadlineElem = document.createElement("i");
todoElem.id = newId;
todoTitleElem.textContent = title;
todoIdElem.textContent = "(id=" + id + ")";
todoContentElem.textContent = content;
const formatdate = format(deadline, 'yyyy/MM/dd');
todoDeadlineElem.textContent = formatdate;
todoElem.appendChild(todoTitleElem);
todoElem.appendChild(todoIdElem);
todoElem.appendChild(todoContentElem);
todoElem.appendChild(todoDeadlineElem);
......@@ -51,6 +54,8 @@ function addTodoToDOM(id, title, content, deadline) {
return;
}
parentElem.appendChild(todoElem);
localStorage.setItem("todo-" + id, JSON.stringify({ "title": title, "content": content, "deadline": formatdate, "resolve": resolve}));
}
/**
......@@ -64,6 +69,9 @@ function resolveTodo(id) {
todo.setAttribute("x-resolved", "1");
todo.style.color = "gray"; // set color to gray
let item = JSON.parse(localStorage.getItem("todo-" + id) || '0');
localStorage.setItem("todo-" + id, JSON.stringify({"title": item.title, "content": item.content, "deadline": item.deadline, "resolve": 1}));
}
function deleteTodo(id) {
......@@ -76,6 +84,8 @@ function deleteTodo(id) {
{
todo.parentNode.removeChild(todo);
}
localStorage.removeItem("todo-" + id);
}
/**
......@@ -108,10 +118,28 @@ function updateOverdueStatus(id) {
function initializeTodoApp() {
// bonus: load all saved todos from localStorage
if(localStorage.getItem("todo-0")) { // 取回localstorage中存储的全局变量id
let item = JSON.parse(localStorage.getItem("todo-0") || '0');
id = parseInt(item.id);
}
for(let i = 1; i < id; i++) {
let elem = localStorage.getItem("todo-" + i);
if(elem) {
let item = JSON.parse(elem);
addTodoToDOM(i, item.title, item.content, parse(item.deadline, 'yyyy/MM/dd', new Date()), item.resolve);
if(item.resolve) {
resolveTodo(i);
}
else {
updateOverdueStatus(i);
}
}
}
const addTodoRegex = /^add\s+(\w+)\s+(\w+)\s+(\d+)\/(\d+)\/(\d+)$/;
const modifyTodoRegex = /^modify\s+(\d+)\s+(\w+)\s*=\s*(.+)/;
const resolveTodoRegex = /^resolve\s+(\d+)/;
const deleteTodoRegex = /^delete\s+(\d+)/;
const resolveTodoRegex = /^resolve\s+(\d+)\s*/;
const deleteTodoRegex = /^delete\s+(\d+)\s*/;
const updateTodoRegex = /^update\s*/;
const shellInputElem = /** @type {HTMLInputElement | null} */ (document.getElementById("input-todo"));
......@@ -119,7 +147,6 @@ function initializeTodoApp() {
alert("Failed to get input element");
return;
}
// set event listener
shellInputElem.addEventListener("keyup", function (ev) {
if (ev.key === "Enter") {
......@@ -134,6 +161,8 @@ function initializeTodoApp() {
}
deadline.setFullYear(parseInt(match[3]), parseInt(match[4]) - 1, parseInt(match[5]));
addTodoToDOM(id++, match[1], match[2], deadline);
localStorage.setItem("todo-0", JSON.stringify({"id": id})); // 每次修改id，同时在localstorage对应位置修改id的值
}
else if (modifyTodoRegex.test(inputContent)) {
let match = inputContent.match(modifyTodoRegex);
......@@ -152,10 +181,16 @@ function initializeTodoApp() {
if(match[2] === "title") {
const elem = modifyElem.getElementsByTagName("strong"); // getElementByTagName returns an array, so elem should be used with index
elem[0].textContent = match[3];
let item = JSON.parse(localStorage.getItem("todo-" + match[1]) || '0');
localStorage.setItem("todo-" + match[1], JSON.stringify({"title": match[3], "content": item.content, "deadline": item.deadline, "resolve": item.resolve}));
}
else if(match[2] === "content") {
const elem = modifyElem.getElementsByTagName("p");
elem[0].textContent = match[3];
let item = JSON.parse(localStorage.getItem("todo-" + match[1]) || '0');
localStorage.setItem("todo-" + match[1], JSON.stringify({"title": item.title, "content": match[3], "deadline": item.deadline, "resolve": item.resolve}));
} else if(match[2] === "deadline"){
const elem = modifyElem.getElementsByTagName("i");
var date = match[3].split("/");
......@@ -168,25 +203,28 @@ function initializeTodoApp() {
date[1] = date[1].trim();
date[2] = date[2].trim();
elem[0].textContent = date[0] + "/" + date[1] + "/" + date[2];
let item = JSON.parse(localStorage.getItem("todo-" + match[1]) || '0');
localStorage.setItem("todo-" + match[1], JSON.stringify({"title": item.title, "content": item.content, "deadline": elem[0].textContent, "resolve": item.resolve}));
}
}
else if(resolveTodoRegex.test(inputContent)) {
let match = inputContent.match(resolveTodoRegex);
if(!match || match.length !== 1)
if(!match || match.length !== 2)
{
alert("Failed to get resolve element");
return;
}
resolveTodo(parseInt(match[0]));
resolveTodo(parseInt(match[1]));
}
else if(deleteTodoRegex.test(inputContent)) {
let match = inputContent.match(deleteTodoRegex);
if(!match || match.length !== 1)
if(!match || match.length !== 2)
{
alert("Failed to get delete element");
return;
}
deleteTodo(parseInt(match[0]));
deleteTodo(parseInt(match[1]));
}
else if(updateTodoRegex.test(inputContent)) {
for(var i = 1; i < id; i++) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment