Scriccpt

/**
* [
* {
* id: <int>
* task: <string>
* timestamp: <string>
* isCompleted: <boolean>
* }
* ]
*/
const todos = [];
const RENDER_EVENT = 'render-todo';
const SAVED_EVENT = 'saved-todo';
const STORAGE_KEY = 'TODO_APPS';
function generateId() {
return +new Date();
}
function generateTodoObject(id, task, timestamp, isCompleted) {

return {
id,
task,
timestamp,
isCompleted
};
}
function findTodo(todoId) {
for (const todoItem of todos) {
if (todoItem.id === todoId) {
return todoItem;
}
}
return null;
}
function findTodoIndex(todoId) {
for (const index in todos) {
if (todos[index].id === todoId) {
return index;
}
}
return -1;
}
/**
* Fungsi ini digunakan untuk memeriksa apakah localStorage didukung oleh browser
atau tidak
*
* @returns boolean
*/
function isStorageExist() /* boolean */ {
if (typeof (Storage) === undefined) {
alert('Browser kamu tidak mendukung local storage');
return false;
}
return true;
}
/**
* Fungsi ini digunakan untuk menyimpan data ke localStorage
* berdasarkan KEY yang sudah ditetapkan sebelumnya.
*/
function saveData() {
if (isStorageExist()) {
const parsed /* string */ = JSON.stringify(todos);
localStorage.setItem(STORAGE_KEY, parsed);
document.dispatchEvent(new Event(SAVED_EVENT));
}
}
/**
* Fungsi ini digunakan untuk memuat data dari localStorage
* Dan memasukkan data hasil parsing ke variabel {@see todos}
*/
function loadDataFromStorage() {
const serializedData /* string */ = localStorage.getItem(STORAGE_KEY);
let data = JSON.parse(serializedData);
if (data !== null) {

for (const todo of data) {
todos.push(todo);
}
}
document.dispatchEvent(new Event(RENDER_EVENT));
}
function makeTodo(todoObject) {
const {id, task, timestamp, isCompleted} = todoObject;
const textTitle = document.createElement('h2');

textTitle.innerText = task;
const textTimestamp = document.createElement('p');

textTimestamp.innerText = timestamp;
const textContainer = document.createElement('div');

textContainer.classList.add('inner');
textContainer.append(textTitle, textTimestamp);
const container = document.createElement('div');

container.classList.add('item', 'shadow')
container.append(textContainer);
container.setAttribute('id', `todo-${id}`);
if (isCompleted) {
const undoButton = document.createElement('button');

undoButton.classList.add('undo-button');
undoButton.addEventListener('click', function () {
undoTaskFromCompleted(id);
});
const trashButton = document.createElement('button');

trashButton.classList.add('trash-button');
trashButton.addEventListener('click', function () {
removeTaskFromCompleted(id);
});
container.append(undoButton, trashButton);
} else {
const checkButton = document.createElement('button');

checkButton.classList.add('check-button');
checkButton.addEventListener('click', function () {
addTaskToCompleted(id);
});
container.append(checkButton);
}
return container;
}
function addTodo() {
const textTodo = document.getElementById('title').value;
const timestamp = document.getElementById('date').value;
const generatedID = generateId();

const todoObject = generateTodoObject(generatedID, textTodo, timestamp, false);
todos.push(todoObject);
saveData();
}
function addTaskToCompleted(todoId /* HTMLELement */) {

const todoTarget = findTodo(todoId);
if (todoTarget == null) return;
todoTarget.isCompleted = true;
saveData();
}
function removeTaskFromCompleted(todoId /* HTMLELement */) {

const todoTarget = findTodoIndex(todoId);
if (todoTarget === -1) return;
todos.splice(todoTarget, 1);
saveData();
}
function undoTaskFromCompleted(todoId /* HTMLELement */) {
const todoTarget = findTodo(todoId);

if (todoTarget == null) return;
todoTarget.isCompleted = false;
saveData();
}
document.addEventListener('DOMContentLoaded', function () {
const submitForm /* HTMLFormElement */ = document.getElementById('form');
submitForm.addEventListener('submit', function (event) {

event.preventDefault();
addTodo();
});
if (isStorageExist()) {
loadDataFromStorage();
}
});
document.addEventListener(SAVED_EVENT, () => {
console.log('Data berhasil di simpan.');
});
document.addEventListener(RENDER_EVENT, function () {
const uncompletedTODOList = document.getElementById('todos');
const listCompleted = document.getElementById('completed-todos');
// clearing list item

uncompletedTODOList.innerHTML = '';
listCompleted.innerHTML = '';
for (const todoItem of todos) {

const todoElement = makeTodo(todoItem);
if (todoItem.isCompleted) {
listCompleted.append(todoElement);
} else {
uncompletedTODOList.append(todoElement);
}
}
});

Scriccpt

Uploaded by

Copyright:

Available Formats

Scriccpt

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Scriccpt

Uploaded by

Copyright:

Available Formats

/**

function generateTodoObject(id, task, timestamp, isCompleted) {

if (data !== null) {

const {id, task, timestamp, isCompleted} = todoObject;

const textTitle = document.createElement('h2');

const textTimestamp = document.createElement('p');

const textContainer = document.createElement('div');

const container = document.createElement('div');

const undoButton = document.createElement('button');

const trashButton = document.createElement('button');

const checkButton = document.createElement('button');

const generatedID = generateId();

function addTaskToCompleted(todoId /* HTMLELement */) {

if (todoTarget == null) return;

function removeTaskFromCompleted(todoId /* HTMLELement */) {

if (todoTarget === -1) return;

function undoTaskFromCompleted(todoId /* HTMLELement */) {

const todoTarget = findTodo(todoId);

const submitForm /* HTMLFormElement */ = document.getElementById('form');

submitForm.addEventListener('submit', function (event) {

// clearing list item

for (const todoItem of todos) {

You might also like