오늘은 API를 적용시켜 순수 css 자바스크립트 만으로 영화 검색 사이트를 만들기를 시작하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="./movie.js"></script>
<header>
<h1>내배캠 최고 평점 영화 콜렉션</h1>
</header>
<form class="search" onsubmit="handleSearch(event)">
<label>영화 검색 : </label>
<input type="text" id="search-input" placeholder="영화 제목을 검색해 보세요">
<button type="submit" id="search-btn">검색</button>
</form>
<section class="card-list">
<div class="movie-card" id="278">
<img src="https://image.tmdb.org/t/p/w500/9cqNxx0GxF0bflZmeSMuL5tnGzr.jpg" alt="The Shawshank Redemption">
<h3 class="movie-title">test</h3>
<p>test</p>
<p>Rating: 8.7</p>
</div>
</section>
</body>
</html>* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* background: url("../assets/bg.png") center/cover no-repeat; */
min-height: 100vh;
}
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
}
.movie-card {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.24);
margin: 20px;
padding: 20px;
width: 300px;
justify-self: center;
background-color: bisque;
border-radius: 10px;
cursor: pointer;
user-select: none;
}
.movie-card img {
width: 100%;
border-radius: 10px;
}
header {
background-color: #ffe194;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
}
.search {
width: 100%;
display: flex;
justify-content: center;
padding: 20px 0;
border-bottom: 1px solid black;
}
.search label {
font-size: 25px;
}
.search input {
margin-left: 20px;
min-width: 200px;
padding: 5px 10px;
}
.search button {
margin-left: 10px;
padding: 5px;
}
h3 {
margin-bottom: 10px;
}
const options = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhNDMzZjQ0OTQxOWJhMmJkZWRiMWJjMTNjNjYyMDY3MSIsInN1YiI6IjY2MmIxNzBmMTc1MDUxMDExZDc4YjU4ZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.aHbylSxa8vT1wF-QRKuHc6BF1rAOU7XvV1mxmCCGI-g'
}
};
fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));기능적인 부분들은 추가 예정이다.
