Я разработал базовый сайт с использованием CSS, семантического HTML, javascript и API. Я построил базовое приложение для поиска, используя HTML, sass (scss), gulp и javascript. Он подключается к API, который заполняет страницу результатами. Я решил использовать API базы данных Movie. Однако я использовал jQuery, и теперь мне нужно преобразовать его с помощью простого JS и метода Fetch. Кажется, я не могу понять, как это сделать.
Вот мой HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main.css" />
<title>Movie Box</title>
</head>
<body>
<!-----*** HEADER ***----->
<header>
<div class="clearfix">
<nav>
<!-- LOGO -->
<h1>MovieBox Logo</h1>
<!-- NAV LINKS -->
<ul class="main-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- SEARCH FORM -->
<form action="#" class="js-search-form">
<p class="form-p">Search for movies by Title</p>
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="js-query" placeholder="ex. Star Wars" autofocus>
</div>
<button id="ghost-btn" type="submit">Submit</button>
</form>
</header>
<!-----*** SECTION - SEARCH RESULTS ***----->
<section class="js-search-results clearfix">
</section>
<!-----*** SECTION - VIEW MORE ***----->
<section>
<p class="max center-text">Showing max result of 20</p>
<p class="center-text">
<a class="btn second-btn" href="https://www.imdb.com/find" target="_blank">View More Details on IMDB</a>
</p>
</section>
<!-----*** FOOTER ***----->
<footer>Built by Eileen Villahermosa for DWS2</footer>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Вот мой JS:
// Single state variable for endpoint
var MD_BASE_URL = "https://api.themoviedb.org/3/search/movie?
include_adult=false&page=1";
var state = {
query: ''
};
// State modification functions
function getApiData(searchTerm, callback) {
var query = {
query: searchTerm,
language: 'en-US',
api_key: 'sssssssssssssss', // took the key out for privacy
};
$.getJSON(MD_BASE_URL, query, callback);
}
// Render functions
function displayMDSearchData(data) {
var resultElement = '';
if(data.results.length > 1) {
resultElement += '<section class="js-search-results clearfix">';
resultElement += '<h2>' + '<span>' + "Results for " + state.query + '</span>' + '</h2>';
if(data.results)
data.results.forEach(function(results){
resultElement += '<article>';
resultElement += '<div class="container">';
resultElement += '<img src="https://image.tmdb.org/t/p/w500' + results.poster_path + '"/>';
resultElement += '<div class="content">';
if(results.title.length > 20) {
resultElement += '<h3>' + results.title.substr(0,20) +'...</h3>';
} else {
resultElement += '<h3>' + results.title + '</h3>';
}
resultElement += '<p>Released: ' + results.release_date + '</p>';
resultElement += '</div>';
resultElement += '</div>';
resultElement += '</article>';
});
resultElement += '</section>';
console.log(data);
} else {
resultElement += '<p class="no-results">No results</p>';
}
$('.js-search-results').html(resultElement);
}
// Event listeners
function watchSubmit() {
$('.js-search-form').submit(function(e) {
e.preventDefault();
state.query = $(this).find('.js-query').val();
var query = state.query;
getApiData(query, displayMDSearchData);
});
}
$(function(){watchSubmit();});