There are thousands of movies available for streaming. Users end up spending hours to pick a movie. This app makes it easier for users to decide on a movie based on user's moods and inclinations that are expressed through emojis. The user is presented with emojis to pick from and the algorithm recommends a list of movies. If the user ever wants to look at their past movie suggestions, they have option to do so as well.
- HTML
- CSS
- Git
- DOM
- JavaScript
- jQuery
- ajax
- Open Emoji API
- Streaming Availability Rapid API
- Bulma
- CSS Loaders
- AOS
AS A user I want to get movie suggestions based on how i'm feeling
I WANT to see movie suggestions based on my mood using emojis to identify how i’m feeling
SO THAT I don’t have to spend hours trying to find that one specific movie that I want
GIVEN a movie based on current mood web application
WHEN I choose my mood
THEN I am presented with a variety of different emojis.
WHEN I chose an emoji corresponding to my current mood
THEN I am presented with a variety of different emojis.
WHEN I chose an emoji I want to watch a movie about
THEN I am presented with several options
WHEN website didn’t have a movie about chosen object
THEN I am presented with default options
WHEN I see the web application,
THEN it includes interactive features that can accept and respond to user input.
WHEN creating the web application,
THEN user input will be validated to ensure that it meets the necessary requirements.
WHEN I see the web application,
THEN it includes a repeating element such as a table or columns.
WHEN I see this web application,
THEN at least one new library or technology that hasn't been discussed will be used.
WHEN I open in the web application,
THEN client-side storage is used to store previous movies that persists across page reloads.
WHEN I open the web application, on different screens ,
THEN it will be made to be responsive to different screen sizes and devices.
The first API our group agreed to use was the Open Emoji API, it ordered the emojis into different groups that made them easy to oraganize which help later as we assigned the categories to out movies.
How we used this API:
var queryURL = "https://emoji-api.com/emojis?access_key=352cbcc2559967a6e748bbd1b737ab1e71d5f6a5"
$.ajax({
url: queryURL,
method: "GET"
}).then(function(results) {The other API we decided to go with was the Streaming Availability API. It provided us with movies from streaming services such as Hulu, Netflix, and some others. We picked the information we wanted from the movies that included genres, release year, an overview, and the ImDB rating
How we used this API:
var settings = {
"async": false,
"crossDomain": true,
"url": `https://streaming-availability.p.rapidapi.com/v2/search/basic?country=us&services=netflix%2Cprime.buy%2Chulu.addon.hbo%2Cpeacock.free&show_type=movie&genre=${genre}&keyword=${keyword}`,
"method": "GET",
"headers": {
"X-RapidAPI-Key": "b3dbc942ddmsh8add83241714b1ap1ace8ajsn8339705327d6",
"X-RapidAPI-Host": "streaming-availability.p.rapidapi.com"
}
};
$.ajax(settings).done(function (data) {
var response = JSON.parse(data);
var results = response.result;We utilized the AOS libary to add animation to our movie tiles.
var tile = $('<div class="column is-one-third is-flex">');
var box = $('<article class="tile is-child box has-background-danger is-align-items-center">');
var title = $('<p class="title has-text-light">').text(movie.title);
var year = $('<p class="has-text-light">').text('Year: ' + movie.year);
var overview = $('<p class="has-text-light">').text (movie.overview);
var image = $('<img>').attr('src', movie.posterURLs['185']);In the above code I used Bulma to style our movie ID in javascript. Since nothing but the ID of movie was in HTML, this was the best way to style it by using the variables to appended to our ID and applying the Bulma style here. I also had to create the tile and box variables so they would display as a tile as well.
Demonstration of our site at different sizes:
Once on our site, the user will click the generate emoji button. From there they will get 10 emojis to pick from based on there mood. After that they pick another emoji from 10 that represents a keyword. After both emojis are picked, movie suggestions will appear based on those emojis. Users also have the option to look at their past emojis choices and the movies that displayed
- Applying and solidifying programming fundamentals: The project week is an opportunity for students to put into practice the foundational skills they have learned throughout the bootcamp, such as HTML, CSS, and JavaScript.
- Working in teams: Many project weeks are designed to simulate real-world development scenarios where students work collaboratively in teams to build a web application. Learning how to work with others in a development environment is an important skill for any aspiring web developer.
- Developing problem-solving skills: Building a web application requires the ability to solve complex problems and troubleshoot issues that arise. Project weeks challenge students to identify and overcome roadblocks and find creative solutions to technical challenges.
- Using new technologies: Project weeks often introduce students to new technologies or frameworks that they may not have used before. This can be an opportunity to expand their skillset and learn about the latest tools and techniques in web development.
- Building a portfolio: The web application that students create during project week can be used as a portfolio piece to showcase their skills and experience to potential employers. Learning how to build a polished and functional web application is a valuable asset for any developer.
We learned how to utilize multiple APIs and manipulate them to function the way we want them to. We also gained experience researching other libraries we haven't used before and got better at reading documentation to use them. Another big thing we learned and eperienced was working as team. It was rough at first, but we were able to get into a flow and be more productive.