script.js

let inp= document.querySelector('.movie-name');
let searchBtn= document.querySelector('.search-btn');

let result= document.querySelector('.result');

async function getMovie(){
    const key= "9f8283fe";
let url = `https://www.omdbapi.com/?apikey=${key}&t=${inp.value}&page=1`;
    if(inp.value === ""){
       
        result.innerHTML= `
        <h3 class = 'msg'>Please enter a movie name</h3>
        `;
    }
    else{
        const response = await fetch(url);
    const data = await response.json();
    console.log(data);

    result.innerHTML=`
            <div class="info">
                <img src=${data.Poster} class="poster">
                <div>
                    <h2>${data.Title}</h2>
                    <div class="rating">
                        <img src="https://cdn-icons-png.flaticon.com/128/889/889118.png">
                        <h4>${data.imdbRating}</h4>
                    </div>
                    <div class="details">
                        <span>${data.Rated}</span>
                        <span>${data.Year}</span>
                        <span>${data.Runtime}</span>
                    </div>
                    <div class="genre">
                        <div>${data.Genre.split(",").join("</div><div>")}</div>
                    </div>
                </div>
            </div>
            <h3>Plot:</h3>
            <p>${data.Plot}</p>
            <h3>Cast:</h3>
            <p>${data.Actors}</p>
            
        `;
    }
    
}

searchBtn.addEventListener('click', getMovie);
window.addEventListener('keydown', (e)=>{
    if(e.key === 'Enter'){
        getMovie();
    }
}
);