<div class="wrapper">
<header class="header">
<div class="header_logo">Movie</div>
<div class="header_actions">
<form onsubmit="handle_form(event)" id="header_form">
<div class="header_form-icon">
<input type="search" class="header_form-input" placeholder="Search, Press Enter to Submit" />
<svg class="icon" width="22px" height="22px"><use href="#icon-search" /></svg>
</div>
</form>
<img id="img_icon" width="32px" height="32px" src="" alt="" >
</div>
</header>
<main id="main">
<section>
<article class="movie">
<div class="movie_img">
<img id="img_src" src="">
</div>
<div class="movie_info">
<header><h1 class="movie_title"></h1></header>
<div class="movie_desc"></div>
<div class="movie_details">
<h2>Details</h2>
<ul class="flex">
<li>Premiered: <span id="movie_date"></span></li>
<li>Rating: <span id="movie_rating"></span></li>
<li>Runtime: <span id="movie_runtime"></span></li>
<li>Status: <span id="movie_status"></span></li>
</ul>
</div>
<a href="" class="btn" target="_blank" rel="noopener noreferrer">
<svg class="icon" width="16px" height="16px"><use href="#icon-play" /></svg>
Watch Movie</a>
</div>
</article>
<div class="episodes_list">
<h3 class="episodes_title"></h3>
<ol class="episodes" id="episodes"></ol>
</div>
</section>
</main>
<footer class="footer">
All credits goes to <a href="tvmaze.com">TvMaze</a> for providing the free API used for this demo
</footer>
</div>
</body>
<script src="main.js"></script>
<svg style="display: none" xmlns="http://www.w3.org/2000/svg">
<symbol
viewBox="0 0 24 24"
id="icon-search"
fill-rule="evenodd"
clip-rule="evenodd"
>
<path
d="M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5 4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5 8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z"
/>
<symbol
viewBox="0 0 24 24"
id="icon-user"
fill-rule="evenodd"
clip-rule="evenodd"
>
<path
d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm8.127 19.41c-.282-.401-.772-.654-1.624-.85-3.848-.906-4.097-1.501-4.352-2.059-.259-.565-.19-1.23.205-1.977 1.726-3.257 2.09-6.024 1.027-7.79-.674-1.119-1.875-1.734-3.383-1.734-1.521 0-2.732.626-3.409 1.763-1.066 1.789-.693 4.544 1.049 7.757.402.742.476 1.406.22 1.974-.265.586-.611 1.19-4.365 2.066-.852.196-1.342.449-1.623.848 2.012 2.207 4.91 3.592 8.128 3.592s6.115-1.385 8.127-3.59zm.65-.782c1.395-1.844 2.223-4.14 2.223-6.628 0-6.071-4.929-11-11-11s-11 4.929-11 11c0 2.487.827 4.783 2.222 6.626.409-.452 1.049-.81 2.049-1.041 2.025-.462 3.376-.836 3.678-1.502.122-.272.061-.628-.188-1.087-1.917-3.535-2.282-6.641-1.03-8.745.853-1.431 2.408-2.251 4.269-2.251 1.845 0 3.391.808 4.24 2.218 1.251 2.079.896 5.195-1 8.774-.245.463-.304.821-.179 1.094.305.668 1.644 1.038 3.667 1.499 1 .23 1.64.59 2.049 1.043z"
/>
</symbol>
<symbol id="icon-play" viewBox="0 0 24 24"><path d="M3 22v-20l18 10-18 10z"/></symbol>
</svg>
html {
box-sizing: border-box;
font-size: 16px;
font-family: sans-serif;
}
:root {
--color-primary: #f76d4e;
--color-bg: #171d22;
--color-bg-alt: #292c34;
--color-text: #fff;
}
body {
background-color: var(--color-bg);
}
*,
*:before,
*:after {
box-sizing: inherit;
font-family: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
svg {
fill: currentColor;
vertical-align: middle;
}
.wrapper {
margin-left: auto;
margin-right: auto;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 1024px;
padding: 32px 64px;
border-radius: 22px;
background-color: var(--color-bg-alt);
color: var(--color-text);
}
@media (max-width: 759px) {
.wrapper {
padding: 16px;
flex-direction: column;
}
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
outline: 0px;
border: 0px;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
.header_form-icon {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.header_form-icon .icon {
position: absolute;
right: 10px;
}
.header_form-icon .icon {
position: absolute;
fill: #000;
}
.header_form-input {
width: 0px;
background-color: transparent;
}
.header_form-input {
width: 90%;
color: #000;
background-color: #fff;
cursor: auto;
padding: 1rem;
border-radius: 40px;
}
#header_form input:-moz-placeholder {
font-size: small;
}
#header_form input::-webkit-input-placeholder {
font-size: small;
}
.header,
.header_actions {
display: flex;
align-items: center;
justify-content: space-between;
}
#img_icon {
border-radius: 50%;
object-fit: cover;
object-position: center;
width: 32px;
height: 32px;
border: 3px solid #dee1e3;
}
.movie {
display: flex;
gap: 3rem;
margin-bottom: 2rem;
margin-top: 2rem;
}
@media (max-width: 759px) {
.movie {
flex-direction: column;
}
}
.movie_img img {
min-width: 280px;
max-width: 280px;
border-radius: 22px;
}
@media (max-width: 759px) {
.movie_img img {
min-width: 100%;
max-width: 100%;
}
}
.movie_info {
margin-top: 2px;
}
.movie_title {
font-size: 2rem;
margin-bottom: 2rem;
}
.movie_desc {
color: #dee1e3;
margin-bottom: 2rem;
}
.movie_details {
margin-bottom: 2rem;
}
.movie_details h2 {
font-size: 1.9rem;
margin-bottom: 1rem;
}
.flex {
display: flex;
gap: 0.5rem;
}
@media (max-width: 759px) {
.flex {
flex-wrap: wrap;
}
}
.flex li {
color: #dee1e3;
}
.flex li span {
color: #fff;
}
.btn {
border-radius: 40px;
background-color: var(--color-primary);
color: #fff;
display: inline-block;
padding: 1rem 1.5rem;
text-decoration: none;
text-align: center;
}
.btn svg {
margin-right: 4px;
}
.episodes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
grid-gap: 1rem;
}
.episodes li a {
display: inline-block;
}
.episodes li a img {
height: 320px;
border-radius: 22px;
object-fit: cover;
object-position: center;
}
@media (max-width: 759px) {
.episodes li a img {
height: auto;
object-fit: initial;
}
}
.episodes_list h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.footer {
text-align: center;
margin-top: 2rem;
font-size: small;
}
const get_movie = (value = "Game of thrones") => {
// Challenge: Display a loader
fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)
.then((response) => response.json())
.then((data) => {
if (data._embedded.episodes.length > 0) {
const new_data = data._embedded.episodes.slice(0, 4);
create_UI(data);
return create_episodesUI(new_data);
} else {
return create_UI(data);
}
})
.catch((error) => {
console.log(error);
// Challenge: Display error messages
});
};
const create_UI = (data) => {
const movie_img = document.querySelector("#img_src");
const movie_icon = document.querySelector("#img_icon");
const movie_title = document.querySelector(".movie_title");
const movie_desc = document.querySelector(".movie_desc");
const movie_link = document.querySelector(".btn");
const movie_date = document.querySelector("#movie_date");
const movie_rating = document.querySelector("#movie_rating");
const movie_runtime = document.querySelector("#movie_runtime");
const movie_status = document.querySelector("#movie_status");
// set the UI
movie_icon.src = data.image.medium;
movie_img.src = data.image.original;
movie_title.textContent = data.name;
movie_desc.innerHTML = data.summary;
movie_link.href = data.officialSite;
movie_date.textContent = data.premiered;
movie_rating.textContent = data.rating.average;
movie_runtime.textContent = data.runtime;
movie_status.textContent = data.status;
};
const create_episodesUI = (data) => {
//episodes
const episodes_list = document.querySelector("#episodes");
const episodes_title = document.querySelector(".episodes_title");
// remove children if they exist
episodes_title.textContent = "";
episodes_list.innerHTML = "";
// add the title
episodes_title.textContent = "Episodes";
data.forEach((episode) => {
let li = document.createElement("li");
const link = document.createElement("a");
const img = document.createElement("img");
img.src = episode.image.original;
// Append the text node to anchor element.
link.appendChild(img);
// Set the title.
link.title = episode.name;
// Set the href property.
link.href = episode.url;
// Append the anchor element to the body.
li.appendChild(link);
episodes_list.appendChild(li);
});
};
// handle form submit
const search = (event) => {
event.preventDefault();
const value = document.querySelector(".header_form-input").value;
get_movie(value);
};
// create default UI
get_movie();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.