<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드 추가</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
.input-container {
margin-bottom: 20px;
}
input[type="text"] {
padding: 10px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
width: 300px;
}
button {
padding: 10px 20px;
font-size: 1rem;
background-color: #007aff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
}
button:hover {
background-color: #005ecb;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f5f5f5;
margin: 5px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.content {
flex-grow: 1; /* 텍스트 영역 확장 */
margin-right: 10px; /* 버튼과 간격 조정 */
}
.timestamp {
font-size: 0.8rem;
color: #555;
margin-right: 10px;
}
.delete-btn {
background-color: #ff4d4f;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
font-size: 0.9rem;
}
.delete-btn:hover {
background-color: #cc0000;
}
</style>
</head>
<body>
<h1>Web Programming</h1>
<p>공부할 주제를 기록해 보세요</p>
<div class="input-container">
<input type="text" id="textInput" placeholder="텍스트를 입력하세요" onkeypress="handleKeyPress(event)">
<button onclick="addNode()">추가</button>
</div>
<ul id="nodeList"></ul>
<script>
function addNode() {
// 입력 필드에서 값 가져오기
const textInput = document.getElementById("textInput");
const text = textInput.value.trim();
// 빈 문자열 처리
if (text === "") {
alert("텍스트를 입력하세요!");
return;
}
// 현재 날짜와 시간 가져오기
const now = new Date();
const month = now.getMonth() + 1; // 월 (0부터 시작하므로 +1)
const date = now.getDate(); // 일
const dayNames = ["일", "월", "화", "수", "목", "금", "토"];
const day = dayNames[now.getDay()]; // 요일
const hours = now.getHours(); // 시
const minutes = String(now.getMinutes()).padStart(2, "0"); // 분
const period = hours >= 12 ? "오후" : "오전"; // 오전/오후
const displayHours = hours % 12 === 0 ? 12 : hours % 12; // 12시간 형식
const timestamp = `${month}월 ${date}일 ${day}요일 ${period} ${displayHours}시 ${minutes}분`;
// 새로운 리스트 항목 생성
const newNode = document.createElement("li");
// 텍스트 노드 추가
const textSpan = document.createElement("span");
textSpan.textContent = text;
textSpan.className = "content";
// 시간 표시 노드 추가
const timeSpan = document.createElement("span");
timeSpan.textContent = timestamp;
timeSpan.className = "timestamp";
// 삭제 버튼 생성 및 추가
const deleteButton = document.createElement("button");
deleteButton.textContent = "삭제";
deleteButton.className = "delete-btn";
deleteButton.onclick = function () {
newNode.remove(); // 노드 삭제
};
// 항목 구성
newNode.appendChild(textSpan); // 텍스트
newNode.appendChild(timeSpan); // 시간
newNode.appendChild(deleteButton); // 삭제 버튼
// 리스트에 추가 (최상단에 추가)
const nodeList = document.getElementById("nodeList");
nodeList.insertBefore(newNode, nodeList.childNodes[0]);
// 입력 필드 초기화
textInput.value = "";
}
function handleKeyPress(event) {
// Enter 키인지 확인
if (event.key === "Enter") {
addNode();
event.preventDefault(); // Enter 키의 기본 동작(폼 제출 방지)을 막음
}
}
</script>
</body>
</html>