고정 헤더 영역
상세 컨텐츠
본문
HTML 코드
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@600&family=Patrick+Hand&family=Patua+One&display=swap"
rel="stylesheet"
/>
<title>todo list App</title>
<script></script>
</head>
<body>
<h1 class="title">To Do LIST</h1>
<hr />
<div class="todo-list">
<div class="list-head">
<input type="text" class="entered-list" />
<div></div>
<button class="add-list">ADD</button>
</div>
<div class="tasks">
<div class="item completed">
<p>new item here</p>
<div class="item-btn">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>CSS코드
* {
margin: 0;
padding: 0;
}
body {
background-color: #ffc0cb;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 80vh;
width: 100vw;
font-family: "Encode Sans", sans-serif;
}
.title {
font-size: 30px;
font-weight: 600;
color: black;
letter-spacing: 1px;
margin: 30px 0;
}
.todo-list {
width: 450px;
padding: 20px;
box-shadow: 0 10px 40px rgb(0, 0, 0, 0.1);
border-radius: 10px;
}
.list-head {
display: flex;
justify-content: center;
gap: 10px;
}
.entered-list {
padding: 10px;
border-radius: 10px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
}
.add-list {
padding: 10px 20px 10px 20px;
border: none;
border-radius: 10px;
background-color: hotpink;
outline: none;
font-size: 16px;
color: beige;
cursor: pointer;
}
.tasks {
width: 100%;
margin-top: 30px;
}
.item {
background-color: bisque;
padding: 10px;
border-radius: 5px;
box-shadow: 0 10px 30px rgb(0, 0, 0, 0.1);
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.item p {
font-size: 16px;
font-weight: 400;
color: #111;
letter-spacing: 1px;
}
.item.completed p {
text-decoration: line-through;
color: #111;
}
.item-btn {
display: flex;
align-items: center;
gap: 10px;
}
.item-btn svg {
color: deeppink;
font-size: 20px;
cursor: pointer;
}JAVASCRIPT 코드
let input = document.getElementById("entered-list"); //할일 입력
let addBtn = document.getElementById("add-list"); //버튼 추가하기
let tasks = document.getElementById("tasks"); //추가된 할일
addBtn.addEventListener("click", function () {
if (!input.value)
// 할 일 입력창에 내용이 입력되지 않으면 alert 발생
alert("내용을 입력해 주세요!");
else {
var list = document.createElement("p"); //<li>태그 생성
list.innerText = input.value; // <li>입력된 할 일</li>
tasks.appendChild(list); // 할 일 리스트창에 자식으로 붙이기
}
list.addEventListener("click", function () {
// 만들어진 list에 클릭 이벤트가 발생하면 줄 긋기
list.style.textDecoration = "line-through";
});
list.addEventListener("dblclick", function () {
// list에 더블클릭 이벤트가 발생하면 할 일 리스트창에서 지우기
tasks.removeChild(list);
});
});
1. 텍스트 입력 창에 글자를 입력하고 버튼을 누르면 할일이 추가됨
2. 추가된 할일에 마우스로 클릭하면 줄이 그어짐
3. 추가된 할 일에 마우스를 두번 클릭하면 삭제
고민해볼 점
1. var list = document.createElement("p") //var를 넣으면 삭제가 됨. 하지만, const, let를 쓰면 삭제가 안되거나 줄이 그어지지 않음
2. var list = document.createElement(" li, h2, p ") //li, p, h2, span, button 등등 넣어봤지만
옆으로 출력되거나, 이어서 나타남. li, h2, p태그가 원하는 결과가 나옴.
2-1. 2번과 같은 상황일 때 조금 간편하게 다가가려면 CSS에서 flex로 묶으면 할일이 추가될 때 수월하지 않을까를 고민해 봄.
반응형
'WEB-Front end > *웹사이트 만들기 & 토이 프로젝트' 카테고리의 다른 글
| [React, node.js] 2차 프로젝트 Trello만들기 (0) | 2024.03.06 |
|---|---|
| unsplash API를 활용해서 이미지 검색 어플리케이션 만들기 (0) | 2024.02.13 |
| [웹사이트 만들기] Quora html, css 따라해보기 (0) | 2023.07.27 |
| 유튜브 틀 잡기(1) (0) | 2023.04.22 |
| [스파르타 코딩클럽] 나만의 프로필 링크 페이지 만들기 무료강의 1일차 (0) | 2022.07.03 |
댓글 영역