사전 캠프/추가 과제
비밀의 사이트를 만드는 중이다. (1) (내용은 당연히 비밀.)
Iruka913
2024. 9. 25. 18:12
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>비밀</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<style>
* {
font-family: 'Gamja Flower', sans-serif;
}
body {
background-color: white;
color: black;
}
p {
display: flex;
justify-content: center
}
#imujiyon {
display: flex;
justify-content: center
}
.title-container {
display: flex;
justify-content: space-around;
background-color: #00704a;
color: white;
height: 100px;
width: 1050px;
margin: 0 auto;
/* 수평 중앙 정렬 */
margin-top: 60px;
padding: 5px;
border: 2px solid black;
border-radius: 10px;
gap: 5px;
}
.big-title {
display: flex;
justify-content: center;
font-size: 70px;
font-family: 'Gamja Flower', sans-serif;
font-weight: 700 !important;
}
#present {
font-size: 30px;
font-family: 'Gamja Flower', sans-serif;
}
.message {
display: flex;
flex-direction: column;
border: 2px solid black;
border-radius: 10px;
width: 700px;
margin: 20px 20px 20px 20px;
padding: 10px;
background-color: #00704a;
color: white;
}
#add-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
width: 800px;
height: 600px;
}
.form-button {
width: 150px;
height: 40px;
background-color: transparent;
border: 1px solid tr;
color: black;
font-size: 15px;
margin: 20px 10px 0px 0px;
}
.form-button:hover {
border: 2px solid black;
}
.info-button {
margin: 20px 0 0 15px;
height: 40px;
font-size: 14px;
}
.post {
width: 500px;
margin: 20px 20px 20px 20px;
padding: 20px;
box-shadow: 0px 0px 3px 0px transparent;
background-color: wheat;
}
.form-floating input,
.form-floating textarea {
color: black;
background-color: white;
}
.button2 {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
.button2>button {
margin-right: 10px;
}
.comment {
color: black;
}
.play-button {
display: flex;
justify-content: flex-start;
margin-top: 15px;
}
a.nav-link {
color: #F17228;
font-size: large;
}
.icon {
height: 50px;
}
.card-button {
background-color: orange;
color: white;
text-align: center;
padding: 10px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.card-title {
font-weight: bold;
}
.card-button> :hover {
background-color: darkorange;
}
#input-card {
width: 700px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-floating input,
.form-floating textarea {
color: black;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}
.form-floating label {
color: #333;
}
.input-group button,
.input-group select {
background-color: rgb(168, 161, 161);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.input-group button:hover,
.input-group select:hover {
background-color: gray;
}
.button2 {
text-align: right;
}
.button2 button {
background-color: #00704a;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button2 button:hover {
background-color: rgb(168, 161, 161);
}
.jumbotron-message {
margin-left: 150px;
font-size: 1500px;
}
</style>
<script type="module">
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
const firebaseConfig = {
apiKey: "AIzaSyANfOa5DxeYY3wvB1gCLKPWVlqgE8pEDvg",
authDomain: "sparta-45b78.firebaseapp.com",
projectId: "sparta-45b78",
storageBucket: "sparta-45b78.appspot.com",
messagingSenderId: "1086011296968",
appId: "1:1086011296968:web:341a092fecd8dec42ce9fd",
measurementId: "G-F3QGKWWXCG"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#비밀입니다.").click(async function () {
alert("비밀")
})
// 데이터 추가
$("#addBtn").click(async function () {
try {
const docRef = await addDoc(collection(db, "비밀"), {
name: document.getElementById('name_input').value,
comment: document.getElementById('comment_input').value,
});
alert("음식이 추가 되었습니다!");
window.location.reload();
} catch (e) {
console.error("Error adding document: ", e);
}
});
// 데이터 읽기 및 카드 생성
$(".row-cols-3").empty();
const querySnapshot = await getDocs(collection(db, "비밀입니다"));
querySnapshot.forEach((doc) => {
let name = doc.data().name;
let comment = doc.data().comment;
let tempHtml = `<div><li>${name}, ${comment}<li></div>`
$("#comments").append(tempHtml);
});
</script>
</head>
<body>
<div class="title-container">
<h1 class="big-title">비밀의 제목</h1>
<button id="present" type="button" class="btn btn-success">지밀의 버튼</button>
</div>
<!-- 점보 트론 적용 jumbotron -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div id="add-wrapper" class="container-fluid py-5">
<div class="message">
<h1 id="imujiyon" class="display-5 fw-bold" style="font-family: 'Gamja Flower', sans-serif;">비밀의 글</h1>
<p style="font-size: 30px;"> 비밀
<p>
<p style="font-size: 30px;"> 비밀.</p>
</div>
<!-- 부트스트랩 인풋 박스 적용-->
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name_input" placeholder="이름">
<label>비밀</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="덕담" id="comment_input"></textarea>
<label>비밀</label>
</div>
<div class="button2">
<button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
</div>
</div>
</div>
</div>
<!-- 부트스트랩 카드 적용-->
<div class="comment_container">
<div id="comments" class="comments"></div>
</div>
</div>
</body>
</html>
완성되는 대로 제대로 된 코드로 수정해서 다시 올리겠습니다~
현재 input를 통해 데이터를 받고, 이를 통해 div를 생성하여 추가하는 기믹까지 만들었다.
다음 시간에는 생성된 div의 스타일링 작업에 들어갈 예정.
그리고 게임 하나를 추가해보려고 한다.