Vanilla JavaScript를 사용하여 TODO 앱 빌드

20555 단어 beginnerswebdevjavascripttutorial
TODO 앱을 구축하는 것은 소프트웨어 도구의 개념을 이해하는 매우 기본적이지만 철저한 방법입니다.

이 자습서에서는 논리에 JavaScript 을 사용하고 스타일에 Bootstrap 을 사용하여 TODO 앱을 빌드합니다.



앱을 사용해 보십시오 here .

다음 단계를 따릅니다.



부트스트랩으로 사용자 인터페이스(UI) 구축


  • Bootstrap's Starter Template 로 시작
  • 사용자가 TODO 항목을 입력할 수 있도록 form를 만듭니다.
  • hold all todos에 대한 정렬되지 않은 목록을 만듭니다.
  • 할 일 항목에 대한 확인란을 사용하여 만듭니다list element.
  • Bootstrap의 그리드 시스템을 사용하여 UI 만들기responsive

    • JavaScript로 기능 처리


  • 모든 TODO를 JSON (JavaScript Object Notation) 형식으로 표현하는 방식으로 데이터의 구조를 정의합니다.
  • renderTodos UI에 TODO를 표시하는 기능.
  • renderTodo 개별 TODO를 렌더링하는 도우미 함수.
  • addTodo TODO를 추가하는 기능
  • UI에서 todo에 대한 이벤트 리스너를 설정합니다submitting.
  • completeTodo TODO를 완료로 표시하는 기능

    • UI 구축




    부트스트랩starter template 복사 및 사용자 정의 스크립트 태그 추가



    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>TODO App</title>
  </head>
  <body>
    <!-- CONTENT -->
    <div></div>

    <!-- custom JS -->
    <script src="./script.js"></script>

    <!-- Bootstrap JS -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>




    사용자가 TODO 항목을 입력할 수 있도록 생성form
  • 나중에 JavaScript에서 참조할 수 있도록 id 및 text field에 고유한 form를 지정합니다.

    • <form id="todo-form">
  <!-- input field -->
  <input
    id="todo-text"
    class="form-control form-control-lg"
    type="text"
    placeholder="Your TODO"
    required
  />
  <!-- submit button -->
  <input type="submit" class="btn btn-primary my-3 w-100" />
</form>




    모든 할일을 담기 위해 정렬되지 않은 목록 만들기



    <ul id="todo-list" class="list-unstyled"></ul>




    todo 항목에 대해 checkbox을 사용하여 목록 요소를 만듭니다.



    <li>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" />
    <label class="form-check-label" for="flexCheckDefault"> TODO Text </label>
  </div>
</li>




    부트스트랩을 사용하여 UI 반응형으로 만들기grid system



    <div class="container">
  <div class="row row-cols-1 row-cols-sm-1 row-cols-md-2">
    <div class="col">
      <!-- todo form goes here -->
    </div>
    <div class="col">
      <!-- todo list goes here -->
    </div>
  </div>
</div>


    JavaScript를 사용하여 기능 처리




    todos에 대해 array of objects을 생성하여 시작하겠습니다.



    var todos = [
  {
    id: 0,
    text: "subscribe to KJSCE codecell",
    complete: false,
  },
  {
    id: 1,
    text: "Star https://github.com/pettiboy/react-ui-scrollspy on GitHub",
    complete: false,
  },
];




    DOM에서 필요한 모든 요소를 ​​선택합니다.



    const list = document.getElementById("todo-list");
const form = document.getElementById("todo-form");
const todoText = document.getElementById("todo-text");




    이것들todos을 우리JS에서 DOM으로 렌더링해봅시다.



    /*
loops over each todo in todos and if the task is not completed yet
calls the renderTodo function to render it to the DOM
*/
function renderTodos() {
  emptyTodos();
  todos.forEach((todo) => {
    if (todo.complete === false) {
      renderTodo(todo);
    }
  });
}

/*
takes a todo object as input and appends the innerHTML 
of the unordered list with that todo
*/
function renderTodo(todo) {
  list.innerHTML += `
        <li>
          <div class="form-check">
            <input onclick="completeTodo(${todo.id});" class="form-check-input" type="checkbox" />
            <label class="form-check-label" for="flexCheckDefault">
              ${todo.text}
            </label>
          </div>
        </li>
      `;
}




    주어진 todo 함수를 todos라는 객체 배열에 추가하는 함수를 작성해 보겠습니다.



    function addTodo(todo) {
  todos.push({
    id: todo.id,
    text: todo.text,
    complete: todo.complete,
  });

  // render that todo to the DOM
  renderTodo(todo);
}




    todo 제출을 위한 설정Event Listener


    // listen for form to be submitted
form.addEventListener("submit", (e) => {
  e.preventDefault();

  addTodo({
    id: todos.length + 1,
    text: todoText.value,
    complete: false,
  });

  // reset value of input field
  todoText.value = "";
});




    todo를 completed로 표시하는 함수를 작성해 보겠습니다.



    function completeTodo(removeId) {
  // Find index of specific object using findIndex method.
  todoIndex = todos.findIndex((todo) => todo.id == removeId);

  // Update object's name property.
  todos[todoIndex].complete = true;

  // Just to wait for a sec before re rendering
  setTimeout(function () {
    saveTodosInMemory();
    renderTodos();
  }, 1000);
}




    todos를 localStorage에 저장합니다.



    // on page load - the following functions will run
todos = JSON.parse(localStorage.getItem("todosInMemory")) || [];
renderTodos();


    이제 JavaScript를 사용하여 TODO 앱을 빌드할 수 있으므로 React 이라는 인기 있는 프레임워크를 사용하여 이 앱을 빌드하고 Vanilla JavaScript를 사용하여 코드 작성과 관련된 다양한 문제를 비교하고 해결하는 방법을 살펴보겠습니다.

    이 튜토리얼의 비디오 버전을 보려면 내가 KJSCE Codecell's Month Of MERN에서 제공한 것을 확인하십시오.

    GitHub 에서 코드를 찾을 수도 있습니다.
    【AWS】EC2 apache에 파일을 업로드하는 방법&에러가 발생했을 때의 대처
    React의 보호된 경로

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage