로컬 저장소에 Todos 저장을 사용하여 Typescript에서 Todo 애플리케이션을 생성합니다.-CSS 튜토리얼-php.cn

로컬 저장소에 Todos 저장을 사용하여 Typescript에서 Todo 애플리케이션을 생성합니다.

王林

풀어 주다： 2024-07-17 08:42:28

원래의

1082명이 탐색했습니다.

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

여기서 TypeScript를 이해하기 위해 바닐라 vite 프로젝트를 TypeScript와 함께 사용하고, 할 일을 저장하기 위해 로컬 저장소를 사용합니다.

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

로그인 후 복사

위 내용은 로컬 저장소에 Todos 저장을 사용하여 Typescript에서 Todo 애플리케이션을 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!