반응형
JavaScript를 사용하여 할 일 목록(To-Do List) 애플리케이션을 만들어 보겠습니다. 여기서는 항목을 추가하고 삭제할 수 있는 기능을 구현하겠습니다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">
<h1>To-Do List</h1>
<input type="text" id="todo-input" placeholder="Enter a new task">
<button id="add-todo">Add</button>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>CSS 코드
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.todo-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input[type="text"] {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
background-color: #f44336;
border: none;
border-radius: 4px;
color: white;
padding: 5px 10px;
cursor: pointer;
}JavaScript 코드
// script.js
document.getElementById('add-todo').addEventListener('click', function() {
let input = document.getElementById('todo-input');
let newTask = input.value;
if (newTask !== '') {
let li = document.createElement('li');
li.textContent = newTask;
let deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function() {
li.remove();
});
li.appendChild(deleteButton);
document.getElementById('todo-list').appendChild(li);
input.value = '';
}
});
document.getElementById('todo-input').addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
document.getElementById('add-todo').click();
}
});설명
- HTML 코드: 기본적인 To-Do List UI를 작성했습니다. 텍스트 입력 필드, 추가 버튼, 할 일 목록을 포함합니다.
- CSS 코드: To-Do List의 스타일을 지정했습니다. 입력 필드와 버튼, 목록 항목의 스타일을 설정합니다.
- JavaScript 코드:
- 추가 기능: 'Add' 버튼을 클릭하면 입력 필드의 값을 읽어 새로운 할 일 항목을 생성합니다. 각 항목에는 삭제 버튼이 포함됩니다.
- 삭제 기능: 삭제 버튼을 클릭하면 해당 항목이 목록에서 제거됩니다.
- 엔터 키 기능: 입력 필드에서 엔터 키를 누르면 'Add' 버튼을 클릭한 것과 동일한 동작을 수행합니다.
반응형
'Frontend > Javascript' 카테고리의 다른 글
| [Javascript] Javascript 규칙 (0) | 2024.06.08 |
|---|---|
| [Javascript] Javascript 예제(심화) - 수정 (0) | 2024.06.08 |
| [Javascript] Javascript 예제(심화) (0) | 2024.06.08 |
| [Javascript] Javascript 심화 (0) | 2024.06.08 |
| [Javascript] Javascript 기본 (0) | 2024.06.08 |