# HKLO Week 2 HTTP Project Giovanna, Hannah, James & Tom --- ## Movie Mash-up - Super fun game! - Mash-up of The Movie DB API and GIPHY API. - The user is given a randomised GIF. - The user has to select the correct movie out 4 choices. - The user gets a message to show if their selection was correct/incorrect. - The user presses "I want more!" to play again. --- # USER STORIES  --- ## Responsive Mobile-First Design - We used CSS Flex for overall layout. - We used CSS Grid for movie "board". - We had difficulties making Flex do what we wanted, we would look into using Grid for the overall layout next time! 🐱 --- ## Accessibility - The movie posters are `<figure>` elements - we dynamically change the background urls with JavaScript. - Accessibility issue: background images cannot have alt text. - We changed the `<figcaption>` elements to `<button>` elements so that they are tab-able and the movie titles are read out by the screen reader. --- ## API keys - We started with hiding our API keys in a config.js file and adding .gitignore when pushing it to GitHub. - Each team member had to deploy the API keys by storing the config.js file locally. - We then accidentally pushed our API keys to our master branch, woops! - We have left our keys there so that the user (i.e. FAC peeps looking at our project) does not have to deploy their own API keys to play. --- # TECHNOLOGIES WE USED 🐈  --- ## Custom Data Attributes - We needed to associate an attribute to the `<figure>` element with an index to relate it to the array of movies we were generating with our JavaScript. - The `data` attribute allows you to add your own custom information to HTML elements. ```HTML=1 <figure data-index="0" class="fig board__figure--one"></figure> <figure data-index="1" class="fig board__figure--two"></figure> ``` --- ## Async & Await --- ```javascript= async function generateMovies() { while (movieArray.length < 4) { let movieObj = {}; let movieId = generateRandomNumber(500, 100); let requestURL = `${movieDB_URL}${movieId}${movieDB_key}`; try { showLoader(); let response = await fetch(requestURL); let movie = await response.json(); if ( movie.status_code !== 34 && movie.poster_path !== null && !idArray.includes(movie.id) ) { idArray.push(movie.id); movieObj.id = movie.id; movieObj.img = `https://image.tmdb.org/t/p/original${movie.poster_path}`; movieObj.title = movie.title; movieArray.push(movieObj); } } catch (err) { alert("Something's gone wrong, please try again"); } } removeLoader(); createMovieElements(movieArray); createTitleElements(movieArray); } ``` --- # HOW WE WORKED  --- ## How did we assign the work? + As we were working remotely it was hard to swap pairs as often. + We didn't all get to work on all of the elements of the project. + Most of the issues were assigned on strengths, but we still tried to stretch ourselves and get outside of our comfort zone! --- ## Project board + There was a lot more work to tackle this week so we didn't prioritise the project board. + As we hadn't worked with the API's before we found it hard to assign estimates to each Issue. + We still logged issues but didn't check back to the project board as often as we kept checking in with each other through the stand ups. --- ## 🤢 Remote working 🤢 + It was easier than expected but wasn't ideal! + We used a combination of VS Code & Google hangout. + Stand-ups were too long!