## Weather app - where are you going?
### Team Vámonos
(Reda ⛅️ Alex ❄️ Renata ☀️ Maria 🌈)
---
---
### 💾 Installation Guide
1. Clone the repo `git@github.com:fac18/week5-EIJO-weatherAPI.git`
2. Run `npm install` in the command line
3. Run `npm start` to power up a local server
4. See site on `localhost:5000` in your browser
---
### Día 1️⃣
---
### Ideas:
- Weather or transport
- Weather of your destination and how to get there
- drop down menu populated with you destination cities (autocomplete)
- change the background and add weather inspired animation
Simple stuff, right?
---
---
### API's:
TFL api - Skyscanner requires vetting
https://api-portal.tfl.gov.uk/admin/applications/1409618767019
Open weather api
https://openweathermap.org/api
---
### Al final de día 2️⃣
We made it back mother fuckersssss!
---
### Día 3️⃣
```javascript=
if (inputValue.value) {
let searchTerm = inputValue.value;
let xhr = new XMLHttpRequest();
let searchUrl = `/search?q=${encodeURIComponent(searchTerm)}`;
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
let weatherData = JSON.parse(xhr.responseText);
clearWeather();
let paraWeatherCondition = document.createElement("p");
let textWeatherCondition = document.createTextNode(`The weather in ${searchTerm} is ${weatherData.weatherTemp}°C, ${weatherData.weather}`);
paraWeatherCondition.appendChild(textWeatherCondition);
weatherSection.appendChild(paraWeatherCondition);
let imgWeatherIcon = document.createElement('img');
imgWeatherIcon.setAttribute('src', `${weatherData.weatherIcon}`);
weatherSection.appendChild(imgWeatherIcon);
console.log(imgWeatherIcon);
inputValue.value = "";
}
};
```
---
```javascript=
.get(url, response => {
let data = "";
response.on("data", chunk => {
data += chunk;
});
response.on("end", () => {
const body = JSON.parse(data);
let weather = body.list[0].weather[0].description;
let weatherIconCode = body.list[0].weather[0].icon;
let weatherTemp = body.list[0].main.temp.toFixed(0);
let weatherIcon = `http://openweathermap.org/img/wn/${weatherIconCode}@2x.png`;
const statusCode = response.statusCode;
console.log("StatusCode:", statusCode);
cb(null, { statusCode, weather, weatherIcon, weatherTemp });
});
```
---
## The journey: aprendemos!
---
Getting Travis set-up:
Realised very soon we needed the owner to authorise travis on the repo, but once it was set-up if you had a travis account you could see all the repos you're apart of.
- so technically you can spy on other people's builds
---
We got it set up on Slack so that we were notified at each build even if you don't have a travis account and dashboard
- add app in slack (takes you to slack site)
- choose channel for notifications
- add code to .travis.yml file
```json=
language: node_js
node_js:
- "node"
notifications:
slack: foundersandcoders:vCDquX9W7QOCHGAQzf3esLif
```
---
---
- By the end of day 1 we had our CSS and HTML sorted and a skeleton for building the API.
- And so we started day two very positive: let's do two api calls!
- Both calls were working but we could only send an ugly object to the front end
- We also hit our limit on the tfl api at 3pm
- For three hours we wrestled with this problem - why was an object being sent (making a new page with it's contents) but our console.logs in the api call weren't working??
---
---
### Las lecciones:
- add your front end js to your html!!!! 💡
- try to rewrite rather than take legacy code from other projects
- console.log everything
- focus in the goals (not in the stretch goals like us)
- walk it off
---
Gracias!
{"metaMigratedAt":"2023-06-15T02:03:13.284Z","metaMigratedFrom":"Content","title":"Untitled","breaks":true,"contributors":"[{\"id\":\"73097b98-a908-4f68-93f4-ccdaabaa25b2\",\"add\":7914,\"del\":6301},{\"id\":\"7a8e5efa-23d6-4b8f-8e21-d8d2bcafea85\",\"add\":4202,\"del\":1824},{\"id\":\"24849147-acd0-4ec1-89ef-fa10f255eec6\",\"add\":50,\"del\":0}]"}