


Saya mencipta Aplikasi Todo dalam Typescript Dengan Save Todos dalam Storan Tempatan
Jul 17, 2024 am 08:42 AMkami menggunakan projek vanilla vite dengan skrip taip dalam ini untuk memahami skrip taip dan menggunakan storan setempat untuk menyimpan todos.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + TS</title> <link rel="stylesheet" href="./src/style.css"> </head> <body> <div id="app"> <div class="container"> <h1>My Todo List</h1> <form id="myForm"> <input required type="text" id="inputTodo" placeholder="Enter Todo"> <button type="submit" id="btnSubmit">Add</button> </form> <div class="todos-container"> <!-- <div class="todo-item"> <input id="isComplete" type="checkbox"> <p id="todoText">my today todo</p> <button id="btnDelete">X</button> </div> --> </div> </div> </div> <script type="module" src="/src/main.ts"></script> </body> </html>
.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; }
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 = () => { todos.find(todo => { 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 = () => { todos = todos.filter(todo => 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) => { 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 => { genrateTodo(todo.id, todo.content, todo.isComplete); }) } const jsonTodos = localStorage.getItem('todos')!; const storedTodos : Todo[] = JSON.parse(jsonTodos); todos = storedTodos; renderTodos(todos);
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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda

Muat naik fail dengan multer di node.js dan ekspres

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)
