1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
document.addEventListener("DOMContentLoaded", () => {
loadQuests();
document.getElementById("new-quest").addEventListener("keypress", handleEnterKey(addQuest));
});
const curry = fn => (...args) =>
args.length >= fn.length
? fn(...args)
: curry(fn.bind(null, ...args));
const addQuest = () => {
const questText = getInputValue("new-quest");
if (!validateText(questText)) return;
const quest = createQuestObject(questText);
saveQuest(quest);
clearInput("new-quest")();
renderQuests();
};
const getInputValue = curry((id) => document.getElementById(id).value);
const validateText = text => text.trim() !== "";
const createQuestObject = text => ({
id: Date.now(),
text,
status: "new",
dateCreated: new Date().toISOString(),
dateCompleted: null
});
const saveQuest = quest => {
const quests = getStoredQuests().concat([quest]);
localStorage.setItem("quests", JSON.stringify(quests));
};
const getStoredQuests = () =>
JSON.parse(localStorage.getItem("quests")) || [];
const clearInput = curry((id) => () =>
document.getElementById(id).value = "");
const loadQuests = () => renderQuests();
const renderQuests = (showCompleted = false) => {
const quests = getStoredQuests();
const sortedQuests = sortByDateCreated(quests);
const filteredQuests = filterQuests(showCompleted, sortedQuests);
renderQuestList(filteredQuests);
};
const sortByDateCreated = quests =>
quests.sort((a, b) => new Date(b.dateCreated) - new Date(a.dateCreated));
const filterQuests = (showCompleted, quests) =>
quests.filter(quest => showCompleted || quest.status !== "complete");
const renderQuestList = quests => {
const questList = document.getElementById("quest-list");
questList.innerHTML = "";
quests.forEach(renderQuest(questList));
};
const renderQuest = curry((questList, quest) => {
const questDiv = document.createElement("div");
questDiv.className = `quest ${quest.status}`;
questDiv.innerHTML = `
<span contenteditable="true" onblur="editQuest(${quest.id}, this.innerText)">${quest.text}</span>
<span>
${quest.status !== "complete" ? `<button onclick="toggleStatus(${quest.id})">${getStatusButtonText(quest.status)}</button>` : ''}
${quest.status === "complete" ? `<button onclick="revertQuest(${quest.id})">Revert</button><button onclick="deleteQuest(${quest.id})">Delete</button>` : ''}
</span>
`;
questList.appendChild(questDiv);
});
const getStatusButtonText = status =>
status === "new" ? "Start Quest" : "Complete Quest";
const toggleStatus = id => {
const quests = getStoredQuests();
const updatedQuests = updateQuestStatus(id, quests);
saveAllQuests(updatedQuests);
renderQuests();
};
const updateQuestStatus = (id, quests) =>
quests.map(quest =>
quest.id === id ? updateQuest(quest) : quest
);
const updateQuest = quest => {
if (quest.status === "new") return { ...quest, status: "in-progress" };
if (quest.status === "in-progress")
return { ...quest, status: "complete", dateCompleted: new Date().toISOString() };
return quest;
};
const revertQuest = id => {
const quests = getStoredQuests();
const updatedQuests = revertQuestStatus(id, quests);
saveAllQuests(updatedQuests);
renderQuests(true);
};
const revertQuestStatus = (id, quests) =>
quests.map(quest =>
quest.id === id ? { ...quest, status: "in-progress", dateCompleted: null } : quest
);
const deleteQuest = id => {
const quests = getStoredQuests();
const updatedQuests = removeQuest(id, quests);
saveAllQuests(updatedQuests);
renderQuests(true);
};
const removeQuest = (id, quests) =>
quests.filter(quest => quest.id !== id);
const saveAllQuests = quests =>
localStorage.setItem("quests", JSON.stringify(quests));
const editQuest = (id, newText) => {
const quests = getStoredQuests();
const updatedQuests = updateQuestText(id, newText, quests);
saveAllQuests(updatedQuests);
};
const updateQuestText = (id, newText, quests) =>
quests.map(quest =>
quest.id === id ? { ...quest, text: newText } : quest
);
const handleEnterKey = curry((fn, event) => {
if (event.key === "Enter") fn();
});
const toggleCompleted = () => {
const showCompleted = getShowCompletedState();
renderQuests(showCompleted);
toggleCompletedButtonText(showCompleted);
};
const getShowCompletedState = () =>
document.querySelector("button[onclick='toggleCompleted()']").innerText === "View Completed Quests";
const toggleCompletedButtonText = showCompleted =>
document.querySelector("button[onclick='toggleCompleted()']").innerText = showCompleted ? "Hide Completed Quests" : "View Completed Quests";
|