자바스크립트로 TODO 만들기

[clique aqui para português]

작업 목록은 우리가 할 일을 나열하고 구성할 수 있도록 하여 우리의 허드렛일에 많은 도움이 되는 것이므로 HTML과 JAVASCRIPT 및 CSS의 작은 클래스만 사용하여 작업 목록을 만들 것입니다.

암호

먼저 인터페이스를 만들고 HTML만 사용하여 간단한 작업을 수행합니다.

<h1>Lista de tarefas</h1>

<form name="form_main">
  <label for="task">Tarefa: </label> 
  <input type="text" name="task" id="task" /> <br />
  <button type="button" onclick="add()">Add</button>
</form>

<fieldset>
  <legend>Tarefas:</legend>
  <ul>
    <li>Limpar casa</li>
    <li>Outras</li>
  </ul>
</fieldset>

HTML 구조에서 작업을 수신하기 위한 입력이 생성되었으며 add() 기능을 트리거하는 버튼도 생성되었습니다.

완료된 작업에 '줄무늬' 효과를 주기 위해 CSS 클래스도 필요합니다.

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

checked 클래스는 작업을 완료할 때 텍스트를 '줄무늬'로 정의하는 데만 사용됩니다.

이제 add() 함수를 만들어 봅시다.

function add() {
  let li = document.createElement('LI');
  let input_value = document.form_main.task.value;
  let input_text = document.createTextNode(input_value);

  li.appendChild(input_text);
  document.querySelector('ul').appendChild(li);
  document.form_main.task.value = "";

  createCloseButton(li);
}

add() 함수는 목록에 새 요소(작업)를 만듭니다.
add() 함수 내에서 createCloseButton() 함수가 호출됩니다. 이 함수는 지금 생성할 함수입니다.

function createCloseButton(li) {
  let span = document.createElement("SPAN");
  let txt = document.createTextNode("\u00D7");

  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  span.onclick = () => span.parentElement.style.display = "none";
}

createCloseButton 함수에서 span 를 사용하여 x 를 생성합니다. 요소를 클릭하면 숨겨집니다.

목록에 이미 일부 항목이 있으므로 모든 li를 살펴보고 닫기 버튼을 추가하는 루프를 만듭니다.

마지막으로 클릭 이벤트를 allli에 추가하고 클릭 시 클래스 추가checked를 추가합니다.

document.querySelectorAll('li').forEach(createCloseButton);

document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI')
    e.target.classList.toggle('checked');
});

그렇게 간단하게 준비했습니다.

데모

아래에서 작업하는 전체 프로젝트를 참조하세요.

유튜브

시청을 선호하는 경우 youtube(PT-BR의 비디오)에서 개발 내용을 확인합니다.

읽어 주셔서 감사합니다!

질문, 불만 사항 또는 팁이 있는 경우 여기에 의견을 남길 수 있습니다. 기꺼이 답변해 드리겠습니다!

😊😊 또 만나요! 😊😊