커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
5주차 과제 질의
[왕초보] 웹개발 종합반
5주차
황*승
댓글
29
・
추천
0
・
조회수
51
조회수
51
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
안녕하세요 튜터님!
기존에 질문했던 글에 질문 종료 버튼을 눌러서 다시 질문 드립니다!
function makeCard() {
let image = $('#image').val();
console.log(image);
}
해당 코드를 진행하려고 하면 에러가 뜨고 진행이 되지 않습니다!
전체 코드 복사하여 붙여 드리겠습니다! 어디가 문제인지 확인 한번 부탁 드리겠습니다 ㅜㅜ
앞서 질문 드렸던 것처럼 파이어베이스를 하려 했는데 막혀서 함수부터 시도해보는 중입니다!
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Access to script at 'file:///C:/Users/SAMSUNG/OneDrive/%EB%B0%94%ED%83%95%20%ED%99%94%EB%A9%B4/%EC%88%99%EC%A0%9C%20%EC%A0%9C%EC%B6%9C/static/firebase2.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.Understand this errorAI
firebase2.js:1
Failed to load resource: net::ERR_FAILEDUnderstand this errorAI
5주차 과제.html:239 Uncaught ReferenceError: $ is not defined
at makeCard (5주차 과제.html:239:25)
at HTMLButtonElement.onclick (5주차 과제.html:307:91)Understand this errorAI
5주차 과제.html:239 Uncaught ReferenceError: $ is not defined
at makeCard (5주차 과제.html:239:25)
at HTMLButtonElement.onclick (5주차 과제.html:307:91
전체 코드 붙여 드립니다!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="../static/firebase2.js" type="module"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Nanum+Pen+Script&display=swap');
* {
font-family: "Gowun Dodum", serif;
font-weight: 400;
font-style: normal;
}
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;
font-family: "Black Han Sans", serif;
font-weight: 400;
font-style: normal;
}
.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 0px;
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: 1200px;
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;
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;
}
.col-md-8 {
width: 430px;
}
</style>
<script>
function makeCard() {
let image = $('#image').val();
console.log(image);
}
</script>
</head>
<body>
<!-- Navbar -->
<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">
<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>
<li><a href="#" class="nav-link px-2 ">홈</a></li>
<li><a href="#" class="nav-link px-2 ">한식</a></li>
<li><a href="#" class="nav-link px-2 ">일식</a></li>
<li><a href="#" class="nav-link px-2 ">중식</a></li>
<li><a href="#" class="nav-link px-2 ">양식</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-warning me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="header">
<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>
<div class="post" id="input-card">
<div id="mypostingbox" 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="text" class="form-control" id="title" placeholder="음식명">
<label for="foodTitle">음식명</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">별점</button>
<select class="form-select" id="star" aria-label="Example select with button addon">
<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>
<div class="form-floating">
<textarea class="form-control" placeholder="추천 이유" id="comment"></textarea>
<label for="floatingTextarea">추천 이유</label>
</div>
<div class="button2">
<button onclick="makeCard()" type="button" class="btn btn-danger"> 기록하기 </button>
</div>
</div>
</div>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxODAzMzFfMjcg%2FMDAxNTIyNDUzNTc1NDk2.USRQkNOy3LscQeAgN7rWlKLwRGI0v8rgMYXaTLxmT_kg.V1RANDAzMFTDFa2eA1qHpMq2NONeANguheEY2NXjzdYg.JPEG.mssixx%2FNaverBlog_20180331_084615_01.jpg&type=sc960_832"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Simpson's donut</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
<p class="card-text">심슨이 매일 먹는 그 도넛!!</p>
<button class="card-button" type="button" class="btn btn-warning">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxODA5MThfMjE2%2FMDAxNTM3Mjc4MDUyNDA1.zRtmdJ5RjJD8pPLND3LJK6PNxEyr18aZFMiKusrFWCgg.sySsQRGh8js4EPLueVzJKwdYDEyjgb6xSicsBJdb7Wcg.GIF.munystory%2F%25B1%25D7%25B8%25AE%25B8%25D4%25B9%25E6.gif&type=sc960_832_gif"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">We bare bears' calzone</h5>
<p class="card-text">⭐⭐⭐⭐</p>
<p class="card-text">그리즐리 베어의 숨은 맛집!!</p>
<button class="card-button" type="button" class="btn btn-warning">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20101205_74%2Fbimiliae_1291478200347aPhxO_JPEG%2FHowl%2527s_Moving_Castle_%25282004%2529_1280x720%252CHDTV%252Cx264%252CDTS-THORA.mkv_001803218.jpg&type=sc960_832"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Howl's moving castle</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">캐스퍼가 빚어낸 브런치 한 상!!</p>
<button class="card-button" type="button" class="btn btn-warning">주문하기</button>
</div>
</div>
</div>
</div>
</div>
<div class="container2">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
</a>
<p class="text-body-secondary">©Teamsparta 2024</p>
</div>
<div class="col mb-3">
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<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">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<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">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<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">FAQs</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>
댓글 알림
