5주차 숙제에 관해서 입니다. | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

5주차 숙제에 관해서 입니다.

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0

5주차

강*름

・

추천

・

조회수

답변 완료

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

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

5주차 숙제에 관해서 입니다.

5주차 숙제를 하고 있는데요. 새로고침을 누르면 자동으로 카드가 하나씩 추가가 되고있습니다.

포스트박스에 타이틀.이미지.등등 입력후 기록하기를 누르면 카드가 추가되고 새로고침이 되면서 비어있는 카드 하나가 더 생깁니다.

ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ

알고있는 선에서는 여러방법을 동원해 보았으나.

점점 산으로 가서 여쭤봅니다.

작성한 코드 및 에러 메세지

<!doctype html>

<head>

<title>푸드파이터</title>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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>

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 = {

apiKey: "AIzaSyAWR2QcOVoWMIBZJYpzbOCuLxzLqQyv1Dw",

authDomain: "spartaproject-d87ba.firebaseapp.com",

projectId: "spartaproject-d87ba",

storageBucket: "spartaproject-d87ba.appspot.com",

messagingSenderId: "565006782015",

appId: "1:565006782015:web:cdea1d0a577294b517b28a",

measurementId: "G-P5VMGQWKXW"

// https://firebase.google.com/?hl=ko

// 파이어베이스에 접속한 후 프로젝트 설정에 들어갑니다.

// 본인 firebaseConfig 내용으로 설정해 줍니다.

};

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();

let doc = {

'image': image,

'title': title,

'star': star,

'comment': comment

};

await addDoc(collection(db, "localfood"), doc);

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

window.location.reload();

});

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

try {

const docRef = await addDoc(collection(db, "localfood"), {

});

} catch (e) {

console.error("Error adding document: ", e);

}

// 데이터 읽기 및 카드 생성

$("#stickcard").empty();

const querySnapshot = await getDocs(collection(db, "localfood"));

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 temp_html = `

<img src="${image}"

class="card-img-top" alt="...">

<h4 class="card-title">${title}</h4>

<p class="card-text">${comment}</p>

</div>

</div>`

// 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,

// tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.

$("#stickcard").append(temp_html);

});

</script>

</head>

<body>

</svg>

</a>

<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>

</ul>

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>

<button type="button" class="btn btn-warning me-2">Login</button>

</div>

</header>

<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>

</div>

</select>

</div>

</div>

</div>

</div>

</a>

</div>

</div>

<h5>Section</h5>

<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">About</a></li>

</ul>

</div>

<h5>Section</h5>

<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">About</a></li>

</ul>

</div>

<h5>Section</h5>

<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">About</a></li>

</ul>

</div>

</footer>

</div>

</body>

</html>눌러 코드박스를 만들어 보세요.

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

댓글 알림