<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>방명록</title>
<style>
.guest-book-container {
width: 80%;
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 12px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
border: 2px solid #ddd;
}
.guest-book ul {
list-style-type: none;
}
.guest-book li {
margin-bottom: 10px;
}
textarea {
width: 80%;
padding: 8px;
font-size: 16px;
margin-bottom: 10px;
box-sizing: border-box;
}
input[type="text"] {
width: 30%;
padding: 8px;
font-size: 16px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #000000;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #333;
}
.button-group {
display: flex;
justify-content: flex-end; /* 오른쪽 끝으로 정렬 */
gap: 5px;
}
.edit-btn {
background-color: #0067A3;
}
.delete-btn {
background-color: #e74c3c;
}
.message-box {
width: 80%;
/* 너비 조정 */
max-width: 600px;
/* 최대 너비 설정 */
border: 2px solid #333;
/* 테두리 두껍게 */
padding: 30px;
/* 내부 여백 */
border-radius: 12px;
/* 둥근 모서리 */
background-color: #fdf6e3;
/* 연한 노란색 배경 */
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
/* 그림자 효과 */
text-align: left;
}
</style>
</head>
<body>
<div class="guest-book-container">
<div class="guest-book">
<h3>방명록</h3>
<form id="guestBookForm">
<label for="name">이름:</label>
<br>
<input type="text" id="name" name="name" required placeholder="이름을 입력하세요">
<br>
<label for="message">내용:</label>
<br>
<textarea id="message" name="message" required placeholder="방명록 내용을 입력하세요"></textarea>
<button type="submit">저장</button>
</form>
<h4>방명록 내용</h4>
<ul id="guestMessages"></ul>
</div>
</div>
<script>
let db;
// IndexedDB 연결 함수
const openDb = () => {
const request = indexedDB.open('GuestBookDB', 1);
request.onupgradeneeded = (event) => {
db = event.target.result;
if (!db.objectStoreNames.contains('messages')) {
db.createObjectStore('messages', { keyPath: 'id' });
}
};
request.onsuccess = (event) => {
db = event.target.result;
console.log("Database opened successfully.");
loadMessages(); // DB가 완전히 열린 후에 실행
};
request.onerror = (event) => {
console.error("Database error:", event.target.errorCode);
};
};
const loadMessages = () => {
if (!db) {
console.error("Database is not initialized yet.");
return;
}
const transaction = db.transaction('messages', 'readonly');
const store = transaction.objectStore('messages');
const cursorRequest = store.openCursor();
const messagesList = document.getElementById('guestMessages');
if (messagesList.children.length > 0) {
console.log("Messages are already loaded.");
return; // 메시지가 이미 로드되었으면 중복 로딩 방지
}
messagesList.innerHTML = "";
cursorRequest.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
// 커서의 값을 별도의 변수에 저장
const { id, name, message } = cursor.value;
// 메시지 박스 추가
const messageBox = document.createElement('div');
messageBox.className = 'message-box';
// 메시지 리스트 아이템 추가
const listItem = document.createElement('div');
listItem.setAttribute('data-id', id);
// 별도의 요소를 사용하면 텍스트와 버튼을 구분하기 쉽습니다.
const textSpan = document.createElement('span');
textSpan.textContent = `${name}: ${message}`;
listItem.appendChild(textSpan);
// 수정 버튼 생성
const editButton = document.createElement('button');
editButton.className = 'edit-btn';
editButton.textContent = '수정';
// 이벤트 핸들러에서 별도의 변수 사용
editButton.onclick = () => editMessage(id, name, message);
listItem.appendChild(editButton);
// 삭제 버튼 생성
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-btn';
deleteButton.textContent = '삭제';
deleteButton.onclick = () => deleteMessage(id);
listItem.appendChild(deleteButton);
//이번 메세지 부분
messageBox.appendChild(listItem);
messagesList.appendChild(messageBox);
cursor.continue();
}
};
// 방명록 메시지 추가 (기존 데이터 덮어쓰지 않도록 add 사용)
const addMessage = (name, message) => {
if (!db) {
console.error("Database not initialized.");
return;
}
const transaction = db.transaction('messages', 'readwrite');
const store = transaction.objectStore('messages');
const newEntry = { id: Date.now(), name, message };
const request = store.add(newEntry);
request.onsuccess = () => {
window.location.reload();
};
request.onerror = (event) => {
console.error("Error adding message:", event.target.error);
};
};
const editMessage = (id, currentName, currentMessage) => {
const newName = prompt("이름을 수정하세요", currentName);
const newMessage = prompt("내용을 수정하세요", currentMessage);
if (newName && newMessage) {
const transaction = db.transaction('messages', 'readwrite');
const store = transaction.objectStore('messages');
store.get(id).onsuccess = (event) => {
const existingMessage = event.target.result;
if (existingMessage) {
existingMessage.name = newName;
existingMessage.message = newMessage;
store.put(existingMessage); // 기존 ID 유지한 채로 수정
transaction.oncomplete = () => {
// 수정된 메시지만 화면에서 업데이트
const messageBox = document.querySelector(`[data-id="${id}"]`);
if (messageBox) {
const textSpan = messageBox.querySelector('span');
textSpan.textContent = `${newName}: ${newMessage}`;
}
window.location.reload();
};
}
};
}
};
// 방명록 메시지 삭제 (id 기준으로 정확한 데이터 삭제)
const deleteMessage = (id) => {
const transaction = db.transaction('messages', 'readwrite');
const store = transaction.objectStore('messages');
store.delete(id);
transaction.oncomplete = () => {
// 데이터베이스에서 삭제가 완료되면 페이지 새로고침
window.location.reload()
};
};
// 폼 제출 처리
document.getElementById('guestBookForm').addEventListener('submit', (event) => {
event.preventDefault();
const name = document.getElementById('name').value;
const message = document.getElementById('message').value;
addMessage(name, message);
document.getElementById('name').value = '';
document.getElementById('message').value = '';
});
}
// DB 열기
openDb();
</script>
</body>
</html>
방명록
방명록 내용
이번에 크게 변경점은
방명록을 창으로 덮은것과
방명록을 남겻을시 그부분에 색과 그림자를 입힌것이라 볼수있겠다.
노란색방명록부분
.message-box {
width: 80%;
/* 너비 조정 */
max-width: 600px;
/* 최대 너비 설정 */
border: 2px solid #333;
/* 테두리 두껍게 */
padding: 30px;
/* 내부 여백 */
border-radius: 12px;
/* 둥근 모서리 */
background-color: #fdf6e3;
/* 연한 노란색 배경 */
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
/* 그림자 효과 */
text-align: left;
}
전체바탕부분
.guest-book-container {
width: 80%;
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 12px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
border: 2px solid #ddd;
}
현재 문제점
.button-group {
display: flex;
justify-content: flex-end; /* 오른쪽 끝으로 정렬 */
gap: 5px;
}오른쪽 끝으로 정렬하고 5px 정도만띄워서 놓을려고하는데 작동시 그부분에서 현재 어려움을 겪고 잇음
flex부분확인및 다시 정렬부분 찾아볼 생각중
'웹' 카테고리의 다른 글
| 웹페이지 (0) | 2025.02.19 |
|---|---|
| 웹페이지 (0) | 2025.02.19 |
| indexed db (0) | 2025.02.18 |
| 웹페이지 만들기 방명록 (0) | 2025.02.18 |
| 웹사이트 (0) | 2025.02.17 |