🚩 javascript

투두리스트(일정관리) 1일차 코드 작성

📝 내용

• 지금까지 배웠던 것을 응용하여 투두리스트 작성

✒️ 사용법

입력

css

@charset "UTF-8";

:root { --bgWhite: #ffffff; --bgTrasW: rgba(255,255,255,0.7); --bgTrasW2: rgba(255,255,255,0.85); --bgPink: #ffd6e1; }
body { font-family: Verdana, Geneva, Tahoma, sans-serif; background: #3257f1; background: linear-gradient(151deg,#3257f1 20%, #bcfff5 60%, #ffffff 75%, #eca7df 95%, #f897d6 100%); }
.container { border: 5px solid red; display: flex; flex-direction: column; row-gap: 2em; height: 100vh; max-width: 1000px; overflow-y: auto; padding: 3rem 1rem; margin: auto; }
.container form { display: flex; column-gap: 2rem; }
.container input { width: 100%; height: 40px; outline: none; border: none; padding: 0 10px; border-radius: 4px; background: var(--bgTrasW2); }
.container input:focus { background: var(--bgWhite); }
.container button { width: 200px; height: 40px; border-radius: 4px; outline: none; border: none; cursor: pointer; background: var(--bgTrasW); transition: .3s; }
.container button:hover { background: var(--bgWhite); }
.blocks { border: 2px solid blue; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3rem; }
.block { display: flex; flex-direction: column; row-gap: 1.5rem; background: var(--bgTrasW2); padding: 1.5rem; border-radius: 4px; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); }
.list { border: 3px solid orange; flex: 1; display: flex; flex-direction: column; row-gap: 0.8rem; }
.item { background: var(--bgWhite); padding: 1rem; border-radius: 4px; box-shadow: 0 0 3px rgba(0,0,0,0.3); }
.item:hover { background: var(--bgPink); cursor: pointer; }
@media(max-width:750px) {
  .blocks { display: flex; flex-direction: column; row-gap: 1rem; column-gap: 3rem; }
  .block { flex: 1; }
}

html

<div class="container">
  <form>
    <input type="text" placeholder="할 일을 입력하세요" required>
    <button type="submit">Add</button>
  </form>
  <div class="blocks">
    <div class="block">
      <h2>🚩 To do</h2>
      <div id="todo" class="list">
        <div id="" class="item">
          입력내용1
        </div>
      </div>
    </div>
    <div class="block">
      <h2>🚴‍♀️ Doing</h2>
      <div id="doing" class="list">

      </div>
    </div>
    <div class="block">
      <h2>✅ Done</h2>
      <div id="done" class="list">

      </div>
    </div>
  </div>
</div>

js

const form = document.querySelector("form");

// * 1-2. item을 넣을 html 태그를 만드는 함수 정의
const createElement = (listId, newTodo) => { // listId = .list (html class), 아래 실행구에서 넘어온 newTodo
  const lists = document.querySelector(`#${listId}`); // todo, doing, done 중 뭐가 들어올지 모르기 때문
  const item = document.createElement("div"); // div 생성

  item.id = newTodo.id; // 받아온 id를 새로 만든 item의 id에 넣음
  item.innerText = newTodo.text; // item 안에 글씨 넣음
  item.classList.add("item"); // item 클래스 추가
  console.log(item); // <div id="0a5f7a81-c8f4-4be0-a842-2c8634fe79e5" class="item">ㅎㅇ</div>

  lists.appendChild(item); // item을 부모의 마지막 자식으로(위치) 붙임
  // * 1-2. 화면에 입력되도록 함
}

// * 1. 입력값을 받아오고 새로운 아이템을 만들어주는 함수 
// 할 일. 오브젝트. 입력할 내용 등을 만드는곳. 
const createTodo = (event) => {
  event.preventDefault(); // 자동으로 새로고침되는 효과를 막아줌
  // console.log("createTodo");
  const input = document.querySelector("input"); 
  const id = uuidv4(); // uuid라이브러리를 연결하여 사용 (id를 랜덤으로 부여)
  // const text = input.value; // 입력 창 내용을 변수에 저장

  // ? newTodo
  const newTodo = {  // object 안에 집어넣을 것
    id, // 새로 만든 id값    // key: value가 같은 경우 축약 가능
    text: input.value, // 받아온 value값   // 입력 창 내용을 저장 
  }
  // console.log(newTodo.id, newTodo.text);


  // * 1-2. 입력한 내용이 목록에 추가되도록 하는 곳. item을 넣을 html 태그를 만듦
  createElement("todo", newTodo) // item을 만드는 함수 실행, 들어갈 list의 아이디는 todo

  input.value = ""; // 입력 창 비우기
}

// * 1. 아이템을 생성하는 함수 실행
form.addEventListener("submit", createTodo); 
// form의 submit = 클릭, 엔터 등 
// 무조건 새로고침이 한번 되기 때문에 preventDefault 무조건 작성

---