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

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

王林

Lepaskan： 2024-07-17 08:42:28

asal

1102 orang telah melayarinya

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.

<!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>

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 = () => {
          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);

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!