HTML(index.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO 리스트</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="todo-app">
<input type="text" id="todo-input" placeholder="할 일을 입력하세요." />
<button id="add-button">추가</button>
<ul id="todo-list">
<!-- 리스트 아이템(li)은 JS로 동적 생성 -->
</ul>
<hr />
<p id="para"></p>
<input type="text" id="word-input">
</div>
<script src="./main.js"></script>
</body>
</html>
CSS(style.css)
body{
background-color:aliceblue;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100vh;
}
#todo-app{
background-color: #ffffff;
width: 300px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 20px;
}
#todo-input{
width: calc(100% - 24px);
padding:10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
}
#add-button{
width: 100%;
padding: 10px;
background-color: #5cb85c;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
#add-button:hover{
background-color: #4cae4c;
}
#todo-list{
list-style-type: none;
padding: 0;
}
/* 동적 생성될 li 태그 스타일링*/
.todo-item{
margin-top: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 5px;
display:flex;
justify-content: space-between;
align-items: center;
}
.todo-item:hover{
background-color: #f88888
}
.completed{
text-decoration: line-through;
color: gray;
}
main.js
/*
main.js
! 간단한 todo 리스트 만들기
- input 태그에 할 일을 입력
- 추가 버튼 클릭으로 할 일을 추가
- 할 일은 ul태그 내에 li 태그로 저장
*/
let todoInput= document.querySelector('#todo-input');
let addButton= document.querySelector('#add-button');
let todoList= document.querySelector('#todo-list');
addButton.addEventListener('click',function(){
// input 태그에 입력 값이 있는 경우
if(todoInput.value!== ''){
// 동적으로 li 태그 생성
let newItem= document.createElement('li');
newItem.textContent= todoInput.value;
// HTML요소.classList.add('클래스명')
//: 해당 요소의 class 속성으로 클래스명을 추가
newItem.classList.add('todo-item');
//생성된 li태그를 ul태그 내에 삽입
//부모요소.appendChild(자식요소)
todoList.appendChild(newItem);
//? input등과 같이 상호작용 된 데이터를 사용하고나면
//? , 해당 데이터를 초기화
todoInput.value='';
}
// 추가 버튼 클릭 시 동적으로 li태그 생성
});
todoList.addEventListener('click',(e)=>{
// e 이벤트 객체: 실제 이벤트가 발생되는 요소 target
// +) DOM요소의 태그명을 가져오기
// HTML요소.tagName >> 태그명의 알베펫이 모두 대문자표기될 것
if(e.target.tagName=== 'LI'){
//HTML 요소.classList: HTML요소의 class 속성에 접근
// .toggle('클래스명') 속성
// >> classList 중에서 해당 클래스명이 토글
// : 작성되어 있는 경우- 삭제
// : 작성되어 있지 않는 경우- 명시
e.target.classList.toggle('completed');
}
});
// !남은 글자 수 출력하기
document.addEventListener('DOMContentLoaded',()=>{
const wordInput= document.querySelector('#word-input');
const p= document.querySelector('#para');
wordInput.addEventListener('keyup', (e)=>{
const length= wordInput.value.length;
p.textContent=`글자 수: ${length}`;
})
})
결과
'프로그래밍 예제' 카테고리의 다른 글
| java 프로그래밍 예제(간단한 도서 관리 프로그램) (0) | 2024.09.20 |
|---|---|
| 간단한 활용 예제(포토 앨범) (0) | 2024.08.22 |
| HTML, CSS, JS 활용 예제(간단한 todo list02, 모듈화) (0) | 2024.08.09 |