커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
5주차 숙제 질문
[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0
5주차
배*한
댓글
3
・
추천
0
・
조회수
8
조회수
8
답변 완료
일단 하라는 대로 하고 있는데 firebase에 foods 항목도 안 나오고 저장도 되지 않습니다!
alert도 뜨지 않습니다.
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyCsQr9q1bc9Q4gr_9rnNyfDp6XouINocVk",
authDomain: "sparta-homework-5-week.firebaseapp.com",
projectId: "sparta-homework-5-week",
storageBucket: "sparta-homework-5-week.appspot.com",
messagingSenderId: "546523981724",
appId: "1:546523981724:web:c6129da3b942aaa1784a59",
measurementId: "G-95XXLLYECT"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 데이터 추가
$("#addBtn").click(async function () {
let title = $('#title').val();
let comment = $('#comment').val();
let star = $('#star').val();
let image = $('#image').val();
// title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.
let doc = {
'title': title,
'comment': comment,
'star': star,
'image': image
};
await addDoc(collection(db, "foods"), doc)
try {
const docRef = await addDoc(collection(db, "foods"), {
// 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
});
alert("음식이 추가 되었습니다!");
window.location.reload();
} catch (e) {
console.error("Error adding document: ", e);
}
});
// 데이터 읽기 및 카드 생성
$(".row-cols-3").empty();
const querySnapshot = await getDocs(collection(db, "foods"));
querySnapshot.forEach((doc) => {
let title = doc.data().title;
let comment = doc.data().comment;
let star = "⭐".repeat(doc.data().star);
let image = doc.data().image;
// 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,
// tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.
$(".row-cols-3").append(tempHtml);
});
</script>
</head>
<body>
<!-- Navbar -->
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/food.png"
class="icon"></li>
<li><a href="#" class="nav-link px-2 text-danger">Foodcourt</a></li>
<li><a href="#" class="nav-link px-2 ">홈</a></li>
<li><a href="#" class="nav-link px-2 ">한식</a></li>
<li><a href="#" class="nav-link px-2 ">일식</a></li>
<li><a href="#" class="nav-link px-2 ">중식</a></li>
<li><a href="#" class="nav-link px-2 ">양식</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-warning me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<!-- 점보 트론 적용 jumbotron -->
<div class="header">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<div class="jumbotron-message">
<h1 class="display-5 fw-bold" style="font-family: 'Black Han Sans', sans-serif; ">스파르타 푸드파이터
</h1>
<p class="col-md-8 fs-4"> 본인만의 맛집을 소개하는 사이트입니다.
<br>맛집을 소개해 주세요!
</p>
</div>
<!-- 부트스트랩 인풋 박스 적용-->
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">음식 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="foodTitle" placeholder="영화 제목">
<label for="foodTitle">음식명</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">별점</button>
<select class="form-select" id="inputGroupSelect03"
aria-label="Example select with button addon">
<option selected>별점 선택</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here"
id="floatingTextarea"></textarea>
<label for="floatingTextarea">추천 이유</label>
</div>
<div class="button2">
<button id="addBtn" type="button" class="btn btn-danger" > 기록하기 </button>
</div>
</div>
</div>
</div>
</div>
<!-- 부트스트랩 카드 적용-->
<div class="mycards">
<div class="row row-cols-3 row-cols-md-3">
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2162&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">하와이안 피자</h4>
<p class="card-text">이건 꼭 먹어봐야 해요</p>
<p>⭐⭐⭐⭐</p>
<button class="card-button">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1481070555726-e2fe8357725c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2235&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">크리스피 버거</h4>
<p class="card-text">너무 달콤해요!</p>
<p>⭐⭐⭐</p>
<button class="card-button">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">해물 라면</h4>
<p class="card-text">국물이 끝내줘요!</p>
<p>⭐⭐⭐⭐⭐</p>
<button class="card-button">주문하기</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container2">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
</a>
<p class="text-body-secondary">©Teamsparta 2024</p>
</div>
<div class="col mb-3">
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
댓글 알림
