비전공자 개발일기

Javascript - list 본문

Javascript

Javascript - list

HiroDaegu 2021. 11. 2. 00:10
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LIST</title>
    <link rel="stylesheet" href="style.css" />
    <script defer src="main.js"></script>
  </head>
  <body>
    <div class="container1">
      <h1 id="title">To Do List</h1>
      <button id="add-btn">Add list</button>
    </div>
    <div class="container2">
      <ul id="list">
        <li>제목: 1</li>
        <li>제목: 2</li>
        <li>제목: 3</li>
        <li>제목: 4</li>
      </ul>
    </div>
  </body>
</html>
body {
  text-align: center;
}

#add-btn {
  padding: 5px 10px;
  border: 0;
  background: #f80; color: #fff;
  border-radius: 5px;
}

.container1 {
  border: 5px solid #2244ff;
  border-radius: 20px;
  width: 30%;
  margin: 10px auto;
  background-color: antiquewhite;
  color: #a52a2a;
}

.container2 {
  border: 2px solid #000;
  border-radius: 20px;
  width: 70%;
  margin: 10px auto;
  background-color: #00bfff;
  color: #5f92a0;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  border-bottom: 1px solid #999;
  padding: 5px 0;
}

.active {
  background: #abc;
}
const title = document.querySelector("#title");
const list = document.querySelector("#list");
const li = list.getElementsByTagName("li");
const addBtn = document.querySelector("#add-btn");


list.addEventListener('click', activeItem);

function activeItem(event) {
  // li 클릭 시, 제목에 표시
  if(event.target.nodeName === "LI") {
    title.innerHTML = event.target.innerText;
  
  // 목록 스타일 초기화
  for(let i = 0 ; i < event.target.parentNode.children.length ; i++) {
    event.target.parentNode.children[i].removeAttribute("class");
  }
  
  // 클릭한 목록 스타일 지정
  event.target.setAttribute("class", "active");
  }
} 

addBtn.addEventListener('click', () => {
  let txt = prompt("Insert Title");
  list.innerHTML += `<li> ${txt} <button class="delBtn"> x </li>`;
})
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript - Update CSS  (0) 2021.11.04
Javascript - search  (0) 2021.11.03
Javascript - lightBox  (0) 2021.11.01
Javascript - Calendar2  (0) 2021.10.31
Javascript - Theme Clock  (0) 2021.10.30
'Javascript' Related Articles more