* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
스파르타 플릭스 코딩을 가지고 데이타베이스 실습을 5주차에서 시작할려고 하는데, 예전의 코딩이 3주차 숙제를 하면서 변혀된 상태로 저장이 되어 있네요.. 올바른 전체 코딩 index.html을 받을 수 있을까요? 그렇지 않으면 다시 전부 만들어야 해서... 참고로 현재 코딩을 아래에 캡처하여 보냅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap');
* {
font-family: 'Hahmlet', serif;
}
.main {
color: black;
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: center;
background-size: cover;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypostingbox {
width: 100 px;
margin: 20px auto 20px auto;
border: 1px solid white;
padding: 20px;
border-radius: 5px;
}
.form-floating>input {
background-color: transparent;
color: black;
}
.form-floating>label {
color: black;
}
.input-group>label {
background-color: transparent;
color: black;
}
.mypostingbox>button {
width: 30%;
}
</style>
<script>
$(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);
})
})
function openclose() {
$('#postingbox').toggle();
}
function makeCard() {
let image = $('#image').val();
let title = $('#title').val();
let comment = $('#comment').val();
let star = $('#star').val();
console.log(image, title, comment, star);
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);
}
</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">
<li><a href="#" class="nav-link px-2 text-danger">Foodcourt</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">양식</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>
<div class="main">
<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>
</div>
</div>
<div class="mypostingbox" id="postingbox">
<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="email" class="form-control" id="title" placeholder="name@example.com">
<label for="floatingInput">음식명</label>
</div>
<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="⭐">⭐</option>
<option value="⭐⭐">⭐⭐</option>
<option value="⭐⭐⭐">⭐⭐⭐</option>
<option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
<option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="comment" placeholder="name@example.com">
<label for="floatingInput">추천이유</label>
</div>
<div class="d-grid gap-2 d-md-block">
<button type="button" class="btn btn-danger" onclick="makeCard()">기록하기</button>
</div>
</div>
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img
<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">
<img
<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">
<img
<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">
<img
<div class="card-body">
<h5 class="card-title">음식명</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">음식 코멘트</p>
</div>
</div>
</div>
</div>
</div>
</html>
