!QUICK NOTE! The site is in early evelopement wich results in some matching orders might not be as exact as i want it too, This is because it takes alot of time pairing moods with genres.
The Movie Generator is a small website to help users pick a movie acording to mood and genre.
The goal with "The Movie Picker" is to create an easy way for users to find a movie for the desired occasion based on mood and genre to make sure the movie will be a great watch.
-
Find a movie quickly without having to scroll through long lists on streaming platforms.
-
Get movie suggestions based on mood, such as Happy, Sad or Romantic.
-
Discover new films they may not have found on their own.
-
Receive useful film information instantly, including title, plot, genre, rating and poster.
-
Use the website easily on mobile, ensuring fast access and simple interactions.
-
Have the option to get a fully random movie, without choosing genre or mood.
-
Enjoy a visually clear and engaging layout that is easy to read and navigate.
-
Create a simple and engaging small web app that demonstrates understanding of HTML, CSS and JavaScript.
-
Show that the developer can work with APIs, in this case the OMDb API for dynamic movie data.
-
Provide a user-friendly tool that solves a real, everyday problem (decision fatigue when choosing a movie).
-
Show responsive design skills, ensuring the page works on mobile, tablet and desktop.
-
Demonstrate interaction handling in JavaScript, including event listeners and DOM updates.
-
Build a visually appealing project suitable for a portfolio, school submission or future job applications.
-
Encourage users to return by offering a fun and quick way to find film suggestions.
For design i chose to go with something easy to navigate and understand, i want the site to be extremely simple with just focus on what the site does.
i chose to make the background picture and color scheme easy and apealing to the user but also to make it fit the theme of movies.
The site consists of-
- A comfortable font to match the mood of watching a movie.
- A minimalistic background but still detailed enough to match the theme in question.
- A really easy to navigate and use controll system.
- Really easy to understand controlls and options.
For structure i went with something easy for example-
- A big header text displaying the name of the website.
- two options one each for mood and genre.
- A box that will display short information about the movie that gets generated.
- Two buttons to chose between a random movie acording to mood, or just a random movie in general.
Considering the background does much of the sites main coloring design the only colors ive used outside of it are these, each used mainly to make the text design sleek and nice to look at.
For fonts i used Google fonts and decided on this because i feel that it fits the theme of easy, comfy and lazy. just how i want the website to feel.
For imagery i went with something that does not include to many details as to make the site comfortable to look at.
link to where i got the image from: (https://pixabay.com/illustrations/popcorn-cinema-mall-movie-food-9288699)
i also used PAIN.NET(https://www.getpaint.net) a free to use editor tool for pictures and paintings, with this tool i made the picure blurry to hide it more in the background.
all this is so the user gets a movie feeling but wont draw the attention from the main focus of the site.
I dont think i could get my idea any closer to my origianl wireframe, i made verything just like the original idea (that i quickly drew on a peice of paper and then re-drew in pain)
The site features only one page dedicated to the function and main goal of the site, these features include-
- Movie Generator
- Easy to use navigation
- Easy to understand concept
These are the few but also important features of the website to make it apealing to everyone and fit the criteria of a good movie generator.
As for future implementations my ideas are to give the user more options regarding what type of movie they are looking for, these could include but not limited to-
- Option to choose what year the movie was created.
- more diverse search options.
- Option to randomize film based on actor/actress.
- Option to randomize film based on author/director.
- Option to randomize film based on Movie company.
The site features accessability for a diverse user group, it includes alternative text for images and the text is basic short and easy to read for users with sight or hear impairment.
The language used for the website are: HTML, CSS, JavaScript.
As for programs used to aid the creation of the website the following are:
- Bootstrap (https://getbootstrap.com)
- Google (https://www.google.com)
- Pixabay (https://pixabay.com)
- Youtube (https://www.youtube.com)
- ChatGpt (https://code.visualstudio.com)
- Visual Code Studio (https://code.visualstudio.com)
- Balsamiq (https://balsamiq.com)
- Paint.NET (www.getpaint.net)
- GitHub (https://github.com)
- PieHost Javascript Validator https://piehost.com/tools/js-vaidator
- Css Validator (https://jigsaw.w3.org/css-validator/validator)
- HTML Validator (https://validator.w3.org)
- OMDB (https://www.omdbapi.com)
For local development just download the whole GitHub repository as a zip file. Open the source code specifically the "index.html" for the main page etc. Pictures, CSS and Javascript are located in the assets folder. If you want to in anyway change the source code of the website id suggest using the program VSCode featured in the section: Links to the programs used.
For local development just download the whole GitHub repository as a zip file. Open the source code specifically the "index.html" for the main page etc. Pictures, CSS and Javascript are located in the assets folder. If you want to in anyway change the source code of the website id suggest using the program VSCode featured in the section: Links to the programs used.
During development, several common JavaScript, HTML and API-related issues were encountered and resolved. These helped improve understanding of debugging, validation and deployment workflows.
If you want to fork there is an option in the repository to do so at the top section of the GitHub repository page.
Testing was carried out throughout the development process to ensure functionality, usability and responsiveness. Testing includes manual testing, user story validation, responsiveness checks and browser compatibility testing.
Manual testing was performed using the Expected / Testing / Result / Fix format.
- Expected: The user should receive clear feedback when no selections are made
- Testing: Clicked "Find My Movie" without selecting mood or genre
- Result: A message was displayed informing the user that no movie matching the criteria was found
- Fix: N/A
- Expected: Movie information should display correctly
- Testing: Selected Happy mood and Comedy genre
- Result: Movie details displayed correctly
- Fix: N/A
- Expected: A random movie should be generated
- Testing: Clicked "Randomize My Movie"
- Result: Random movie displayed
- Fix: N/A
- Expected: Error message should be displayed
- Testing: Simulated invalid API request
- Result: Error message displayed correctly
- Fix: N/A
- Expected: Placeholder image should be shown
- Testing: Generated movie with missing poster
- Result: Placeholder image displayed
- Fix: N/A
| User Story | Test | Result |
|---|---|---|
| Find a movie quickly | Used mood & genre selector | Pass |
| Discover new movies | Used random movie option | Pass |
| View movie details | Checked plot, rating and poster | Pass |
| Use on mobile | Tested on mobile screen size | Pass |
The site was tested using browser developer tools and Responsive Design Checker.
- Mobile (~375px)
- Tablet (~768px)
- Desktop (1920px)
The layout remained functional across all screen sizes.
Tested browsers:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
All features worked as expected.
- No loading spinner during API requests
- API key is visible in client-side JavaScript (acceptable for learning purposes)
Again, i want to thank the humble people inside the Code Institute Discord channel for calming my nerves when i got stuck on my project, sometimes you need to know you are not alone in climbing your mountains.