Приложение Movie с использованием HTML, CSS и Javascript

Дорогой читатель,

Давайте сделаем хорошее упражнение, создав приложение Trending Movies с использованием HTML, CSS и Javascript 📽. Данные фильма, используемые в проекте, извлекаются из API themoviedb.org.

Папка Структура проекта

index.html — содержит макет HTML, определяющий структуру элементов, которые будут отображаться на странице.
style.css — содержит код CSS для оформления. Используя CSS, мы можем стилизовать различные части, чтобы сделать их более привлекательными.
script.js — содержит код Javascript для получения данных API и их представления в браузере.
favicon.io. Браузеры, поддерживающие значок значка, обычно отображают значок страницы в адресной строке браузера

HTML-макет

Откройте VSCode и создайте базовую структуру HTML в файле index.html с помощью ! а затем нажмите вкладку. Укажите название как «Movie App». Свяжите style.css и script.js с созданным файлом HTML. Внутри body у нас будет тег header который содержит тег h1 для отображения заголовка приложения и тег form, содержащий строку поиска, используемую для поиска фильмов. У нас есть тег div с содержимое идентификатора, где данные, полученные нашим API, будут представлены динамически.

Ниже приведен полный HTML-код,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movie App</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>Trending Movies</h1>
<form id="form">
<input
type="text"
id="search"
placeholder="Search"
class="search"
/>
</form>
</header>
<div id="content"></div>
</body>
</html>

Логика Javascript

Ниже функции определены в коде javascript,

getMovies() — функция для получения фильмов из API и возврата результатов с помощью функции выборки. Результаты будут переданы в функцию showMovies().
showMovies() — функция для демонстрации результатов в браузере, которая в основном динамически вставляет HTML-код. Данные в эту функцию передаются из функции getMovies().
getClassByRate() — функция, которая возвращает цвет на основе рейтинга фильма, полученного из API. Этот цвет используется в CSS для выбора цвета текста оценки фильма.
EventListener для поиска фильмов. Как только вы введете название фильма в строку поиска и щелкнете по кнопке ввода, вы фактически отправите форму, и этот список событий будет запущен. Фильм, соответствующий имени, введенному в строку поиска, будет выбран из API, и он автоматически отобразит все связанные названия в списке.

Полный код Javascript здесь,

const APIURL = "https://api.themoviedb.org/3/discover/movie?api_key=04c35731a5ee918f014970082a0088b1";
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI =
"https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
const main = document.getElementById("content");
const form = document.getElementById("form");
const search = document.getElementById("search");
// initially get fav movies
getMovies(APIURL);
async function getMovies(url) {
const resp = await fetch(url);
const respData = await resp.json();
console.log(respData);
showMovies(respData.results);
}
function showMovies(movies) {
// clear main
main.innerHTML = "";
movie.forEach((movie) => {
const { poster_path, title, vote_average, overview } = movie;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMGPATH + poster_path}"
alt="${title}"
/>
<div class="movie-info">
<h3>${title}</h3>
<span class="${getClassByRate(
vote_average
)}">${vote_average}</span>
</div>
<div class="overview">
<h3>Overview:</h3>
${overview}
</div>
`;
main.appendChild(movieEl);
});
}
function getClassByRate(vote) {
if (vote >= 8) {
return "green";
} else if (vote >= 5) {
return "orange";
} else {
return "red";
}
}
form.addEventListener("submit", (e) => 
e.preventDefault();
const searchTerm = search.value;
if (searchTerm) {
getMovies(SEARCHAPI + searchTerm);
search.value = "";
}
});

CSS-стиль

Я объяснил здесь только важные части, а остальная часть кода CSS в основном связана с позиционированием, размером и цветом элементов. Я поделился ссылкой на GitHub в конце поста, где вы можете увидеть полный код.

Здесь мы упорядочиваем список фильмов, полученных из API с помощью flex . Тег img, содержащий изображение фильма, класс div movie-info, содержащий информацию о фильме, такую как название и рейтинг фильма, класс div overview который содержит обзорфильма, динамически вставляется в код javascript и не определяется в файле HTML.

Простое наведение курсора на баннер фильма должно показать обзор. Для этого мы используем transform: translateY(0);

Вот полный код CSS,

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #030303;
font-family: "Poppins", sans-serif;
margin: 0;
}
header {
background-color: #363636;
display: flex;
}
h1{
color: whitesmoke;
align-self: center;
margin-left: 28rem;
}
.search {
margin: 3rem;
margin-left: 12rem;
background-color: transparent;
border: 2px solid #e9e9ec;
border-radius: 50px;
color: #fff;
font-family: inherit;
font-size: 1rem;
padding: 0.5rem 1rem;
}
.search::placeholder {
color: #7378c5;
}
.search:focus {
background-color: #050505;
outline: none;
}
div{
display: flex;
flex-wrap: wrap;
}
.movie {
background-color: #373b69;
border-radius: 3px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
margin: 1rem;
justify-content: center;
align-content: center;
width: 265px;
}
.movie img {
width: 100%;
}
.movie-info {
color: #eee;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem 1rem;
letter-spacing: 0.5px;
}
.movie-info h3 {
margin: 0;
}
.movie-info span {
background-color: #22254b;
border-radius: 3px;
font-weight: bold;
padding: 0.25rem 0.8rem;
}
.movie-info span.green {
color: rgb(39, 189, 39);
}
.movie-info span.orange {
color: orange;
}
.movie-info span.red {
color: rgb(189, 42, 42);
}
.overview {
background-color: #fff;
padding: 2rem;
position: absolute;
max-height: 100%;
overflow: auto;
left: 0;
bottom: 0;
right: 0;
transform: translateY(101%);
transition: transform 0.3s ease-in;
}
.overview h3 {
margin-top: 0;
}
.movie:hover .overview {
transform: translateY(0);
}

Демонстрация приложения Movie

Код также доступен на GitHub.

Эта статья содержит модифицированную версию кода, доступную на https://www.youtube.com/watch?v=dtKciwk_si4.

Спасибо за ваш интерес.

Приложение Movie с использованием HTML, CSS и Javascript

HTML-макет

Логика Javascript

CSS-стиль

Похожие вопросы