스파르타코딩클럽 - 항해99/항해99 Chapter3 - react 주특기 기본

Chapter3 - 1주차 숙제 (21.11.16)

Ming 2021. 11. 16. 03:24

1. 기획서를 보고, 새로운 오늘의 TODO 페이지를 만들기

 

<html lang="ko">

<head>
  <style>
    .title {
      color: blue;
      text-decoration: underline;
    }

    .wrap {
      display: flex;
      align-items: center;
    }

    .mini-card {
      border: 1px solid black;
      border-radius: 5px;
      padding: 2em;
      margin: 1em;
    }

    button {
      width: 80px;
    }

    button:hover {
      background-color: coral;
    }
  </style>
</head>

<body>
  <h1 class="title">오늘의 할 일</h1>
  <div class="wrap">
    <div class="card-list">

    </div>
    <div class="add"></div>

    <input id="add-input" />
    <button onClick="addMini()">추가!</button>
  </div>

  <script>
    function completeTodo(e) {
      console.log('완료했어')
      console.log(e.target) //event 속성을 사용해 콘솔에서 자신의 위치를 찾고 부모요소 경로 찾기
      e.target.parentElement.style.backgroundColor = "gray"
    }

    function addMini() {
      const new_card = document.createElement("div"); //카드형태 만들어주기
      new_card.className = "mini-card"; //newcard 클래스 네임 지어주기

      const title = document.createElement("h3"); //타이틀 만들어주기
      title.textContent = document.getElementById("add-input").value; //타이틀에 들어가는 텍스트 값

      const button = document.createElement("button"); //버튼 생성
      button.textContent = "완료!" //버튼 텍스트 생성

      button.addEventListener("click", completeTodo); //완료! 눌렀을때 이벤트 만들기

      new_card.appendChild(title); //타이틀 부모요소를 따르게 만들기
      new_card.appendChild(button); //버튼 부모요소를 따르게 만들기
      document.getElementsByClassName("card-list")[0].appendChild(new_card) //부모, 자식 관계 형성
    }
  </script>
</body>

</html>

결과물 

 

 

 

 

2. CRA를 사용해 리액트 프로젝트를 새로 만들어보고, 내 이름을 화면에 하나, 콘솔에 하나 띄워서 캡쳐하기