# 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.

<figure data-index="0" class="fig board__figure--one"></figure>
<figure data-index="1" class="fig board__figure--two"></figure>

---

## Async & Await

---

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!