하라는거 다 했는데 포스팅이 안됩니다.. ㅠㅠㅠ
보고 계신 화면 전체를
캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
<script>
function openclose() {
$('#card').toggle();
}
function makecard() {
let image = $('#image').val();
let title = $('#title').val();
let rating = $('#rating').val();
let comment = $('#comment').val();
console.log(image, title, rating, comment);
let temp_html = `
<div class="col">
<div class="card">
<img src="${image}">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">T${rating}.</p>
<p class="card-text">T${comment}.</p>
</div>
</div>
</div>`
$('cards').append(temp_html);
}
</script>
</head>
<body>
<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="FDAS">본인만의 맛을 소개하는 페이지입니다. 맛집을 소개해주세요!</p>
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="name@example.com">
<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="rating" 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="Leave a comment here" 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 id="cards" class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card">
<img
src="https://www.allrecipes.com/thmb/iXKYAl17eIEnvhLtb4WxM7wKqTc=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/240376-homemade-pepperoni-pizza-Beauty-3x4-1-6ae54059c23348b3b9a703b6a3067a44.jpg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<button type="button" class="btn btn-warning">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://www.allrecipes.com/thmb/iXKYAl17eIEnvhLtb4WxM7wKqTc=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/240376-homemade-pepperoni-pizza-Beauty-3x4-1-6ae54059c23348b3b9a703b6a3067a44.jpg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<button type="button" class="btn btn-warning">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://www.allrecipes.com/thmb/iXKYAl17eIEnvhLtb4WxM7wKqTc=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/240376-homemade-pepperoni-pizza-Beauty-3x4-1-6ae54059c23348b3b9a703b6a3067a44.jpg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content.</p>
<button type="button" class="btn btn-warning">주문하기</button>
</div>
</div>
</div>
</div>
