코드를 작성하면서 참고할만한 HTML 소스를 올려본다.
세 가지 버전으로 차근차근 비교하면서 보면 도움이 된다
ver.1
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<!-- 부트 스트랩 가져오기 ] -->
<!-- [ JQuery 라이브러리 가져오기 - 확실한지는 물어봐야 함 💡 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- JQuery 라이브러리 가져오기 - 확실한지는 물어봐야 함 💡 ] -->
<style>
/* [ 폰트 가져오기 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
/* 폰트 가져오기 ] */
.main {
color: white;
/* 글씨 색깔 */
/* 이미지 가져올 땐 3줄 세트로 */
background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
background-position: center;
background-size: cover;
}
body {
background-color: black;
/* 백그라운드 컬러 - body같이 헤드가 하나밖에 존재하지 않는 애들은 '.' 안 붙여도 됨 */
}
/* . 붙이면 이름표 이름, 안 붙으면 tag 이름 */
.mycards {
width: 1200px;
/* 카드 크기 */
margin: 20px auto 20px auto;
/* 4 사이드 크기 조절 */
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
border: 1px solid white;
/* 테두리 디자인 */
padding: 20px;
/* 안으로 여백 크기 */
border-radius: 5px;
/* 테두리 부드럽게 */
}
/* tip) 박스 안에 디자인을 바꾸고 싶은데 지정된 이름을 모를 때 웹으로 가서 html 열고 거기서 작성해보기 - 즉각 고쳐져서 확인 가능 */
.form-floating>input {
background-color: transparent;
color: white;
}
.form-floating>label {
color: white;
}
.input-group>label {
background-color: transparent;
color: white;
}
.mypostingbox>button {
width: 100%;
/* 버튼 크기 조절(100%로 꽉차게) - 혹은 px나 %로 조절 */
}
</style>
<script>
function hey() {
// $('#title').text('쥬라기월드'); --> (body 어딘가에 id값(id = title) 넣어두고) title의 text를 쥬라기월드로 바꿔라~라는 뜻
}
</script>
</head>
<body>
<!-- [ 부트 스트랩(exemple - headers) 긁어온 디자인 -->
<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">
<li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
<li><a href="#" class="nav-link px-2 text-white">홈</a></li>
<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
<li><a href="#" class="nav-link px-2 text-white">영화</a></li>
<li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</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-outline-light me-2">Login</button>
<button type="button" class="btn btn-danger">Sign-up</button>
</div>
</div>
</div>
</header>
<!-- 부트 스트랩(exemple - headers) 긁어온 디자인 ] -->
<div class="main"> <!--main으로 감싸서 style에서 디자인하도록 하기(이미지, 글씨크기 등...) -->
<!-- [ 부트 스트랩(Jumbotron) 긁어온 디자인 - 가져오는 법 : 우클 - 검사 - cmd에서 원하는 정보 우클 - Edit as HTML - 복사해오기 -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">킹덤</h1>
<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.</p>
<!-- 부트 스트랩(Jumbotron) 긁어온 디자인 ] -->
<!-- [ 부트 스트랩(bottons) 긁어온 디자인 -->
<button type="button" class="btn btn-outline-light">영화 기록하기</button>
<!-- ⭐ 'button' 과 'type' 사이에 oneclick="hey()" 넣으면 버튼 누를 때 js의 hey() 메소드 수행 -->
<button type="button" class="btn btn-outline-light">상세정보</button>
<!-- 부트 스트랩(bottons) 긁어온 디자인 ] -->
</div>
</div>
</div>
<div class="mypostingbox">
<!-- [ 부트 스트랩(Floating labels) 긁어온 디자인 -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 제목">
<label for="floatingInput">영화 제목</label>
</div>
<!-- [ 부트 스트랩(input group - custom select) 긁어온 디자인 -->
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select">
<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>
<!-- 부트 스트랩(input group - custom select) 긁어온 디자인 ] -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="추천 이유">
<label for="floatingInput">추천 이유</label>
</div>
<button type="button" class="btn btn-danger">기록하기</button>
<!-- 부트 스트랩(Floating labels) 긁어온 디자인 ] -->
</div>
<div class="mycards">
<!-- [ 부트 스트랩(cards) 긁어온 디자인 -->
<div class="row row-cols-1 row-cols-md-4 g-4"> <!-- 한줄의 카드가 4개 들어가고 싶다 : md-4 -->
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 부트 스트랩(cards) 긁어온 디자인 ] -->
</html>
ver.2 - fetch 적용하기
<!-- 앨범에 fetch 적용해보기(임의로 바꾸는게 아니라 페이지를 열 때 자동으로 업데이트된 값 넣어보는 연습) - 예) 현재 미세먼지 : 좋음 -->
<!-- +) 응용해보기 예) 20도를 기준으로 높으면 “더워요”, 낮으면 “추워요”가 나오게 -->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<!-- 부트 스트랩 가져오기 ] -->
<!-- [ JQuery 라이브러리 가져오기 - 확실한지는 물어봐야 함 💡 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- JQuery 라이브러리 가져오기 - 확실한지는 물어봐야 함 💡 ] -->
<style>
/* [ 폰트 가져오기 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
/* 폰트 가져오기 ] */
.main {
color: white;
/* 글씨 색깔 */
/* 이미지 가져올 땐 3줄 세트로 */
background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
background-position: center;
background-size: cover;
}
body {
background-color: black;
/* 백그라운드 컬러 - body같이 헤드가 하나밖에 존재하지 않는 애들은 '.' 안 붙여도 됨 */
}
/* . 붙이면 이름표 이름, 안 붙으면 tag 이름 */
.mycards {
width: 1200px;
/* 카드 크기 */
margin: 20px auto 20px auto;
/* 4 사이드 크기 조절 */
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
border: 1px solid white;
/* 테두리 디자인 */
padding: 20px;
/* 안으로 여백 크기 */
border-radius: 5px;
/* 테두리 부드럽게 */
}
/* tip) 박스 안에 디자인을 바꾸고 싶은데 지정된 이름을 모를 때 웹으로 가서 html 열고 거기서 작성해보기 - 즉각 고쳐져서 확인 가능 */
.form-floating>input {
background-color: transparent;
color: white;
}
.form-floating>label {
color: white;
}
.input-group>label {
background-color: transparent;
color: white;
}
.mypostingbox>button {
width: 100%;
/* 버튼 크기 조절(100%로 꽉차게) - 혹은 px나 %로 조절 */
}
</style>
<script>
/* 🌟🌟🌟 이 부분 수정 🌟🌟🌟 */
/* 1. 현재 서울 온도 가져오기 */
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url).then(res => res.json()).then(data => {
let temp = data['temp'];
$('#msg').text(temp);
})
})
/* 혹은 2. 20도 기준으로 덥다/춥다 자동으로 찍기 */
/*
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
let temperature = data['temp']
if (temperature < 20) {
$('#temp').text('추워요');
} else {
$('#temp').text('더워요');
}
})
})
*/
function hey() {
// $('#title').text('쥬라기월드'); --> (body 어딘가에 id값(id = title) 넣어두고) title의 text를 쥬라기월드로 바꿔라~라는 뜻
}
</script>
</head>
<body>
<!-- [ 부트 스트랩(exemple - headers) 긁어온 디자인 -->
<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">
<li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
<li><a href="#" class="nav-link px-2 text-white">홈</a></li>
<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
<li><a href="#" class="nav-link px-2 text-white">영화</a></li>
<li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
<!-- 🌟🌟🌟 이 부분 수정 🌟🌟🌟 -->
<li><a href="#" class="nav-link px-2 text-white">오늘 서울의 온도 : <span id="msg" >20.00</span>도</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-outline-light me-2">Login</button>
<button type="button" class="btn btn-danger">Sign-up</button>
</div>
</div>
</div>
</header>
<!-- 부트 스트랩(exemple - headers) 긁어온 디자인 ] -->
<div class="main"> <!--main으로 감싸서 style에서 디자인하도록 하기(이미지, 글씨크기 등...) -->
<!-- [ 부트 스트랩(Jumbotron) 긁어온 디자인 - 가져오는 법 : 우클 - 검사 - cmd에서 원하는 정보 우클 - Edit as HTML - 복사해오기 -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">킹덤</h1>
<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.</p>
<!-- 부트 스트랩(Jumbotron) 긁어온 디자인 ] -->
<!-- [ 부트 스트랩(bottons) 긁어온 디자인 -->
<button type="button" class="btn btn-outline-light">영화 기록하기</button>
<!-- ⭐ 'button' 과 'type' 사이에 oneclick="hey()" 넣으면 버튼 누를 때 js의 hey() 메소드 수행 -->
<button type="button" class="btn btn-outline-light">상세정보</button>
<!-- 부트 스트랩(bottons) 긁어온 디자인 ] -->
</div>
</div>
</div>
<div class="mypostingbox">
<!-- [ 부트 스트랩(Floating labels) 긁어온 디자인 -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="영화 제목">
<label for="floatingInput">영화 제목</label>
</div>
<!-- [ 부트 스트랩(input group - custom select) 긁어온 디자인 -->
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="star">
<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>
<!-- 부트 스트랩(input group - custom select) 긁어온 디자인 ] -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="comment" placeholder="추천 이유">
<label for="floatingInput">추천 이유</label>
</div>
<button type="button" class="btn btn-danger">기록하기</button>
<!-- 부트 스트랩(Floating labels) 긁어온 디자인 ] -->
</div>
<div class="mycards">
<!-- [ 부트 스트랩(cards) 긁어온 디자인 -->
<div class="row row-cols-1 row-cols-md-4 g-4"> <!-- 한줄의 카드가 4개 들어가고 싶다 : md-4 -->
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 부트 스트랩(cards) 긁어온 디자인 ] -->
</html>
ver.3 - firebase에 넣고 빼주는 상태에서 배포
<!-- album과 같이 마찬가지로 firebase에 넣고 빼주는 상태로 만든 후 배포하기 -->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<!-- 부트 스트랩 가져오기 ] -->
<!-- [ JQuery 라이브러리 가져오기 - 확실한지는 물어봐야 함 💡 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- JQuery 라이브러리 가져오기 - 확실한지는 물어봐야 함 💡 ] -->
<style>
/* [ 폰트 가져오기 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
/* 폰트 가져오기 ] */
.main {
color: white;
/* 글씨 색깔 */
/* 이미지 가져올 땐 3줄 세트로 */
background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
background-position: center;
background-size: cover;
}
body {
background-color: black;
/* 백그라운드 컬러 - body같이 헤드가 하나밖에 존재하지 않는 애들은 '.' 안 붙여도 됨 */
}
/* . 붙이면 이름표 이름, 안 붙으면 tag 이름 */
.mycards {
width: 1200px;
/* 카드 크기 */
margin: 20px auto 20px auto;
/* 4 사이드 크기 조절 */
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
border: 1px solid white;
/* 테두리 디자인 */
padding: 20px;
/* 안으로 여백 크기 */
border-radius: 5px;
/* 테두리 부드럽게 */
}
/* tip) 박스 안에 디자인을 바꾸고 싶은데 지정된 이름을 모를 때 웹으로 가서 html 열고 거기서 작성해보기 - 즉각 고쳐져서 확인 가능 */
.form-floating>input {
background-color: transparent;
color: white;
}
.form-floating>label {
color: white;
}
.input-group>label {
background-color: transparent;
color: white;
}
.mypostingbox>button {
width: 100%;
/* 버튼 크기 조절(100%로 꽉차게) - 혹은 px나 %로 조절 */
}
</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: "AIzaSyBT1IvC0Cqh4CgoYGC3nmFl5Ld67SaLxvE",
authDomain: "sparta-500f7.firebaseapp.com",
projectId: "sparta-500f7",
storageBucket: "sparta-500f7.appspot.com",
messagingSenderId: "544722743871",
appId: "1:544722743871:web:ec5a396ba46988c9f57e8a",
measurementId: "G-E7BWMH5Z70"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// ---------------------------------------------------------------------- fireBase 초기 세팅(자세한건 album 참조)
$("#postiongbtn").click(async function () { // id(postiongbtn)가 클릭이 되면 밑의 코드가 일어나게 되더라~
// makeCard 기능을 다시 정의해주기
// 1. 컨텐츠 가져오기
let image = $('#image').val();
let title = $('#title').val();
let date = $('#star').val();
let content = $('#comment').val();
// 2. dictionary화 해서 저장
let doc = {
'image': image,
'title': title,
'star': star,
'comment': comment
};
await addDoc(collection(db, "movies"), doc); // 카드의 내용 정보를 DB에 보내주는 것 - addDoc
// 저장했을 때 저장완료 알람이 뜨고 초기화면으로 reload하기
alert('저장 완료!')
window.location.reload();
})
$("#savebtn").click(async function () {
$('#postiong box').toggle();
})
/* 1. 현재 서울 온도 가져오기 */
$(document).ready(function () {
})
// 🌟🌟🌟 이 부분 수정 🌟🌟🌟
// script가 가장 나중에 시작되기 때문에.ready 안에 있을 필요 없음 - 밖으로 꺼내줌
let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url).then(res => res.json()).then(data => {
let temp = data['temp'];
$('#msg').text(temp);
})
// DB에서 가져온 데이터 카드로 붙여넣기
// [ 스캘래톤 코드 가져오기
let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
let row = doc.data();
// 스캘래톤 코드 가져오기 ]
// [ make card - DB에서 정보 끌어와서 카드 만들기
let image = $('#image').val();
let title = $('#title').val();
let star = $('#star').val();
let comment = $('#comment').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
<div>
<div>
<div>`;
$('#card').append(temp_html);
// make card - DB에서 정보 끌어와서 카드 만들기 ]
});
/* 혹은 2. 20도 기준으로 덥다/춥다 자동으로 찍기 */
/*
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
let temperature = data['temp']
if (temperature < 20) {
$('#temp').text('추워요');
} else {
$('#temp').text('더워요');
}
})
})
*/
function hey() {
// $('#title').text('쥬라기월드'); --> (body 어딘가에 id값(id = title) 넣어두고) title의 text를 쥬라기월드로 바꿔라~라는 뜻
}
</script>
</head>
<body>
<!-- [ 부트 스트랩(exemple - headers) 긁어온 디자인 -->
<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">
<li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
<li><a href="#" class="nav-link px-2 text-white">홈</a></li>
<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
<li><a href="#" class="nav-link px-2 text-white">영화</a></li>
<li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
<li><a href="#" class="nav-link px-2 text-white">오늘 서울의 온도 : <span id="msg">20.00</span>도</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-outline-light me-2">Login</button>
<button type="button" class="btn btn-danger">Sign-up</button>
</div>
</div>
</div>
</header>
<!-- 부트 스트랩(exemple - headers) 긁어온 디자인 ] -->
<div class="main"> <!--main으로 감싸서 style에서 디자인하도록 하기(이미지, 글씨크기 등...) -->
<!-- [ 부트 스트랩(Jumbotron) 긁어온 디자인 - 가져오는 법 : 우클 - 검사 - cmd에서 원하는 정보 우클 - Edit as HTML - 복사해오기 -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">킹덤</h1>
<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.</p>
<!-- 부트 스트랩(Jumbotron) 긁어온 디자인 ] -->
<!-- [ 부트 스트랩(bottons) 긁어온 디자인 -->
<!-- 🌟🌟🌟 이 부분 수정 🌟🌟🌟 -->
<!-- onclick 대신에 id값 적기 -->
<button id="savebtn" type="button" class="btn btn-outline-light">영화 기록하기</button>
<!-- 'button' 과 'type' 사이에 oneclick="hey()" 넣으면 버튼 누를 때 js의 hey() 메소드 수행 -->
<button type="button" class="btn btn-outline-light">상세정보</button>
<!-- 부트 스트랩(bottons) 긁어온 디자인 ] -->
</div>
</div>
</div>
<div class="mypostingbox">
<!-- [ 부트 스트랩(Floating labels) 긁어온 디자인 -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="영화 제목">
<label for="floatingInput">영화 제목</label>
</div>
<!-- [ 부트 스트랩(input group - custom select) 긁어온 디자인 -->
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="star">
<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>
<!-- 부트 스트랩(input group - custom select) 긁어온 디자인 ] -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="comment" placeholder="추천 이유">
<label for="floatingInput">추천 이유</label>
</div>
<!-- 🌟🌟🌟 이 부분 수정 🌟🌟🌟 -->
<!-- id값 넣어주기 -->
<button id="postiongbtn" type="button" class="btn btn-danger">기록하기</button>
<!-- 부트 스트랩(Floating labels) 긁어온 디자인 ] -->
</div>
<div class="mycards">
<!-- [ 부트 스트랩(cards) 긁어온 디자인 -->
<div class="row row-cols-1 row-cols-md-4 g-4"> <!-- 한줄의 카드가 4개 들어가고 싶다 : md-4 -->
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 부트 스트랩(cards) 긁어온 디자인 ] -->
</html>