Movie App using HTML, CSS and JavaScript

codinglabsolution
Movie App using HTML, CSS and JavaScript
This project offers a user-friendly interface for browsing and exploring a vast collection of movies. Leveraging HTML for structure, CSS for styling, and JavaScript for functionality, this app provides seamless navigation and a visually appealing experience for movie enthusiasts.

Movie App using HTML, CSS and JavaScript.[Source Code]


To create this website, you'll need two files: an HTML file and a CSS file. Start by crafting an HTML file named index.html. Remember to ensure that the file has a .html extension.


  • DOCTYPE Declaration and HTML Tag:
    • Declares the HTML document type and specifies the language as English.
  • Head Section:
    • Includes the viewport meta tag for responsive design.
    • Sets the title of the webpage as "Movie Guide App".
    • Links the Google Font "Poppins" to be used in the document.
    • Links an external stylesheet named "style.css" for additional styling.
  • Body Section:
    • Contains a container div that wraps the content of the webpage.
    • Inside the container, there's a search container div which includes an input field for entering movie names and a button for initiating the search.
    • Displays search results in a div with the id "result".
  • Script Section:
    • Defines a JavaScript block for adding interactivity to the webpage.
    • Initializes variables to reference the input field, search button, and result container.
    • Defines a function getMovie() to fetch movie data from the OMDb API based on the user's input.
    • Sets up event listeners for the search button click event and the window load event to trigger the getMovie() function.
    • Dynamically updates the content of the result div based on the fetched movie data or error messages.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Movie Guide App</title> <!-- Google Font --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet" /> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="search-container"> <input type="text" placeholder="Enter movie name heree..." id="movie-name" value="dark knight" /> <button id="search-btn">Search</button> </div> <div id="result"></div> </div> <script> //Enter the API key recieved on your email here key = "12345a6b"; //Initial References let movieNameRef = document.getElementById("movie-name"); let searchBtn = document.getElementById("search-btn"); let result = document.getElementById("result"); //Function to fetch data from API let getMovie = () => { let movieName = movieNameRef.value; let url = `http://www.omdbapi.com/?t=${movieName}&apikey=${key}`; //If input field is empty if (movieName.length <= 0) { result.innerHTML = `<h3 class="msg">Please Enter A Movie Name</h3>`; } //If input field is NOT empty else { fetch(url) .then((resp) => resp.json()) .then((data) => { //If movie exists in database if (data.Response == "True") { result.innerHTML = ` <div class="info"> <img src=${data.Poster} class="poster"> <div> <h2>${data.Title}</h2> <div class="rating"> <img src="star-icon.svg"> <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> `; } //If movie does NOT exists in database else { result.innerHTML = `<h3 class='msg'>${data.Error}</h3>`; } }) //If error occurs .catch(() => { result.innerHTML = `<h3 class="msg">Error Occured</h3>`; }); } }; searchBtn.addEventListener("click", getMovie); window.addEventListener("load", getMovie); </script> </body> </html>

CSS adds style to an HTML page, making it visually appealing. To enhance the attractiveness of your page, generate a CSS file named style.css. Ensure that the file has a .css extension.


  • Universal Selector:
    • Resets padding and margin to 0, and sets the box-sizing to border-box to include padding and border in the element's total width and height.
    • Sets the default font family to "Poppins", sans-serif.
  • Body Styles:
    • Sets the height of the body to 100vh (viewport height).
    • Applies a linear gradient background from #000000 (black) to #ffb92a (golden yellow) at a 50% split.
  • Container Styles:
    • Sets the font size to 16px.
    • Limits the width to 90vw (viewport width) with a maximum width of 37.5em.
    • Applies padding, background color, border radius, and box shadow for styling.
    • Centers the container horizontally and vertically on the page using absolute positioning and transform.
  • Script Section:
    • Defines a JavaScript block for adding interactivity to the webpage.
    • Initializes variables to reference the input field, search button, and result container.
    • Defines a function getMovie() to fetch movie data from the OMDb API based on the user's input.
    • Sets up event listeners for the search button click event and the window load event to trigger the getMovie() function.
    • Dynamically updates the content of the result div based on the fetched movie data or error messages.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  body {
    height: 100vh;
    background: linear-gradient(#000000 50%, #ffb92a 50%);
  }
  .container {
    font-size: 16px;
    width: 90vw;
    max-width: 37.5em;
    padding: 3em 1.8em;
    background-color: #201f28;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 0.6em;
    box-shadow: 1.2em 2em 3em rgba(0, 0, 0, 0.2);
  }
  .search-container {
    display: grid;
    grid-template-columns: 9fr 3fr;
    gap: 1.2em;
  }
  .search-container input,
  .search-container button {
    font-size: 0.9em;
    outline: none;
    border-radius: 0.3em;
  }
  .search-container input {
    background-color: transparent;
    border: 1px solid #a0a0a0;
    padding: 0.7em;
    color: #ffffff;
  }
  .search-container input:focus {
    border-color: #ffffff;
  }
  .search-container button {
    background-color: #ffb92a;
    border: none;
    cursor: pointer;
  }
  #result {
    color: #ffffff;
  }
  .info {
    position: relative;
    display: grid;
    grid-template-columns: 4fr 8fr;
    align-items: center;
    margin-top: 1.2em;
  }
  .poster {
    width: 100%;
  }
  h2 {
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    margin: 0.6em 0 0.9em 0;
  }
  .rating img {
    width: 1.2em;
  }
  .rating h4 {
    display: inline-block;
    font-size: 1.1em;
    font-weight: 500;
  }
  .details {
    display: flex;
    font-size: 0.95em;
    gap: 1em;
    justify-content: center;
    color: #a0a0a0;
    margin: 0.6em 0;
    font-weight: 300;
  }
  .genre {
    display: flex;
    justify-content: space-around;
  }
  .genre div {
    border: 1px solid #a0a0a0;
    font-size: 0.75em;
    padding: 0.4em 1.6em;
    border-radius: 0.4em;
    font-weight: 300;
  }
  h3 {
    font-weight: 500;
    margin-top: 1.2em;
  }
  p {
    font-size: 0.9em;
    font-weight: 300;
    line-height: 1.8em;
    text-align: justify;
    color: #a0a0a0;
  }
  .msg {
    text-align: center;
  }
  @media screen and (max-width: 600px) {
    .container {
      font-size: 14px;
    }
    .info {
      grid-template-columns: 1fr;
    }
    .poster {
      margin: auto;
      width: auto;
      max-height: 10.8em;
    }
  }
We trust that you'll appreciate this captivating Movie App using HTML, CSS and JavaScript.
<->
Movie App using HTML, CSS and JavaScript, please feel free to reach out to us. You can either contact us directly or leave a comment, and we will do our best to assist you promptly.

Conclusion

Congratulations on completing our comprehensive guide to Movie App using HTML, CSS and JavaScript! Throughout this tutorial, you've delved into the fundamentals of front-end development, from crafting the HTML structure to adding interactivity with JavaScript. Remember, web development is an ever-evolving field, and this project is just the beginning. Keep experimenting, exploring, and refining your skills. Join developer communities, seek feedback, and stay curious—there's always more to learn!

codinglabsolution says...
code copied

إرسال تعليق

ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.