Saya mencipta Aplikasi Todo dalam Typescript Dengan Save Todos dalam Storan Tempatan-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Saya mencipta Aplikasi Todo dalam Typescript Dengan Save Todos dalam Storan Tempatan

Jul 17, 2024 am 08:42 AM

I create a Todo Application in Typescript With Save Todos in Local Storage

kami menggunakan projek vanilla vite dengan skrip taip dalam ini untuk memahami skrip taip dan menggunakan storan setempat untuk menyimpan todos.

&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
     &lt;meta charset="UTF-8" /&gt;
     &lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
     &lt;title&gt;Vite + TS&lt;/title&gt;
     &lt;link rel="stylesheet" href="./src/style.css"&gt;
&lt;/head&gt;

&lt;body&gt;
     &lt;div id="app"&gt;

          &lt;div class="container"&gt;

               &lt;h1&gt;My Todo List&lt;/h1&gt;

          &lt;form id="myForm"&gt;
               &lt;input required type="text" id="inputTodo" placeholder="Enter Todo"&gt;
               &lt;button type="submit" id="btnSubmit"&gt;Add&lt;/button&gt;
          &lt;/form&gt;

          &lt;div class="todos-container"&gt;
               &lt;!-- &lt;div class="todo-item"&gt;
                    &lt;input id="isComplete" type="checkbox"&gt;
                    &lt;p id="todoText"&gt;my today todo&lt;/p&gt;
                    &lt;button id="btnDelete"&gt;X&lt;/button&gt;
               &lt;/div&gt; --&gt;
          &lt;/div&gt;

     &lt;/div&gt;

&lt;/div&gt;

     &lt;script type="module" src="/src/main.ts"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;

Salin selepas log masuk

.container{
     max-width: 700px;
     margin-inline: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

form #inputTodo{
     padding: 8px 15px;
}

form #btnSubmit{
     padding: 8px 15px;
}

.todos-container{
     padding: 10px;
     width: 100%;
     width: fit-content;
}

.todo-item{
     padding: 5px;
     border: 1px solid gray;
     gap: 20px;
     width: 100%;
     display: flex;
     align-items: center;
}

.textCut{
     text-decoration: line-through;
}

Salin selepas log masuk

interface Todo{
     content: string,
     isComplete: boolean,
     readonly id:string
}

let todos:Todo[] = [];

const todosContainer = document.querySelector('.todos-container')!;

function genrateTodo(id: string, content:string, isComplete:boolean){
     const itemContainer:HTMLDivElement = document.createElement('div');
     itemContainer.classList.add('todo-item');

     // checkbox
     const checkbox: HTMLInputElement = document.createElement('input');
     checkbox.type = "checkbox";
     checkbox.checked = isComplete
     checkbox.onchange = () =&gt; {
          todos.find(todo =&gt; {
               if(todo.id === id) todo.isComplete = checkbox.checked;

               // save updated todo
               localStorage.setItem('todos', JSON.stringify(todos));
          })
          todoText.className = checkbox.checked ? 'textCut' : '';
     }

     // paragraph content
     const todoText:HTMLParagraphElement = document.createElement('p');
     todoText.innerHTML = content;
     todoText.className = isComplete ? 'textCut' : '';

     // delete button
     const btnDelete: HTMLButtonElement = document.createElement('button');
     btnDelete.textContent = 'X';
     btnDelete.onclick = () =&gt; {
          todos = todos.filter(todo =&gt; todo.id !== id);
          localStorage.setItem('todos', JSON.stringify(todos));
          renderTodos(todos);
     }

     itemContainer.append(checkbox, todoText, btnDelete);
     todosContainer.appendChild(itemContainer);

}

// add todo
const form = document.getElementById('myForm')!;
form.onsubmit = (e: SubmitEvent) =&gt; {
     e.preventDefault();
     const inputElement = document.getElementById('inputTodo') as HTMLInputElement;
     let value:string = inputElement.value;

     const newTodo:Todo = {
          id: String(Math.random() * 1000),
          content: value,
          isComplete: false
     }

     todos.push(newTodo);
     inputElement.value = "";

     localStorage.setItem('todos', JSON.stringify(todos));

     renderTodos(todos);
}


function renderTodos(todos: Todo[]){
     todosContainer.innerHTML = "";
     todos.forEach(todo =&gt; {
          genrateTodo(todo.id, todo.content, todo.isComplete);
     })
}

const jsonTodos = localStorage.getItem('todos')!;
const storedTodos : Todo[] = JSON.parse(jsonTodos);
todos = storedTodos;
renderTodos(todos);

Salin selepas log masuk

Atas ialah kandungan terperinci Saya mencipta Aplikasi Todo dalam Typescript Dengan Save Todos dalam Storan Tempatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn