추억앨범 카드 안나오게 하기

TIL

추억앨범 카드 안나오게 하기

jinny8 2024. 6. 18. 17:29

<!DOCTYPE html>

<head>

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;

}

.mytitle {

height: 250px;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');

background-position: center;

background-size: cover;

}

.mytitle>button {

width: 150px;

height: 50px;

background-color: transparent;

color: white;

border: 1px solid white;

border-radius: 5px;

margin-top: 20px;

}

.mycards {

width: 1200px;

margin: 30px auto 0px auto;

}

.mypostingbox {

width: 500px;

margin: 30px auto 0px auto;

padding: 20px;

box-shadow: 0px 0px 3px 0px blue;

border-radius: 5px;

}

.mybtn {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

}

.mybtn>button {

margin-right: 5px;

}

</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: "AIzaSyDSyexqcj6329xjWKKCgFIm2zc_OV0uj4I",

authDomain: "sparta-59946.firebaseapp.com",

projectId: "sparta-59946",

storageBucket: "sparta-59946.appspot.com",

messagingSenderId: "1011737346514",

appId: "1:1011737346514:web:dfcde3c5acda4c1e29c80b",

measurementId: "G-X73Z3WG430"

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

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

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

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

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

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

let doc = {

'image': image,

'title': title,

'content': content,

'date': date

};

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

alert('저장 완료!');

window.location.reload();

})

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

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

})

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

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

let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']

$('#msg').text(mise)

})

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

docs.forEach((doc) => {

let row = doc.data();

let image = row['image'];

let title = row['title'];

let content = row['content'];

let date = row['date'];

let temp_html = `

<img src="${image}"

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

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

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

</div>

</div>

</div>`;

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

});

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

</body>

</html>

현재 위 코드를 실행하면 이렇게 홈페이지가 나옵니다.

이번엔 여기서 처음에 있던 카드들이 (위쪽의 추억앨범 4개) 안나오게 하는 숙제를 받았습니다.

답은 간단했습니다.

처음에 있던 카드들은 코딩을 통해 구현된 것이므로

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

이 코드들을 지워주니 사라졌습니다.

최종 코드

<!DOCTYPE html>

<head>

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;

}

.mytitle {

height: 250px;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');

background-position: center;

background-size: cover;

}

.mytitle>button {

width: 150px;

height: 50px;

background-color: transparent;

color: white;

border: 1px solid white;

border-radius: 5px;

margin-top: 20px;

}

.mycards {

width: 1200px;

margin: 30px auto 0px auto;

}

.mypostingbox {

width: 500px;

margin: 30px auto 0px auto;

padding: 20px;

box-shadow: 0px 0px 3px 0px blue;

border-radius: 5px;

}

.mybtn {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

}

.mybtn>button {

margin-right: 5px;

}

</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: "AIzaSyDSyexqcj6329xjWKKCgFIm2zc_OV0uj4I",

authDomain: "sparta-59946.firebaseapp.com",

projectId: "sparta-59946",

storageBucket: "sparta-59946.appspot.com",

messagingSenderId: "1011737346514",

appId: "1:1011737346514:web:dfcde3c5acda4c1e29c80b",

measurementId: "G-X73Z3WG430"

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

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

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

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

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

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

let doc = {

'image': image,

'title': title,

'content': content,

'date': date

};

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

alert('저장 완료!');

window.location.reload();

})

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

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

})

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

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

let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']

$('#msg').text(mise)

})

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

docs.forEach((doc) => {

let row = doc.data();

let image = row['image'];

let title = row['title'];

let content = row['content'];

let date = row['date'];

let temp_html = `

<img src="${image}"

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

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

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

</div>

</div>

</div>`;

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

});

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

'TIL' 카테고리의 다른 글

백엔드 개발자 직무 채용공고 분석 1 (0)	2024.06.20
SQL이 여전히 사용되는 이유 (0)	2024.06.19
SQL 실습 (0)	2024.06.17
개발자에게 물어봤습니다: 1. 함께 일하고 싶은 개발자를 읽고 (0)	2024.06.14
SQL 연습문제 4번 (1)	2024.06.13

현재글추억앨범 카드 안나오게 하기

개발 공부 저장소

Today :
Yesterday :

개발 공부 저장소