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

without localstorage

parent 1986670d
Hide whitespace changes
Inline Side-by-side
index.html
View file @ a827d16a
......@@ -6,23 +6,21 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO List</title>
<script src="??????" type="module"></script>
<link rel="stylesheet" href="??????">
<script src="index.js" type="module"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- shell command input part -->
<div>
<input id="input-??????" placeholder="??????"></input>
<!-- this is optional: -->
<!-- <button id="btn-??????">??????</button> -->
<input id="input-todo" placeholder="Title Content DueDate"></input>
</div>
<!-- todo card display part -->
<div id="list-??????">
<div id="todo-1" x-resolved="1">
<div id="list-todo">
<div id="todo-0" x-resolved="1">
<strong>title</strong>
<span>&nbsp;(id=1)</span>
<span>&nbsp;(id=0)</span>
<p>
content
</p>
......
index.js
View file @ a827d16a
// @ts-check
import { format } from 'https://esm.run/date-fns';
/// <reference path="./shim.d.ts" />
/// <reference path="./date-fns.d.ts" />
import { format, compareAsc, parse } from 'https://esm.run/date-fns';
/**
* @param {Date} from
......@@ -15,6 +18,8 @@ function getTimeDiffString(from, to) {
return "not implemented";
}
var id = 1;
/**
* @param {number} id
* @param {string} title
......@@ -25,42 +30,59 @@ function addTodoToDOM(id, title, content, deadline) {
// bonus: save all todos into localStorage
const newId = "todo-" + id;
const todoElem = document.createElement("???");
const todoTitleElem = document.createElement("???");
const todoContentElem = document.createElement("???");
const todoDeadlineElem = document.createElement("???");
const todoElem = document.createElement("div");
const todoTitleElem = document.createElement("strong");
const todoContentElem = document.createElement("p");
const todoDeadlineElem = document.createElement("i");
todoElem.id = newId;
todoTitleElem.textContent = ???;
todoTitleElem.textContent = title;
todoContentElem.textContent = content;
const formatdate = format(deadline, 'yyyy/MM/dd');
todoDeadlineElem.textContent = formatdate;
...
todoElem.appendChild(todoTitleElem);
todoElem.appendChild(todoContentElem);
todoElem.appendChild(todoDeadlineElem);
const parentElem = document.getElementById("???");
const parentElem = document.getElementById("list-todo");
if (!parentElem) {
alert("Failed to get input element");
return;
}
parentElem.appendChild(???);
parentElem.appendChild(todoElem);
}
/**
* @param {number} id
*/
function resolveTodo(id) {
const todo = document.getElementById("todo-" + ???);
const todo = document.getElementById("todo-" + id);
if (!todo) {
return;
}
todo.setAttribute("x-resolved", "1");
todo.style.color = "???"; // set color to gray
todo.style.color = "gray"; // set color to gray
}
function deleteTodo(id) {
const todo = document.getElementById("todo-" + id);
if(!todo) {
return;
}
if(todo.parentNode)
{
todo.parentNode.removeChild(todo);
}
}
/**
* @param {number} id
*/
function updateOverdueStatus(id) {
const todo = document.getElementById("todo-" + ???);
const todo = document.getElementById("todo-" + id);
if (!todo) {
return;
}
......@@ -68,41 +90,112 @@ function updateOverdueStatus(id) {
return;
}
const todoDeadlineElemSet = todo.getElementsByTagName("???"); // ref: index.html example todo div
var currentDate = new Date();
const todoDeadlineElemSet = todo.getElementsByTagName("i"); // ref: index.html example todo div
if (todoDeadlineElemSet.length !== 1) {
alert("Failed to get deadline element: unexpected number of <???> elements");
alert("Failed to get deadline element: unexpected number of <i> elements");
}
const todoDeadline = todoDeadlineElemSet[0].???; // get text content of element
const deadline = ???; // use date-fns here to parse date string
if (deadline > ???) {
todo.style.??? = "???"; // set color to red
const todoDeadline = todoDeadlineElemSet[0].textContent; // get text content of element
if(!todoDeadline) {
return;
}
const deadline = parse(todoDeadline, 'yyyy/MM/dd', currentDate); // use date-fns here to parse date string
if (compareAsc(deadline, currentDate) === -1) {
todo.style.color = "red"; // set color to red
}
}
function initializeTodoApp() {
// bonus: load all saved todos from localStorage
const addTodoRegex = /^add (\w+) ???? ????$/;
const modifyTodoRegex = ???;
const resolveTodoRegex = ???;
const deleteTodoRegex = ???;
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 updateTodoRegex = /^update\s*/;
const shellInputElem = /** @type {HTMLInputElement | null} */ (document.getElementById("???"));
const shellInputElem = /** @type {HTMLInputElement | null} */ (document.getElementById("input-todo"));
if (shellInputElem === null) {
alert("Failed to get input element");
return;
}
// set event listener
shellInputElem.addEventListener("keyup", function (ev) {
if (ev.key === "Enter") {
const inputContent = ???.value;
const inputContent = shellInputElem.value;
if (addTodoRegex.test(inputContent)) {
???
} else if (???) {
???
let match = inputContent.match(addTodoRegex);
var deadline = new Date();
if(!match || match.length !== 6) // immediately test the possible NULL variable
{
alert("add operation input format is wrong");
return;
}
deadline.setFullYear(parseInt(match[3]), parseInt(match[4]) - 1, parseInt(match[5]));
addTodoToDOM(id++, match[1], match[2], deadline);
}
else if (modifyTodoRegex.test(inputContent)) {
let match = inputContent.match(modifyTodoRegex);
if(!match || match.length !== 4)
{
alert("modify operation input format is wrong");
return;
}
match[3] = match[3].trim(); // delete the front and back spaces
var modifyElem = document.getElementById("todo-" + match[1]);
if(!modifyElem) {
alert("Failed to get modify element");
return; // to prevent future error
}
match[2].toLocaleLowerCase(); // upper and lower input texts are both supported
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];
}
else if(match[2] === "content") {
const elem = modifyElem.getElementsByTagName("p");
elem[0].textContent = match[3];
} else if(match[2] === "deadline"){
const elem = modifyElem.getElementsByTagName("i");
var date = match[3].split("/");
if(date.length !== 3)
{
alert("duedate input format is wrong");
return;
}
date[0] = date[0].trim(); // spaces are allowed in input date format " yyyy / MM / dd "
date[1] = date[1].trim();
date[2] = date[2].trim();
elem[0].textContent = date[0] + "/" + date[1] + "/" + date[2];
}
}
else if(resolveTodoRegex.test(inputContent)) {
let match = inputContent.match(resolveTodoRegex);
if(!match || match.length !== 1)
{
alert("Failed to get resolve element");
return;
}
resolveTodo(parseInt(match[0]));
}
else if(deleteTodoRegex.test(inputContent)) {
let match = inputContent.match(deleteTodoRegex);
if(!match || match.length !== 1)
{
alert("Failed to get delete element");
return;
}
deleteTodo(parseInt(match[0]));
}
else if(updateTodoRegex.test(inputContent)) {
for(var i = 1; i < id; i++) {
updateOverdueStatus(i);
}
}
else {
var s = "operation \"" + inputContent.split(" ")[0] + "\" is not supported";
alert(s);
}
}
})
......
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