Learn by projects🚀
Movie App using HTML, CSS and JavaScript (Source Code) – Coding Torque
- January 22, 2023
- Advance , API Projects , HTML & CSS , JavaScript , Web Development
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!
Before we start, here are some 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. Whack a Mole Game using JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Starter Template
Paste the below code in your <body> tag, output till now.
Create a file style.css and paste the code below.
JavaScript Code
Related posts.
Gallery hover effect using HTML and CSS
- Piyush Patil
- June 15, 2024
- HTML & CSS , Beginner , Card Designs , Frontend , Web Development
Text with hover effect using pure css
- June 14, 2024
- HTML & CSS , Beginner , Frontend , Web Development
Team Profile with hover effect using HTML and CSS
- June 13, 2024
Instantly share code, notes, and snippets.
Mark-Cooper-Janssen-Vooles / javascript-movie-challenge.js
- Download ZIP
- Star ( 0 ) 0 You must be signed in to star a gist
- Fork ( 0 ) 0 You must be signed in to fork a gist
- Embed Embed this gist in your website.
- Share Copy sharable link for this gist.
- Clone via HTTPS Clone using the web URL.
- Learn more about clone URLs
- Save Mark-Cooper-Janssen-Vooles/1940bf41f86a033027dcab79c2e07aff to your computer and use it in GitHub Desktop.
| // 1. Implement topWatchlistedMoviesAmongFriends method that will return an array of top four movie titles, | |
| // that have been most watchlisted by friends of a given user. | |
| // 2. If there are no such movies, then an empty list should be returned or as many movies as possible. | |
| // 3. Movies that have equal watchlist count, should be ordered alphabetically. | |
| let movies = [{ | |
| "title": "The Shawshank Redemption", | |
| "duration": "PT142M", | |
| "actors": [ "Tim Robbins", "Morgan Freeman", "Bob Gunton" ], | |
| "ratings": [], | |
| "watchlist": [15291, 51417, 62289, 6146, 71389, 93707] | |
| }, | |
| { | |
| "title": "The Godfather", | |
| "duration": "PT175M", | |
| "actors": [ "Marlon Brando", "Al Pacino", "James Caan" ], | |
| "ratings": [], | |
| "watchlist": [62289, 66380, 34139, 6146] | |
| }, | |
| { | |
| "title": "The Dark Knight", | |
| "duration": "PT152M", | |
| "actors": [ "Christian Bale", "Heath Ledger", "Aaron Eckhart" ], | |
| "ratings": [], | |
| "watchlist": [51417, 62289, 6146, 71389, 7001] | |
| }, | |
| { | |
| "title": "Pulp Fiction", | |
| "duration": "PT154M", | |
| "actors": [ "John Travolta", "Uma Thurman", "Samuel L. Jackson" ], | |
| "ratings": [], | |
| "watchlist": [7001, 9250, 34139, 6146] | |
| }, | |
| { | |
| "title": "Schindler's List", | |
| "duration": "PT195M", | |
| "actors": ["Liam Neeson", "Ralph Fiennes", "Ben Kingsley"], | |
| "watchlist": [15291, 51417, 7001, 9250, 93707] | |
| }]; | |
| let users = [{ | |
| "userId": 15291, | |
| "email": "[email protected]", | |
| "friends": [7001, 51417, 62289] | |
| }, | |
| { | |
| "userId": 7001, | |
| "email": "[email protected]", | |
| "friends": [15291, 51417, 62289, 66380] | |
| }, | |
| { | |
| "userId": 51417, | |
| "email": "[email protected]", | |
| "friends": [15291, 7001, 9250] | |
| }, | |
| { | |
| "userId": 62289, | |
| "email": "[email protected]", | |
| "friends": [15291, 7001] | |
| }, | |
| { | |
| "userId": 1, | |
| "email": "[email protected]", | |
| "friends": [15291] | |
| } | |
| ]; | |
| let aFunction = (person, movies) => { | |
| //returns an array of movie titles, with duplicates if there are any. | |
| movieTitleArray = [] | |
| person.friends.forEach(function(friend){ | |
| movies.forEach(function(movie){ | |
| if(movie.watchlist.includes(friend)){ | |
| movieTitleArray.push(movie.title) | |
| } | |
| }) | |
| }) | |
| //returns an array of objects with count and name. With duplicates. | |
| let newArray = []; | |
| movieTitleArray.map(function(item){ | |
| let newObj = {}; | |
| newObj["count"] = 1; | |
| newObj["name"] = item; | |
| newArray.push(newObj); | |
| }) | |
| //returns an array of objects with their count "reduced" into, no duplicates. | |
| //no idea how this code works. | |
| let finalArray = newArray.reduce((a, b) => { | |
| a[b.name] = (a[b.name] || 0) + b.count | |
| return a; | |
| }, {}) | |
| //converts the array of objects to an array of arrays | |
| let anArray = Object.keys(finalArray).map((key) => { | |
| return [key, finalArray[key]]; | |
| }) | |
| //sorts array first by view count, then by alphabetical order if the same view count. | |
| let anotherArray = anArray.sort((a, b) => { | |
| let theA = a[1]; | |
| let theB = b[1]; | |
| if (theA > theB) { | |
| return -1; | |
| } else if (theA < theB) { | |
| return 1; | |
| } else if (theA === theB) { | |
| // order alphabetically | |
| if(a[0] < b[0]){ | |
| return -1; | |
| } else if (a[0] > b[0]) { | |
| return 1; | |
| } else { | |
| return 0; | |
| } | |
| } | |
| }) | |
| //checks to see if there is more than 4 items in the array. if there is, it returns an array of only 4. | |
| let theReturn = (anotherArray) => { | |
| let fourMostWatched = []; | |
| if (anotherArray.length >= 4) { | |
| fourMostWatched.push(anotherArray[0]); | |
| fourMostWatched.push(anotherArray[1]); | |
| fourMostWatched.push(anotherArray[2]); | |
| fourMostWatched.push(anotherArray[3]); | |
| } | |
| return fourMostWatched; | |
| } | |
| //sets this array of 4 to a variable | |
| let fourMostWatched = theReturn(anotherArray); | |
| //checks to see if array of 4 exists, if so returns that array, if not returns however many it can. use users[4] to check as the function argument | |
| return fourMostWatched.length > 0 ? fourMostWatched : anotherArray; | |
| } | |
| console.log((aFunction(users[0], movies))); |
- DSA with JS - Self Paced
- JS Tutorial
- JS Exercise
- JS Interview Questions
- JS Operator
- JS Projects
- JS Examples
- JS Free JS Course
- JS A to Z Guide
- JS Formatter
Movie Search Application using JavaScript
In this article, we are going to make a movie search application using JavaScript . It will use an API which is a RESTful web service to obtain movie information. We will be using HTML to structure our project, CSS for designing purposes and JavaScript will be used to provide the required functionality.
Preview Image:
Prerequisites:
- Start by creating the HTML structure for your Movie Search Application. Use semantic tags like <header> , <main>. Include Input tag and a search button.
- Style your website using CSS to enhance its visual appeal and responsiveness.
- Use JavaScript to add interactivity to your movie search app. Utilize document.getElementById to select HTML elements like buttons and the container for displaying movie results. Implement event listeners for interactive elements such as the search button.
- Implement the logic to fetch movie data from an API (e.g., OMDB API) and display the results dynamically on the webpage.
- Adding proper validations, such as checking if the search input is empty, handling errors during API fetch.
- OMDb API which is a RESTful web service to obtain movie information.
- To get your api key visit: OMDb api key
Example: In this example we have used above explained approach.
Similar Reads
- Web Technologies
- JavaScript-Projects
Please Login to comment...
- How to Underline in Discord
- How to Block Someone on Discord
- How to Report Someone on Discord
- How to add Bots to Discord Servers
- GeeksforGeeks Practice - Leading Online Coding Platform
Improve your Coding Skills with Practice
What kind of Experience do you want to share?
- Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
- Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
- OverflowAI GenAI features for Teams
- OverflowAPI Train & fine-tune LLMs
- Labs The future of collective knowledge sharing
- About the company Visit the blog
Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Get early access and see previews of new features.
Imagine you have a movie collection, and you want to write code that returns your review for each one. Here are the movies and your reviews: [closed]
i am getting confused , how to do this task
Imagine you have a movie collection, and you want to write code that returns your review for each one. Here are the movies and your reviews: "Toy Story 2" - "Great story. Mean prospector." "Finding Nemo" - "Cool animation, and funny turtles." "The Lion King" - "Great songs." Write a function named getReview that takes in a movie name and returns its review based on the information above. If given a movie name not found just return "I don't know!". Use a structure learned in an earlier lesson (NOT if/else statements) to write this function.
some sugguest the rightway to doit.
- 1 What did you try so far? – Armin Commented Feb 14, 2017 at 14:00
- What course is this? There are many ways to solve this, but the problem requires the use of "a structure learned in an earlier lesson," so we're unable to tell which is considered "the rightway to doit." – Quangdao Nguyen Commented Feb 14, 2017 at 14:09
- It might be a good idea to read this article on posting questions in SO: stackoverflow.com/help/mcve You might get a better responce. – AMouat Commented Feb 14, 2017 at 14:14
- don't spam tags, there's no jquery or angular here. Then, this code is invalid and will definitely throw some syntax errors, you should read them, check your dev tools. for is a loop, not a case . a[0]="Finding Nemo" this is an assignment, not a comparison; and written as some kind of condition, always true. next, even as comparisons, these make no sense, why do you compare all of these values to the first item in the array? and you completely ignore the function argument. And finally, Use a structure learned in an earlier lesson (NOT if/else statements) to write this function – Thomas Commented Feb 14, 2017 at 14:32
3 Answers 3
Use an object to do this instead of an array. That way you can use the movie title as a key to find the review. This way the logic to retrieve data is simply to access the object - wrapping this in a function would be largely redundant. Try this:
var movies = { "Toy Story 2": "Great story. Mean prospector.", "Finding Nemo": "Cool animation, and funny turtles.", "The Lion King": "Great songs." } var options = Object.keys(movies).map(function(k) { return '<option>' + k + '</option>'; }) $('select').html(options.join('')).change(function() { $('div').html(movies[this.value]); }).change(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select></select> <div></div>
The important part of the above is the use of movies[key] to retrieve the review text.
You should create your data structure properly.
var getReview = function (movie) { var array = [{ "name": "Toy Story 2", "review" : "Great story. Mean prospector." }]; var m = array.filter(x => x.name == movie); console.log(m.length ? m[0].review : "Not Found") }; getReview("Toy Story 2") getReview("Toy Story 3")
Not the answer you're looking for? Browse other questions tagged javascript jquery angularjs or ask your own question .
- The Overflow Blog
- Where developers feel AI coding tools are working—and where they’re missing...
- He sold his first company for billions. Now he’s building a better developer...
- Featured on Meta
- User activation: Learnings and opportunities
- Preventing unauthorized automated access to the network
- Should low-scoring meta questions no longer be hidden on the Meta.SO home...
- Announcing the new Staging Ground Reviewer Stats Widget
Hot Network Questions
- A sweet Nonodoku - Nonodoku
- 2000s creepy independant film with a voice-over of a radio host giving bad self-help advice
- Could a Project like Orion be built today with non nuclear weapons?
- How can I grep to include the surrounding lines?
- Solving a "One Away.." connections group with nine guesses
- Undamaged tire repeatedly deflating
- CH in non-set theoretic foundations
- How to apply a function to specific rows of a matrix
- Why did the Apollo 13 tank #2 have a heater and a vacuum?
- What evidence exists for the historical name of Kuwohi Mountain (formerly Clingmans Dome)?
- How can moving observer explain non-simultaneity?
- Is a private third party allowed to take things to court?
- What is the smallest interval between two palindromic times on a 24-hour digital clock?
- How is the universe able to run physics so smoothly?
- is it okay to mock a database when writing unit test?
- \element and \lowercase or \MakeLowercase not working together
- How do I link a heading containing spaces in Markdown?
- I want a smooth orthogonalization process
- Tikz template for organization chart
- Is it even possible to build a beacon to announce we exist?
- Why does Voyager use consumable hydrazine instead of reaction wheels that only rotate when moving the spacecraft?
- What is the mechanical equivalent of an electronic AND gate?
- Is there a way to have my iPhone register my car which doesn't have carplay, only for the "Car is parked at"-feature?
- Sticky goo making it hard to open and close the main 200amp breaker
3d Cube From 2D Image CSS
Custom right click context menu | javascript, christmas card with glass effect | html & css, wordle game javascript, movie guide app with javascript.
Hey everyone. Welcome to today’s tutorial. Today’s tutorial will teach us how to create a movie guide app. To build this app, we need HTML, CSS and Javascript. We make use of the Open Movie Database API to fetch the information.
I would suggest this project to javascript intermediates who have basic fetch knowledge (). If you are looking for more projects to improve your javascript skills, you should check out this playlist from my youtube channel.
This playlist consists of about 90+ javascript projects. The difficulty of these projects varies from easy to quite complex. Therefore this playlist is suitable for all kinds of javascript learners.
Let us take a look at how this project works. Our project consists of a search bar with an input field and a search button. The user enters the movie of their choice and hits the button. We display information related to the movie.
If the input field is empty, we display the message – ‘Please Enter A Movie Name’. In case the movie entered by the user does not exist in the database, we show the message- ‘Movie Not Found’. Finally, if some error occurs while fetching the data from the API, we display the message- ‘Error Occurred.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you should check out the video down below. Also, subscribe to my youtube channel, where I post exciting tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – “Movie Guide App”. Inside this folder, we have five files. The first is index.html which is the HTML document.
The next is style.css which is the stylesheet. Next, we have script.js, a script file. We have one more script file called key.js that I have used to store the API key and keep it hidden for privacy reasons. The final file is the star icon SVG.
We start with the HTML section. First, copy the code below and paste it into your HTML document.
Next, we style these elements using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
Javascript:
Finally, we add functionality to this code using Javascript. To do this, copy the code below and paste it into your script file.
Next, go to this link . Submit the form and you will receive your API key at your email address. Copy the API key and save it as a global variable key in the key.js file.
That’s it for this tutorial. If you have any issues while creating this code, you can download the source code by clicking on the download button below. Also, I would love to hear from you guys, so if you have any queries, suggestions or feedback, comment below. Happy Coding.
- javascript project
- javascript tutorial
- movie app javascript
- OMDB API javasript
Image Upload With Javascript
Signature pad | html, css & javascript, circular text | html, css & javascript.
It is not showing the movies. I have written the code as it is.
LEAVE A REPLY Cancel reply
Save my name, email, and website in this browser for the next time I comment.
Please enter an answer in digits: fourteen + two =
Most Popular
Bear css art, elephant css art.
- Privacy Policy
Coding Artist is dedicated to providing you quick and simple yet efficient coding tutorials. We provide best tutorials on HTML, CSS and Javascript. Let's learn, code and grow !
Contact us: [email protected]
Source Code Examples
Search this blog, javascript project - movie app.
In this tutorial, we will learn how to create a simple Movie App in JavaScript.
We will use the below API to get movies and we will show on the web page:
JavaScript Movie Application
Create a folder called movie-app as project workspace and we will create all the project files inside this folder.
1. index.html
Let's create index.html and add the following code to it:
2. script.js
Let's create JavaScript file named script.js and add following JavaScript code to it:
Let's create CSS file named style.css and add the following CSS code to it:
Open index.html in Browser
Let's open the index.html file in the browser and you will be able to see the following screen:
Related JavaScript Source Code Examples
Post a comment, our bestseller udemy courses.
- Spring 6 and Spring Boot 3 for Beginners (Includes Projects)
- Building Real-Time REST APIs with Spring Boot
- Building Microservices with Spring Boot and Spring Cloud
- Full-Stack Java Development with Spring Boot 3 & React
- Testing Spring Boot Application with JUnit and Mockito
- Master Spring Data JPA with Hibernate
- Spring Boot + Apache Kafka - The Quickstart Practical Guide
- Spring Boot + RabbitMQ (Includes Event-Driven Microservices)
- Spring Boot Thymeleaf Real-Time Web Application - Blog App
Check out discount coupons: Udemy Courses - Ramesh Fadatare
IMAGES
VIDEO
COMMENTS
The Objective of this assignment is to work with ReST API's , understand asynchronous programming and build interactive web pages using Javascript. npm run test You shall also fix any eslint errors if present in code. To run eslint check locally, you shall execute npm run eslint Once you have fixed ...
The Objective of this assignment is to work with ReST API's , understand asynchronous programming and build interactive web pages using Javascript. You add the respective Mentor as a Reporter/Master into your Assignment Repository You have checked your Assignment on the Automated Evaluation Tool ...
Populate data for Movies collection in db.json while another Favourites collection could be left empty initially.; Create Two Sections/List Movies and Favourites in your HTML page.; Movies and the Favourites section of the page should populate all the movies and favourites from the db.json using AJAX calls.; Every Movie item should have a Add to Favourites button.
Project information. 6 Commits; 1 Branch; 0 Tags; README
Learn how to create a dynamic and interactive web app that browses and searches IMDB movies using APIs. See the source code, output, and steps to build this project with HTML, CSS, and JavaScript.
public · master · Stackroute Training / Javascript Movie Cruiser ... ... GitLab.com
Javascript Movie Cruiser Assignment; Repository; Compare Find file Code Clone with SSH Clone with HTTPS Open in your IDE Visual Studio Code (SSH) Visual Studio Code (HTTPS) IntelliJ IDEA (SSH) IntelliJ IDEA (HTTPS) Download source code. zip. tar.gz. tar.bz2. tar. Select Archive Format.
javascript-movie-challenge.js This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
We will create a movie database app using Next.js and an external movie API (such as The Movie Database API). The app will enable users to view movies, search for specific movies, and view detailed information about each movie, including the title, release date, rating, brief description, and a list of actors and actresses. Project Preview Prerequi
🎓 View our courses: https://scrimba.com/links/all-coursesWelcome to our Star Wars-themed beginner JavaScript live stream! 🌌 Take our Star Wars quiz and win...
Aswal_Aman / moviecruiser-assignment - GitLab ... GitLab.com
Populate data for Movies collection in db.json while another Favourites collection could be left empty initially.; Create Two Sections/List Movies and Favourites in your HTML page.; Movies and the Favourites section of the page should populate all the movies and favourites from the db.json using AJAX calls.; Every Movie item should have a Add to Favourites button.
Here are the movies and your reviews: "Toy Story 2" - "Great story. Mean prospector." "Finding Nemo" - "Cool animation, and funny turtles." "The Lion King" - "Great songs." Write a function named getReview that takes in a movie name and returns its review based on the information above. If given a movie name not found just return "I don't know!".
Artifacts · Stackroute Training / Javascript Movie Cruiser Assignment ... ... GitLab.com
We create a project folder called - "Movie Guide App". Inside this folder, we have five files. The first is index.html which is the HTML document. The next is style.css which is the stylesheet. Next, we have script.js, a script file. ... Javascript: Finally, we add functionality to this code using Javascript. To do this, copy the code ...
Populate data for Movies collection in db.json while another Favourites collection could be left empty initially.; Create Two Sections/List Movies and Favourites in your HTML page.; Movies and the Favourites section of the page should populate all the movies and favourites from the db.json using AJAX calls.; Every Movie item should have a Add to Favourites button.
Javascript Assignment 1. Contribute to vicbro00/Javascript-1 development by creating an account on GitHub.
JavaScript Movie Application. Create a folder called movie-app as project workspace and we will create all the project files inside this folder. 1. index.html. Let's create index.html and add the following code to it:
GitLab. Menu Why GitLab Pricing Contact Sales Explore
Saved searches Use saved searches to filter your results more quickly
Populate data for Movies collection in db.json while another Favourites collection could be left empty initially.; Create Two Sections/List Movies and Favourites in your HTML page.; Movies and the Favourites section of the page should populate all the movies and favourites from the db.json using AJAX calls.; Every Movie item should have a Add to Favourites button.