스파르타플릭스 화면 수정 방법

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

스파르타플릭스 화면 수정 방법

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

5주차

김*태

・

추천

・

조회수

답변 완료

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

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

강의에서 예제로 하고 있는 '스파르타플릭스'에서 두 가지가 궁금합니다.

추천영화를 입력했을 때, 입력한 순서대로 firebase에 들어가지 않습니다. 예를 들어 어떤 경우는 위로(최근순), 또 어떤 경우는 아래로 입력되고 화면에도 그렇게 랜덤하게 출력됩니다. firebase에서 순서를 조정하려 해도 안 되는데, 결과 정렬의 조건을 주는 방법이 있나요?
초기화면에 포스팅박스가 나오고 '영화 기록하기' 버튼을 클릭하면 박스가 토글이 되도록 코딩되어 있습니다. 이를 포스팅박스가 없는 상태를 디폴트로 하고 '영화 기록하기' 버튼을 누르면 영화 이미지, 제목, 별점, 추천이유를 입력하는 박스가 나오도록 하고 싶은데, 어떻게 수정할 수 있나요?

작성한 코드 및 에러 메세지

<!DOCTYPE html>

<head>

<title>스파르타플릭스</title>

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

* {

font-family: "Gowun Dodum", sans-serif;

font-weight: 400;

font-style: normal;

}

.main {

background-position: center;

background-size: cover;

background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');

color: white;

padding: 50px 0px 0px 50px;

}

body {

background-color: black;

}

.mypostingbox {

width: 500px;

margin: 20px auto 0px auto;

border: 1px solid white;

padding: 20px;

border-radius: 5px;

}

.form-floating>input {

background-color: transparent;

color: white;

}

.form-floating>label {

color: white;

}

.input-group>label {

background-color: transparent;

color: white;

}

.record-button {

text-align: right;

}

.record-button>button {

width: 30%;

}

.mycards {

width: 1200px;

margin: 20px auto 20px auto;

}

</style>

// Firebase SDK 라이브러리 가져오기

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: "AIzaSyChccpJcWzMrETs1dLsSo8pILaZD6hA6iQ",

authDomain: "sparta-study-45fb7.firebaseapp.com",

projectId: "sparta-study-45fb7",

storageBucket: "sparta-study-45fb7.appspot.com",

messagingSenderId: "388625114927",

appId: "1:388625114927:web:9f92bbc86ae112025ca3da",

measurementId: "G-99DCNHBYTL"

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

// 버튼을 누르면 firebase에 저장

$("#postingbtn").click(async function () {

let image = $('#image').val();

let title = $('#title').val();

let star = $('#star').val();

let reason = $('#reason').val();

let doc = {

'image': image,

'title': title,

'star': star,

'reason': reason

};

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

alert('저장되었습니다!');

window.location.reload();

})

// 서울 기온 표시

let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";

fetch(url).then(res => res.json()).then(data => {

let ondo = data['temp'];

$('#tem').text(ondo);

})

// 영화 기록하기 토글

$("#savebtn").click(async function () {

$('#box').toggle();

})

// firebase에서 가져오기 - 카드 만들기

let docs = await getDocs(collection(db, "movies"));

docs.forEach((doc) => {

let row = doc.data();

let image = row['image'];

let title = row['title'];

let star = row['star'];

let reason = row['reason'];

let temp_html = `

<img src="${image}"

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

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

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

</div>

</div>`;

$('#card').append(temp_html);

})

</script>

</head>

<body>

</svg>

</a>

<li><a href="#" class="nav-link px-2 text-danger">spartaflix</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-outline-light me-2">Login</button>

</div>

</header>

<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. <br>어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. <br> 정체 모를 악에 맞서 백성을 구원할

희망은 오직

세자뿐이다.</p>

</div>

<label for="floatingInput">영화이미지 주소</label>

</div>

</div>

</select>

</div>

</div>

</div>

</div>

</body>

</html>오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

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

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

댓글 알림