Creating movies searching webpage using JS
Website : EnigmaMovieSearch
Source code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enigma</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="img/i1.png" type="image/x-icon">
</head>
<body>
<div class="box">
<div class="container">
<!-- contains all ui -->
<div class="search-box">
<!-- searching elements -->
<input type="text" id="movieInput" placeholder="Enter movie or series name" value="">
<button id="btn">Search</button>
</div> <!-- end of search-box -->
<div id="top">
<div class="hero">
<div id="logo">
<h1>Enigma</h1>
<img src="img/i5.png" alt="logo">
</div>
<div class="slogan">
<h3>Search any movie or series easily.</h3>
</div>
</div>
</div> <!-- End of top -->
</div> <!-- end of container -->
</div>
<script src="script.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
*{
margin:0px;
padding:0px;
box-sizing:border-box;
font-family: 'Poppins', sans-serif;
}
::placeholder {
color: #062925;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #062925;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #062925;
}
.box{
width: 100%;
height: 100vh;
display: flex;
justify-self: center;
align-items: center;
background-color:#062925 ;
color: white;
}
#logo h1{
background-image: linear-gradient(90deg,#24C6DC,#514A9D);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
font-size: 7em;
margin-right: 20px;
}
#logo img{
width: 90px;
}
#logo {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.hero{
display: flex;
flex-direction: column;
}
.slogan h3{
font-size: 3em;
background-image: linear-gradient(45deg,#86A8E7,#99f2c8);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
line-height: 1.1;
}
.container{
width: 85%;
margin: 0px auto;
background-color: #085F63;
box-shadow: 0px 0px 6px #111;
border-radius: 10px;
padding: 2vw 5vw;
position: relative;
}
.search-box{
width: 100%;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 12px;
}
.search-box input{
background-color: #3A9188;
color: white;
border: none;
border-radius: 4px;
padding: 0.4vw 1vw;
width: 40%;
font-weight:550;
font-size: 1.4em;
}
.search-box button{
background-color: #FCCF4D;
border: none;
outline: none;
padding: 0.4vw 1vw;
font-size: 1.4em;
font-weight: 600;
letter-spacing: 1px;
}
#top{
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.poster{
width: 30%;
}
.poster img{
width:300px;
height: auto;
}
.content{
width: 60%;
font-size: 14px;
text-align: justify;
display: flex;
flex-direction: column;
gap: 13px;
}
#title{
font-size: 2.6em;
line-height: 1.25;
font-weight: 400;
}
.content ul{
width: 100%;
display: flex;
justify-content: space-between;
list-style: none;
font-size: 1.5em;
color:rgba(255, 255, 255, 0.5)
}
#star{
display: flex;
align-items: center;
gap: 2px;
}
.content h4{
font-size: 1.4em;
font-weight: 100;
opacity: 0.9;
color: #C4DFDF;
}
.content h2{
font-size: 1.6em;
line-height: 1.2;
font-weight: 500;
color: #C4DFDF;
opacity: 0.98;
}
.content h2 span{
color: white;
}
#nodata{
width: 100%;
text-align: center;
font-weight:0;
letter-spacing: 2px;
}
/* responsive */
@media (max-width:800px)
{
.search-box input{
flex: 1;
}
#top{
margin-top: 10px;
flex-direction: column;
}
.poster{
width: 100%;
text-align: center;
}
.content{
width: 100%;
gap: 8px;
}
.poster img{
width:250px;
height: auto;
}
#title{
font-size: 2em;
}
.content h4{
font-size: 1.1em;
opacity: 1;
font-weight: 400;
}
.content h2{
font-size: 1.4em;
color: white;
}
.content ul{
font-size: 1.29em;
opacity: 1;
font-weight: 800;
}
#logo h1{
font-size: 4em;
}
#logo img{
width: 50px;
}
.slogan{
font-size: 1em;
line-height: 1.4;
}
}
@media (max-width:1030px){
.poster img{
width: 250px;
}
.content{
gap: 4px;
}
}
@media (max-width:900px) {
.poster img{
width: 220px;
}
.content{
gap: 4px;
}
}
script.js
let movieInput=document.getElementById("movieInput");
let btn=document.getElementById("btn");
let top1=document.getElementById("top");
function findMovie(){
let movieName=movieInput.value;
let url=`https://www.omdbapi.com/?t=${movieName}&apikey=4fbe5bae`;
if (movieName.length<=0){
alert("Please enter movie name");
}
else{
fetch(url)
.then((resp)=>resp.json())
.then((data)=>{
console.log(data);
if (data.Response == 'True')
{
top1.innerHTML=`
<!--poster-->
<div class="poster">
<img src="${data.Poster}" alt="movie Poster">
</div>
<div class="content">
<!-- movie information -->
<h1 id="title">${data.Title}</h1>
<ul>
<li>${data.Year}</li>
<li>${data.Runtime}</li>
<li id="star"><img src="img/star.png" alt="star" width="30px">${data.imdbRating}</li>
</ul>
<h4>Genre : <span>${data.Genre}</span></h4>
<h4>Director : <span>${data.Director}</span></h4>
<h4>Writer : <span>${data.Writer}</span></h4>
<h2>Plot : <span>${data.Plot}</span></h2>
<h2>Cast : <span>${data.Actors}</span></h2>
</div>
`;
}
else{
top1.innerHTML=`<div id="nodata"><h3> ${data.Error}</h3></div>`;
}
});
}
}
btn.addEventListener("click",findMovie);
// window.addEventListener("load",findMovie);
Comments
Post a Comment