Project 001: My Movie Journal

# Project 001: My Movie Journal by: Madeline Maeloa, Mariana Edelstein, Rhea Jaffer https://codepen.io/ml4794/collab/NWMzQjE <img style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 100%);transition: background-color 300ms;" src="https://i.imgur.com/ntLikHT.png"> ## PROBLEM Everyday users are bombarded with an ocean of content, particularly movies that they may be able to watch across multiple platforms! This makes it difficult to choose what to watch and to keep a track of content they have watched or wish to watch in the future! In fact some research suggests that users will spend approximately 18 minutes just browsing Netflix per day! We decided to address this problem by creating a site where users can look for movie recommendations, get curated lists based on their personal preferences and create a list of movies that they might want to watch in the future. Below, you will find more details about the content of our website, its functionality as well as styling decisions.</p> ## WEBSITE CONTENT ### Home Page Our home page has 6 sections 1. Navigation menu 2. Get Recomendations Straight to Your Inbox! (Form) 3. Favorites List 4. Browse Current Recommendations * Comedy/Horror/Romance/Action Movie Recommendations 6. Our All Time Favorite Picks 7. Leave us your Feedback! (Form) ### 1. Navigation Menu On the navigation bar menu you can find buttons for: Home, Favorites, Watched List, and Sign Up. In the final version, we envision the buttons to lead to the different pages of our website. The page that you currently see is our Home page. On the Favorite page, you can see the movies that you've favorited. You can also add and remove movies to your list and share specific titles with your friends. On the Watched List page, you can add movies that you've watched, give them a rating, and a short description. The Sign Up page is where the user enters their login to access their account. This would grant access to create and save their lists. ### 2. Get Recomendations Straight to Your Inbox! For users that do not want to create an account, the recommendations section is a quick form they can fill out to receive an email with a curated list of 5-10 movies. The user should enter: their email, how they heard about us, how many people they will be watching with, what genre they would like to watch, their ideal movie length, and anything else they would like to tell us. When the user finishes and clicks the submit button, they will see an alert that says: "Thank you for submitting the form! We will slide into your inbox soon ;)". ### 3. Favorites List The favorites list section works like a To Do list. Users can add the title of movies that they want to watch later, which will also appear on their Favorites page. ### 4. Browse Current Recommendations For users that do not want to wait for a curated list by filling out the form, they can browse a selection of recommendations from our team. These include movies from the Comedy, Horror, Romance, or Action genres. Clicking on the button for the respective genre will take the user to the relevant section on the page. * #### Comedy/Horror/Romance/Action Movie Recommendations: There is a carousel for each genre of movies. Here, you can click the back or front arrow to view our current recommendations as well as read their synopses. ### 5. Our All Time Favorite Picks In this section, users can see our recommendations for classic movies! There is a picture that is accompanied with text for each movie, as well as a button that users can click to watch the trailers. ### 6. Leave us your Feedback! In this section users can leave us feedback. Users can share what they liked most about out website and also suggest improvements. When the user finishes and clicks the submit button, they will see an alert that says: "Thank you for helping us improve your experience!" ### Footer In the footer you can find the copyright for our website. ## WEBSITE STYLE & DESIGN ### Color Scheme Our website is intentionally designed to have a dotted yellow border around the page. The background is a lighter shade of yellow with a contrast ratio of 1.36 : 1. We wanted the dotted yellow to be a subtle touch on our website that may remind users of the bright lights they see on Broadway, or a theater sign like in the image shown below. Other elements, like the buttons and navigation bar, are a bright red color. When users hover over a portion of the navigation menu or a button, the button turns yellow. The combination of the red and yellow colors was intentional; we wanted to remind our users of the familiar red, white, and yellow that many associate with a bag of popcorn! Finally, every section of the website has a white background and black text (i.e. a very high conteast ratio of 21.00 : 1) to ensure that the text is easy to read. We also chose this colour scheme for the main text based sections since our website is full of colorful images which stand out and do not look too busy/bright against the white background and surrounding black text. <img style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 100%);transition: background-color 300ms;" src="https://cdn.shopify.com/s/files/1/0380/3501/products/C1419_HAMILTON_MOVIE_MARQUEE_0886241e-1b87-4d2a-a800-25ca988730c1_grande.jpg?v=1543676108"> ### Buttons All the buttons on our website are red and as a user hovers over a button and clicks it, the button turns to yellow. This serves as a visual reminder of where they are, that the button is working, and what they are about to select. Most of our buttons work! Clicking the "Submit" button element in the recommendations and feedback forms gives the user an alert that the form has been submitted (one example is shown in the image below). Each button in the "Browse Current Recommendations" section takes the user to the relevant part of the page, and the "Watch Trailer" buttons in the "Our All Time Favorite Picks" sections opens the trailer. However, some of our buttons don't work. None of the buttons on the navigation bar are functional. However, we envision that each button would take the user to the specified page. The "Add to list" button in our sidebar is also not responsive currently. However, if JS were to be added, we imagine that it would add the movie title that the user typed in the textbox into the botton of the list. <img style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 100%);transition: background-color 300ms;" src="https://i.imgur.com/KwmSeB7.png"> ### Forms We have 2 forms on our website, which are the Recommendations form and the Feedback form. The forms attributes have been designed to ensure that users are entering the relevant data in every input box. For example let us discuss the Recommendations form. In this form the "enter your email" input element has been programmed to only accept email addresses by using the input id="email", "how did you hear about us" has a pre-programmed drop down list with relevant inputs, "how many people will be joining you" accepts numerical data only between 1 and 20, and "what genre(s) would you like to watch?" has a multiple selection check-boxes with the various genres. Users can also share additional information with us by typing in the input box attached to "Anything else you'd like us to know?" question. For every question, we added placeholder text using the `placeholder` attribute to help users get a sense of the kind of information that need to input into the form. We purposely did not make any question on the form required so that you guys (our instructors) can test out the submit button easily. However, we would make fields like email required by using the Boolean `required` attribute. ## BOOTSTRAP We used Bootstrap to help us design our website. We chose to do so to make our website responsive to different screen users and compatible with different browsers. Some elements that we incorporated using Boostrap are: * Favorites list * We used a list group from bootstrap to make a favorites list of movies that a user might have. The classes `list-group`, `list-group-flush`, and `list-group-item` made it very easy for us to create a stylish list that looked aesthetically pleasing. * Range slider in our form * We used the `range` element in Bootsrap to build a slider that allows users to indicate their ideal movie length. Users can indicate their ideal time from between under 60m and over 3h long. The range has been set to have 6 options on the slider within the time frame we have indicated. * Format of the page * Using Bootstrap allowed us to take advantage of its grid system to organise our entire webpage. For instance, "Get Recommendations Straight to Your Inbox!" takes up 2/3 of the left side of the page (using `class="col-8"` in the parent allows all content within it or the child content i.e. everything in the form before the Submit button to be aligned the same way). Similarly, our "Favorites List" takes up 1/3 of the right side of the page (using `class="col-4"` in the parent). Additionally, we also used this same functionality to display the 4 movies within our "All Time Favorite Picks" as a 2 x 2 grid and the four images in our "Browse Current Recommendations" section. * Movie recommendation carousels * Using Bootstrap here allowed us to build a carousel of a series of images that users can scroll through to display our lists of recommended movies for every genre. ## REFLECTION We started our project by creating a sketch of what we were hoping our final output would look like. Next, we created the first draft of it on Codepen and then continued to iterate that draft. This worked out to be a good approach because we had a rough starting point and were slowly able to improve the aesthetic and funtionality of our website. It also made it easier for us to work towards our end goal, step by step. In general, we were presented with a solid challenge with this project. At the outset, it seemed intimidating and we definintely struggled while working on it. However, we started well in advance, working on it regularly and being able to collaborate and ask each other for help when we were unable to do something made it much easier! As we worked on it more, we started to come up with more and better ideas. For example, we didn't have the idea of having a "All Time Favorites" section, which was our most recent addition, in the beginning. We also learned how to link buttons to direct a user to a certain section of the page by linking the `href` to an `id` of the `header` we wanted to go to. Overall, using Bootsrap made it much simpler to create an aesthetically pleasing website. It also makes this more efficient as we don't have to write everything by ourselves from scratch. Aligning things is also easier. Experimenting with new things, using web-based discussion forums and free programming resources seems to be a great way to solve challenges for beginner coders! #### Sketch: <img style= "hsl(0, 0%, 100%);transition: background-color 300ms;" src="https://i.imgur.com/SZAF04W.png"> ---