728x90
반응형
프로젝트 개요:
- 이 프로젝트에서는 사용자가 할 일을 추가하고 삭제할 수 있는 간단한 ToDo 애플리케이션을 만들 것입니다. 사용자는 입력 필드에 할 일을 작성하고 엔터 키를 누르면 해당 항목이 리스트에 추가됩니다.
728x90
HTML 구조 설정:
- 먼저 HTML 파일을 생성하고 ToDo 애플리케이션의 기본 구조를 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo 애플리케이션</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>ToDo 애플리케이션</h1>
<input type="text" id="todoInput" placeholder="할 일을 입력하세요">
<ul id="todoList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 스타일링:
- 다음으로 CSS 파일을 생성하여 ToDo 애플리케이션의 스타일을 지정합니다.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
li:last-child {
border-bottom: none;
}
JavaScript 기능 구현:
- 마지막으로 JavaScript 파일을 생성하여 ToDo 애플리케이션의 기능을 구현합니다.
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');
todoInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
const todoText = todoInput.value.trim();
if (todoText !== '') {
const li = document.createElement('li');
li.textContent = todoText;
todoList.appendChild(li);
todoInput.value = '';
}
}
});
실행 및 결과 확인:
- 모든 파일을 저장한 후 웹 브라우저에서 HTML 파일을 열어 ToDo 애플리케이션을 실행하고 결과를 확인합니다.
반응형
728x90
반응형
'Js . jQuery' 카테고리의 다른 글
| Vue.js 소개와 기본 개념 이해하기 (0) | 2024.03.09 |
|---|---|
| JavaScript에서 콜백 함수 활용하기 (0) | 2024.03.09 |
| JavaScript에서 map() 메서드 활용하기 (0) | 2024.03.09 |
| 자바스크립트 비동기 프로그래밍 이해하기 (0) | 2024.03.09 |
| 자바스크립트 클로저(Closures)의 이해 (0) | 2024.03.09 |
