제가 강의보고 조금 다르게 만든 부분에서 문제가 생겨서 문의드립니다~
1.저는 link_adress라는 부분에 링크주소를 넣고 싶은데, 링크주소를 복사 붙여넣기 해서 저장하게 되면
아래 카드에서는 link_adress에서 undefined라고 나옵니다.. a태그를 넣은 링크주소로 나올 수 있게끔 하고 싶은데요..
할 수 있는 방법이 있을까요...?
2.'저장하기' 버튼을 계속 누르면 카드들이 계속 오른쪽으로만 정렬되어서 한 공간안에 데이터가 세로로 축적되는 모습이 보입니다..
적정양의 축적되면 아래로 자동 내려가게 할 수 있는 방법이 있을까요???..
웹사이트 주소:
https://haejunghan.github.io/Linksaver/
1.
2.
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<title>LinkSaver</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@100..900&display=swap');
* {
font-family: "Hahmlet", sans-serif;
}
body>header {
background-color: rgb(218, 203, 6);
}
.main {
height: 300px;
background-color: rgb(221, 221, 221);
color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mysavingbox {
width: 500px;
padding: 20px;
margin: 20px auto 20px auto;
border: 3px solid rgb(221, 221, 221);
border-radius: 5px;
}
.form-floating>input {
background-color: rgb(221, 221, 221);
color: black;
}
.input-group>label {
background-color: rgb(221, 221, 221);
color: black;
}
.mysavingbox>button {
width: 100%;
}
.form-select {
background-color: rgb(218, 203, 6);
color: black;
}
.mycards {
width: 100%;
margin: 20px auto 20px auto;
padding-top: 30px;
background-color: rgb(218, 203, 6);
display: flex;
justify-content: space-between;
}
</style>
<script type="module">
// 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";
// Firebase 구성 정보 설정(본인 설정 붙여넣기)
const firebaseConfig = {
apiKey: "AIzaSyCzIX5h8SwGdDyZLsjja-eN-BwFutMGkvY",
authDomain: "sparta-26114.firebaseapp.com",
projectId: "sparta-26114",
storageBucket: "sparta-26114.appspot.com",
messagingSenderId: "218194191462",
appId: "1:218194191462:web:647832dcba096f347eb9a7",
measurementId: "G-JGP1CSZ3GR"
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 데이터 추가 스켈레톤
$("#savingbtn").click(async function () { //Jquery Onclick같은 역할
// value값 가져오기
let link = $('#link').val();
let title = $('#title').val();
let type = $('#type').val();
let comment = $('#comment').val();
//value값 데이터에 저장
let doc = {
'link': link,
'title': title,
'type': type,
'comment': comment
}
await addDoc(collection(db, "linksaver"), doc); //데이터에 저장코드
alert('저장 완료!')
window.location.reload();
})
//데이터 가져오는 코드
let docs = await getDocs(collection(db, "linksaver"));
docs.forEach((doc) => {
let row = doc.data();
let link = row['image'];
let title = row['title'];
let type = row['type'];
let comment = row['comment'];
let temp_html = `
<div class="card border-success mb-4" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">${title}</div>
<div class="card-body text-success">
<h5 class="card-title">${comment}</h5>
<p class="card-text">${link}</p>
</div>
<div class="card-footer bg-transparent border-success">${type}</div>
</div>
`;
$('#card').append(temp_html);
});
let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url).then(res => res.json()).then(data => {
let temp = data['temp'];
if (temp > 20) {
$('#weather').text("따뜻해요");
} else {
$('#weather').text("서늘해요");
}
})
//jQuery문 -> script=module -> 데이터 가져오는 코드에 넣을것
// function makeCard() {
// let link = $('#link').val();
// let title = $('#title').val();
// let type = $('#type').val();
// let comment = $('#comment').val();
// let temp_html = `
// <div class="card border-success mb-4" style="max-width: 18rem;">
// <div class="card-header bg-transparent border-success">${title}</div>
// <div class="card-body text-success">
// <h5 class="card-title">${comment}</h5>
// <p class="card-text">${link}</p>
// </div>
// <div class="card-footer bg-transparent border-success">${type}</div>
// </div>
// `;
// $('#card').append(temp_html);
// }
</script>
</head>
<body>
<header 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-secondary">LinkSaver</a></li>
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
<li><a href="#" class="nav-link px-2 text-white">오늘의 날씨는:<span id="weather"></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-light">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</header>
<div class="main">
<h5>나에게 필요한 링크를 쏙쏙 보관하는</h5>
<h1>LinkSaver</h1>
</div>
<div class="mysavingbox" id="savingbox">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="link" placeholder="링크주소">
<label for="floatingInput">link_adress</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="링크제목">
<label for="floatingInput">link_title</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">link_type</label>
<select class="form-select" id="type">
<option selected>type 선택</option>
<option value="video">video</option>
<option value="photo">photo</option>
<option value="blog">blog</option>
<option value="article">article</option>
<option value="etc">etc</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="comment" placeholder="링크내용">
<label for="floatingInput">link_comment</label>
</div>
<button id="savingbtn" type="button" class="btn btn-success">저장하기</button>
</div>
<div id="card" class="mycards">
</div>
</body>
</html>
