[ 2주차 심화 과제 ] WEB 💛 TO DO MATE 🌈 없애보자!!!!!

[seojisoosoo]

✨ 구현 기능 명세

✅ 카테고리별 할일 추가

1. 모달안의 input에 자동 포커스 되는 기능이 있습니다.
2. 연달아 추가되며 , 중복되는 할일을 추가되지 않습니다.

✅ Vanilla JavaScript로 SPA구현하기

1. 바닐라자스 → 라우터 구현해보기

✅ MY 페이지 : Drag and Drop

1. 할 일 카테고리들이 존재
2. 드래그앤 드랍으로 카테고리 순서변경
3. 새로고침해도 유지
   1. localStorage
4. 메인에도 반영

🌼 PR Point

counter.js

• 아래와 같이 input에 자동 포커스 + 입력 후에는 value가 빈 값이 되도록 했어요

  let input_tag = document.querySelector("input");
  input_tag.value = "";
  input_tag.focus();

• 이미 일정이 있는 경우를 파악하고, 이미 있는 일정은 alert창을 띄웠어요.

  data.lists.map(({ todos }) => array.push(...todos));

  if (!array.includes(input)) {
    tab.innerHTML += `
    <li class="list__column__new">
      <label for="${id}__input-text" onclick="solvedTodo('${id}__input-text')">🎁 </label>
      <input type="checkbox" id="${id}__input-text" />
      <p class="list__column__text">${input}</p>
    </li>
  `;
  } else {
    alert("이미 있는 일정입니다");
  }

App.js

아래와 같이 path를 나누고 라우팅을 했어요!

const ROUTE_LIST = [
  { path: "/", element: Home },
  { path: "/mycategory", element: MyCategory },
];

myCategory.js

드래그앤 드랍을 구현하고 아래와 같이 따로 배열을 만들어서 로컬스토리지에 저장을 했습니다.

   const storeList = [];
    {
      [...e.target.parentElement.children].map(({ innerText }) => storeList.push(innerText));
    }

    window.localStorage.setItem("categorys", storeList);

🥺 소요 시간, 어려웠던 점

• 4h

🌈 구현 결과물

2023-06-13.1.06.04.mov