Nothing Special   »   [go: up one dir, main page]
Scribd
Upload
27 views4 pages

Scriccpt

The document defines functions for managing a todo list application. It includes functions for generating IDs, objects, finding/updating items, and saving/loading from local storage. It also defines event listeners for form submission and re-rendering the lists.

Uploaded by

Endra Priyanto
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
27 views4 pages

Scriccpt

The document defines functions for managing a todo list application. It includes functions for generating IDs, objects, finding/updating items, and saving/loading from local storage. It also defines event listeners for form submission and re-rendering the lists.

Uploaded by

Endra Priyanto
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

/**

* [
* {
* 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);

document.dispatchEvent(new Event(RENDER_EVENT));
saveData();
}

function addTaskToCompleted(todoId /* HTMLELement */) {


const todoTarget = findTodo(todoId);

if (todoTarget == null) return;

todoTarget.isCompleted = true;
document.dispatchEvent(new Event(RENDER_EVENT));
saveData();
}

function removeTaskFromCompleted(todoId /* HTMLELement */) {


const todoTarget = findTodoIndex(todoId);

if (todoTarget === -1) return;

todos.splice(todoTarget, 1);
document.dispatchEvent(new Event(RENDER_EVENT));
saveData();
}

function undoTaskFromCompleted(todoId /* HTMLELement */) {

const todoTarget = findTodo(todoId);


if (todoTarget == null) return;

todoTarget.isCompleted = false;
document.dispatchEvent(new Event(RENDER_EVENT));
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);
}
}
});

You might also like