커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
5주차 숙제부분 질문
[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0
5주차
북마크
박*찬
댓글
26
・
추천
0
・
조회수
80
조회수
80
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.



기록하기 누르면 카드가 사라짐


스파르타 즉문즉답스파르타 즉문즉답스파르타 즉문즉답




작성한 코드 및 에러 메세지

오<!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 black;
        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";



      const firebaseConfig = {
        // https://firebase.google.com/?hl=ko
        // 파이어베이스에 접속한 후 프로젝트 설정에 들어갑니다.
        // 본인 firebaseConfig 내용으로 설정해 줍니다.



        apiKey: "AIzaSyA-AjUNhOjh4XBuj8RA6SzyZ2Oc8DLzjfo",
        authDomain: "sparta-c35a1.firebaseapp.com",
        projectId: "sparta-c35a1",
        storageBucket: "sparta-c35a1.appspot.com",
        messagingSenderId: "690899532780",
        appId: "1:690899532780:web:8860a55a23db1db4369ec9",
        measurementId: "G-5XK4BET4RX",
      };



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



      // 데이터 추가
      $("#addBtn").click(async function () {
        // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.
        let image = $("#image").val();
        let title = $("#title").val();
        let comment = $("#comment").val();
        let star = $("#star").val();
       
           


        try {
          const docRef = await addDoc(collection(db, "foods"), {
            // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
            image: image,
            title: title,
            star: star,
            comment: comment,
          });
          
          $("#cards").empty();


          alert("음식이 추가 되었습니다!");


      
      // 데이터 읽기 및 카드 생성
      
      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 코드를 생성하세요.
        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">${comment}</p>
                        <p>${star}</p>
                        <button class="card-button">주문하기</button>
                    </div>
                </div>
             </div>
            `;
          } catch (e) {
          console.error("Error adding document: ", e);
        } 
     


    
    });
    </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><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"
                name="image"
                placeholder="name@example.com"
              />
              <label for="image">음식 이미지 주소</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="form-button" id="addBtn">
                기록하기
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- 부트스트랩 카드 적용-->
    <div class="mycards">
        </div>
      <div id="cards" class="row row-cols-3">
        <div class="col">
          <div class="card h-100">
            <img
              src="https://pulstory.pulmuone.com/data/item/88888866821/thumb-7I2464Sk7J28_7IOd66y866eM65GQ_500x500.jpg"
              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://www.joseilbo.com/gisa_img/14890215611489021561_kospi007.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h4 class="card-title">딸기요거트 5종</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://i.namu.wiki/i/1LrnduayLqi_dZMEGSyhUfDsNA-Bhu-R7MRvTC8G-r04keOU6kptPtxoUI8hy5eT1Q3_4r6MffH3On6fCjW1xQ.webp"
              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 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>류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!




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