안녕하세요 오늘은 tailwind를 사용해서 간단한 todo 리스트를 만들어보겠습니다.
위 기능을 구현하기 위해
todo.html 파일에 다음과 같이 코드를 작성해주세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 할 일 목록</title>
<!-- Tailwind CSS 링크 -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<!-- 컨테이너: 중앙 정렬 및 패딩 적용 -->
<div class="container mx-auto p-4">
<h1 class="text-xl font-bold mb-4">할 일 목록</h1>
<!-- 할 일 입력 필드 -->
<input type="text" id="new-task" placeholder="할 일 추가..." class="border p-2 w-full">
<!-- 할 일 추가 버튼: 클릭 시 addTask 함수 호출 -->
<button onclick="addTask()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">추가</button>
<!-- 할 일 목록을 표시할 리스트 -->
<ul id="task-list" class="mt-4"></ul>
</div>
<!-- JavaScript 파일 링크 -->
<script src="todo.js"></script>
</body>
</html>
또한 todo.js 파일에 다음과 같이 코드를 작성해주세요
// 할 일 추가 함수
function addTask() {
// 입력 필드와 할 일 목록의 HTML 요소를 가져옴
let taskInput = document.getElementById("new-task");
let taskList = document.getElementById("task-list");
// 입력된 텍스트를 가져오고 공백 제거
let task = taskInput.value.trim();
// 텍스트가 비어있지 않다면 실행
if (task !== "") {
// 새로운 리스트 아이템(할 일) 생성
let listItem = document.createElement("li");
listItem.innerHTML = task; // 텍스트 삽입
listItem.classList.add("border", "p-2", "mt-2"); // Tailwind 클래스 추가
// 아이템 클릭 시 완료 표시를 위한 이벤트 리스너 추가
listItem.onclick = function () {
this.classList.toggle("line-through"); // 클릭 시 줄긋기 토글
};
// 생성된 아이템을 할 일 목록에 추가
taskList.appendChild(listItem);
// 입력 필드 초기화
taskInput.value = "";
}
}
위와 같이 코드를 작성하면 다음과 같은 결과물을 얻을 수 있습니다
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 버튼 클릭시 나오는 모달창 구현하기 (0) | 2024.01.29 |
|---|---|
| [HTML/CSS] 다크모드 구현하기 (0) | 2024.01.20 |
| [HTML/CSS] Tooltip 구현하기 (0) | 2024.01.11 |
| [HTML/CSS] Bowser 라이브러리를 통해 오페라 브라우저인 경우 css 스타일 바꾸기 (0) | 2024.01.07 |
| [HTML/CSS] Bowser 라이브러리를 통해 브라우저 이름과 버전 정보 가져오기 (0) | 2023.12.29 |