helenzhou6 / weather-to-wear Goto Github PK

https://developers.google.com/maps/documentation/geocoding/intro

Tailor clothing recommendations based on response.daily:

Summary

• Display: response.daily.summary and based on icon:

{
clear-day:  "☀️",
clear-night: "🌕",
rain: "☔️",
snow: "❄️",
sleet: "🌨", 
wind: "💨",
fog: "🌫",
cloudy:  "☁️",
partly-cloudy-day: "🌤",
partly-cloudy-night: "🌙"
}[response.daily.data.icon]

• ${response.daily.data.precipProbability * 100}% chance of ${response.daily.data.precipType}
• Temperatures between ${response.daily.data.temperatureLow / 32} to ${response.daily.data.temperatureHigh / 32}

• If low temperature < 5 && high temperature < 20 -> message: 'Wear a thick jumper', if low temperature > 20 && high temperature > 20 -> 'Wear shorts

• If precipType > 50% -> ' and take your chances and don't bring a ${response.daily.data.precipType} jacket!' If precipType > 50% -> ' and bring a ${response.daily.data.precipType} jacket just in case (or take a chance on the wild side!)' -> If precipType > 80% -> ` and wear your ${response.daily.data.precipType} jacket!

pass down function that resets the location in <Form>

Have a photo background:

• On landing, will have be automatically changing background every 5 seconds or so (with fading in and out effects)
• On results page, the background will be according to the weather icon
• Look into image lazy loading / web performance - and loading different sizes of images based on device
• Font color look into mix blend mode
• Add focus to input by default

Look at the React boilerplate repo for set up

Add testing!

https://www.w3schools.com/html/html5_geolocation.asp

• Consider index.js for all utility functions
• Separate navigator.geolocation function from form.js - should be in utility folder
• duplicate code in index.js of backend

Look into best file structure, and maybe use https://www.npmjs.com/package/concurrently to run both of them