Movie App using HTML, CSS and JavaScript (Source Code) - Coding Torque

byPiyush Patil -
0
Movie App using HTML, CSS and JavaScript

Welcome to Coding Torque! Are you ready to build a powerful and feature-rich Movie App using HTML, CSS, and JavaScript? In this tutorial, we will guide you through the process of creating a dynamic and interactive web application that allows you to browse and search through the vast IMDB database of films. You'll learn how to use APIs to access and display data from external sources, and you'll also learn how to add search functionality and other advanced features to your app. Whether you're a beginner or an experienced coder, this project is sure to challenge and engage you. So let's get started!

Join us on Telegram Join Now

Before we start, here are some more JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. QR Code Generator using JavaScript


I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.


Demo



HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Movie App using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>


Paste the below code in your <body> tag 

<div class="wrapper">
    <div class="search-block">
        <a href="/">
            <h1>TheMovieDB</h1>
        </a>
        <form id="search-form">
            <input type="text" id="query" placeholder="Search movies..." />
            <button class="btn" type="submit">Search</button>
        </form>
    </div>
    <div class="row" id="root"></div>
</div>


Output Till Now


CSS Code

Create a file style.css and paste the code below.  

* {
  margin: 0;
  box-sizing: border-box;
  outline: none;
}

body {
  color: white;
  font-family: "microsoft yahei", arial, -apple-system, BlinkMacSystemFont,
    "segoe ui", roboto, oxygen, cantarell, "helvetica neue", ubuntu, sans-serif;
  background: #080823;
}

.btn {
  color: white;
  cursor: pointer;
  text-decoration: none;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: inherit;
}

.btn:hover {
  background: #06c3dd;
  border-color: #06c3dd;
}

.row {
  display: flex;
  max-width: 1200px;
  gap: 15px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
  padding: 15px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.wrapper .card {
  position: relative;
  font-size: 14px;
  line-height: 21px;
  width: 285px;
  height: 360px;
  overflow: hidden;
  transition: 0.5s ease all;
}

.wrapper .card .card-content {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 50px 10px 7px;
  background-image: linear-gradient(
    180deg,
    rgba(51, 55, 69, 0),
    rgba(16, 21, 40, 0.95)
  );
  transition: inherit;
}

.wrapper .card .card-content .card-cont-header {
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .card .card-content .describe {
  max-height: 0;
  opacity: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: inherit;
}

.wrapper .card:hover {
  cursor: pointer;
}

.wrapper .card:hover .card-content {
  background-image: linear-gradient(180deg, rgba(51, 55, 69, 0) 0, #101528 48%);
}

.wrapper .card:hover .btn {
  background: #06c3dd;
  border-color: #06c3dd;
}

.wrapper .card:hover .describe {
  max-height: 200px;
  padding: 8px 0;
  opacity: 1;
}

.search-block {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  align-items: center;
  margin-bottom: 15px;
  margin: 15px 0 30px 0;
}

.search-block #search-form {
  display: flex;
  max-width: 400px;
}

.search-block input {
  width: 100%;
  max-width: 400px;
  padding: 15px;
  border-radius: 0;
  border: none;
  background: rgba(255, 255, 255, 0.75);
}

.search-block .btn {
  width: 120px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid lightgray;
}

.search-block .btn:hover {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid white;
}

.btn-load {
  background-color: skyblue;
  padding: 10px 25px;
  border: none;
  margin-top: 15px;
}

a {
  color: white;
  text-decoration: none;
}

Output Till Now

Movie App using HTML, CSS and JavaScript

JavaScript Code

Create a file script.js and paste the code below.

Get your own API Key from imdb and replace it in the code. 

const apiKey = "YOUR_API_KEY"
const URL =
    "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=YOUR_API_KEY&page=1"const imgURL = "https://image.tmdb.org/t/p/w1280"
const searchURL =
    "https://api.themoviedb.org/3/search/movie?&api_key=YOUR_API_KEY&query="
const form = document.getElementById("search-form")
const query = document.getElementById("query")
const root = document.getElementById("root")
let movies = [],
    page = 1,
    inSearchPage = false

// Fetch json data from URL
async function fetchData(URL) {
    try {
        const data = await fetch(URL).then((res) => res.json())
        return data
    } catch (error) {
        console.log(error.message)
        return null
    }
}

const fetchAndShowResults = async (URL) => {
    const data = await fetchData(URL)
    data && showResults(data.results)
}

const getSpecificPage = (page) => {
    const URL = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${apiKey}&page=${page}`
    fetchAndShowResults(URL)
}

const movieCard = (movie) =>
    `<div class="col">
          <div class="card">
            <a class="card-media" href="./img-01.jpeg">
              <img src="${movie.poster_path}" alt="PUBG Mobile" width="100%" />
            </a>

            <div class="card-content">
              <div class="card-cont-header">
                <div class="cont-left">
                  <h3 style="font-weight: 600">${movie.original_title}</h3>
                  <span style="color: #12efec">${movie.release_date}</span>
                </div>
                <div class="cont-right">
                  <a href="${movie.poster_path}" target="_blank" class="btn">See image</a>
                </div>
              </div>

              <div class="describe">
                ${movie.overview}
              </div>
            </div>
          </div>
        </div>`

const showResults = (items) => {
    let content = !inSearchPage ? root.innerHTML : ""
    if (items && items.length > 0) {
        items.map((item) => {
            let { poster_path, original_title, release_date, overview } = item

            if (poster_path) {
                poster_path = imgURL + poster_path
            } else {
                poster_path = "./img-01.jpeg"
            }

            if (original_title.length > 15) {
                original_title = original_title.slice(0, 15) + "..."
            }

            if (!overview) {
                overview = "No overview yet..."
            }

            if (!release_date) {
                release_date = "No release date"
            }

            const movieItem = {
                poster_path,
                original_title,
                release_date,
                overview,
            }

            content += movieCard(movieItem)
        })
    } else {
        content += "<p>Something went wrong!</p>"
    }

    root.innerHTML = content // Inject content to root
}

const handleLoadMore = () => {
    getSpecificPage(++page)
}

const detectEndAndLoadMore = (e) => {
    let el = document.documentElement
    if (
        !inSearchPage &&
        el.scrollTop + el.clientHeight == el.scrollHeight
    ) {
        console.log("BINGO!")
        handleLoadMore()
    }
}

form.addEventListener("submit", async (e) => {
    inSearchPage = true
    e.preventDefault()
    const searchTerm = query.value
    searchTerm && fetchAndShowResults(searchURL + searchTerm)
    query.value = ""
})

window.addEventListener("scroll", detectEndAndLoadMore)

function init() {
    inSearchPage = false
    fetchAndShowResults(URL)
}

init();
Join us on Telegram Join Now

Written by: Coding Torque | Piyush Patil

Code Credits: @aashish2058

If you have any doubts or any project ideas feel free to Contact Us 

Hope you find this post helpful💖
 
 Follow us on Instagram for more projects like this👨‍💻 

Tags:

Post a Comment

Previous Post Next Post