커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
카드 생성도 안되고 파이어스토어에 데이터도 저장이 안됩니다.
[왕초보] 웹개발 종합반 v0
5주차
북마크
김*실
댓글
1
・
추천
0
・
조회수
12
조회수
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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&display=swap');


        * {
            font-family: 'Gowun Dodum', sans-serif;
        }


        body {
            background-color: white;
            color: black;
        }


        .header {
            background-size: cover;
            background-image:
                url('https://images.unsplash.com/photo-1531697218799-ed0ae884c6c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80');
            background-position: right;
            height: 650px;
            display: flex;
            flex-direction: column;
        }


        .header>h1 {
            margin: 0;
            font-size: 40px;
        }


        .header>div {
            font-size: 18px;
            margin-top: 10px;
        }


        .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 0px 1px 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;
        }


        .mycards {
            width: 1600px;
            margin: 30px auto;


            flex-direction: row;
            align-items: center;
        }


        .card {
            border-radius: 30px;
            background-color: white;
            border: none;
            color: black;
            margin-left: 50px;
        }


        .card-img-top {
            object-fit: cover;
            height: 250px;
            border-radius: 20px;
        }


        .card-title {
            margin-top: 10px;
            font-size: 18px;
        }


        .card-body {
            border: blanchedalmond 2px solid;
            border-radius: 20px;
        }


        .card-text {
            color: black;
        }


        .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: 500px;
            margin: 0px 0px 0px 135px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            float: left;
        }


        .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: #F17228;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }


        .button2 button:hover {
            background-color: #f3620f;
        }


        .jumbotron-message {
            margin-left: 150px;
            font-size: 1500px;
        }
    </style>
    <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: "AIzaSyAjc0uGoVz7T3cMGhu-XzeuHLDBIPCdVwI",
            authDomain: "sparta-homework-1e199.firebaseapp.com",
            projectId: "sparta-homework-1e199",
            storageBucket: "sparta-homework-1e199.appspot.com",
            messagingSenderId: "999658762869",
            appId: "1:999658762869:web:497d29171c1caaf9d8fe3c",
            measurementId: "G-4EPJV2WS3H"
        };


        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);




        // 데이터 추가
        $("#addBtn").click(async function () {
        let image = $("#image").val();
        let title = $("#title").val();
        let star = $("#star").val();
        let comment = $("#comment").val();



            // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.


            try {
                const docRef = await addDoc(collection(db, "foods"), {
                    'image': image,
                    'title': title,
                    'star': star,
                    'comment': comment,


                    // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.


                });


                alert("음식이 추가 되었습니다!");
                window.location.reload();
            } catch (e) {
                console.error("Error adding document: ", e);
            }
        });


        // 데이터 읽기 및 카드 생성
        $("#card").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;


            let tempHtml = `
                        <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h4 class="card-title">${title}</h4>
                        <p class="card-text">${star}</p>
                        <p>${image}</p>
                        <button class="card-button">주문하기</button>
                    </div>
                </div>
            </div>
`
            // 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,
            // tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.


            $("#card").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="image" placeholder="name@example.com">
                        <label for="floatingInput">음식 이미지 주소</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" id="title" 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="star"
                            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="comment"></textarea>
                        <label for="floatingTextarea">추천 이유</label>
                    </div>
                    <div class="button2">
                        <button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 부트스트랩 카드 적용-->
    <div class="mycards">
        <div id="card" 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>



취소
 공유
취소
댓글 0
댓글 알림
나의얼굴