# Week 3: APIs
## Team Partyps :cake::gift::tada::beers:
---
## User Journey
---
### Happy Scenario :relieved:
- User types a party theme into search bar (example: "Mexican" :) and clicks "Let's go" button
- App suggests a playlist and a recipe corresponding to the search term
- User can access playlist and recipe by clicking on the respective titles
---
---
- User can clear search by clicking "Clear" button
- User can enter new search term and receives new playlist & recipe suggestions
---
---
### Edge Cases :grimacing:
- If no search term provided, alert message pops up and
- If user provides invalid search term, alert message pops up and input field is clear (bug to fix: app will still suggest a playlist based on invalid search term)
---
## Workflow :construction:
1) Defined the user journey
2) Drew up software architecture
3) Studied API docs & tested API fore inputs, outputs etc
4) Initialised repo, HTML, CSS, JS, JSON files
5) Added HTML content, basic JavaScript content
---
## Workflow :construction:
6) Worked in pairs to create API requests :couple:
7) Added DOM manipulations
8) Refactored into smaller (pure) functions and tested those
9) Added CSS styling
---
## Problems we encountered
- Accessing APIs: Spotify, Youtube, Recipe Puppy :angry:
- Second Deezer API call within the first call: Waterfall:question::confused:
- Initiliasing Test File
---
---
- Resizing individual grid rows (mixing fractions and pixel units)
- Screen size responsiveness: different reaction on desktop vs. device toolbar
---
## Things we learned
#### CSS
- Grid layout: desktop vs. mobile :checkered_flag:
- Autofocus on input field :mag:
```searchInput.focus();```
- Input field styling :pencil2:
``` -webkit-appearance: none; ```
#### HTML
- Used Aria labels on the form to improve accessibility 👓
---
## Some cool abstractions
---
**Creating a list through API call**
```js
function listCreation(str) {
var listItem = document.createElement("li");
listItem.textContent = str;
recipeIngredients.appendChild(listItem);
}
function addIngredients() {
recipeIngredients.textContent = "";
ingredients.forEach(c => listCreation(c));
}
addIngredients();
```
---
**Creating a URL** :link:
In pureFunctions.js
```
//Modifies search term
function createSearchTerm(str) {
return str
.trim()
.split(" ")
.join("+");
}
function createURL(URL, str) {
return "https://cors-anywhere.herokuapp.com/" + URL + str;
}
```
---
in script.js (within API call)
``` js
// Define variables
var url = "http://www.recipepuppy.com/api/?q=";
var searchTerms = createSearchTerm(searchTerm);
// Pass variables into function
xhr.open("GET", createURL(url, searchTerms), true);
```
---
## Questions :question:
Thanks for asking, we have some:
- Why does media query not fire when app used on mobile?
- What is the best way to turn use local variables (from within the API call) globally?
---
### Have a great party
---
{"metaMigratedAt":"2023-06-14T22:56:23.115Z","metaMigratedFrom":"Content","title":"Week 3: APIs","breaks":true,"contributors":"[{\"id\":\"f4dbbfdb-23d9-45e5-b500-a9d1c32a9ce4\",\"add\":790,\"del\":165},{\"id\":\"6d4d3154-b883-4d43-b76c-2e58b74a5e3d\",\"add\":845,\"del\":44},{\"id\":\"de1daa10-3284-4174-992b-8976c25a1232\",\"add\":1114,\"del\":35},{\"id\":\"2967aacf-1990-431e-b963-91e79ce4a2bf\",\"add\":841,\"del\":1}]"}