Basic Movie Finder

Ship #1

@-Sophie- on Basic Movie Finder · 14 days ago

This is a basic movie searcher made with simple HTML, CSS, and JS. You type in the name of a movie and the title, date of release, and a corresponding poster appears. You can also search with a keyword to get 10 related movies back in the same format in a grid.

I'm proud of building this because I used an external web API for the first time (OMDb) and I made an async/await function for the first time as well. I'm getting more comfortable with the concept of Promises, Requests/Responses and I'm very comfortable with DOM manipulation now :D

To test my project just go to the README of the github repo; the link to the deployed project is there.

3 devlogs
2h
3.83x multiplier
8 Stardust

Try project → See source code →

Open comments for this post

@-Sophie- on Basic Movie Finder · 15 days ago

27m 57s logged

I added the search 10 at a time feature so now you get a grid of movies that are related to some kind of key word. It was basically the same thing as the title search thing but you use s= instead of t= for omdb look up, and also you have to iterate through the array that the search feature returns (which is inside a parent obj 😅)

Open comments for this post

@-Sophie- on Basic Movie Finder · 15 days ago

31m 4s logged

Added a second page for movie searching but by 10s based on the omdb option to search 10 (s=) instead of searching just by title (t=); made sure that dark mode still works on this page and applied all necessary styling. Also added a navbar. Also made buttons more clickable with cursor: pointer; and like a transform: translateY(-2px); styling like that

Open comments for this post

@-Sophie- on Basic Movie Finder · 15 days ago

1h 12m 18s logged

I kinda forgot to do a lot of devlogs but I created a basic movie finder. This was my first time using a web API (omdb) and using async/await functions, dabbling in promises, fetch API, etc in JS. It was a lot of fun!