|
2 | 2 |
|
3 | 3 |  |
4 | 4 |
|
5 | | -[Click here for live demo](https://codebar.oliverturner.cloud/#HmieZw0YOC0) |
| 5 | +[Click here for live demo](https://mini-weatherapp.herokuapp.com/) |
6 | 6 |
|
7 | | -This app blends data from [openweathermap.org](https://openweathermap.org/) and |
8 | | -[Unsplash](https://unsplash.com/developers) to create a visual depiction of the current weather in your area. |
| 7 | +In this exercise we will revisit the [Mini Weather App](https://github.com/constructorlabs/mini-weatherapp) we produced last week and create a React version of it. |
9 | 8 |
|
10 | 9 | ## Set-up |
11 | 10 |
|
12 | 11 | - Fork and clone the repo |
13 | | -- Run `npm i` to install dependencies |
14 | | -- Run `npm run dev` to develop |
15 | 12 |
|
16 | | -- The HTML and CSS have been supplied if you wish to focus on the programming and not the UI, but you should feel free to customise your application as you see fit. |
| 13 | +- Run `npm install` to download dependencies |
| 14 | + |
| 15 | +- To build project run `npm run dev` or `npm run dev -- --watch` to build continuously in the background. |
| 16 | + |
| 17 | +- Use API keys generated for Mini Weather App to query OpenWeatherMap and Unsplash APIs. |
| 18 | + |
| 19 | +- CSS and some placeholder React components have been supplied for you. You can insert the main photo into the element with the id `photos` and thumbnails into the element with id `thumbs`. |
| 20 | + |
| 21 | +- Before starting to code, draw a layout diagram and a tree diagram of the components. Have a think about which component will have state and what they will store. Also, what data will need to be passed to passed to other components as props. |
17 | 22 |
|
18 | 23 | ## Objectives |
19 | 24 |
|
20 | | -Using the API keys, HTML & CSS from [Mini Weather App](https://github.com/constructorlabs/mini-weatherapp), covert the HTML into React components (stateful and stateless) and write the data loading logic to make requests to the Open Weather and Unsplash APIs |
| 25 | +- [ ] Use `fetch` to retrieve the weather for a single day. You can see the documentation at [https://openweathermap.org/current](https://openweathermap.org/current). For now, we'll set London or another location of your choice as the default. You can use the React lifecycle method `componentDidMount` to run the initial `fetch`. |
| 26 | + |
| 27 | +- [ ] Once you've retrieved the weather data, use its `description` property to get matching images from Unsplash. You can see the documentation for image search at [https://unsplash.com/documentation#search-photos](https://unsplash.com/documentation#search-photos). |
| 28 | + |
| 29 | +- [ ] Display the images as a gallery of clickable thumbnails. When a thumbnail is clicked we should display that image as the main image. |
| 30 | + |
| 31 | +## Stretch goals |
| 32 | + |
| 33 | +- [ ] Use the `Search` component to display what the weather is like in other cities |
| 34 | + |
| 35 | +- [ ] Display photographer credits in `Info` component with link to their portfolio on Unsplash |
21 | 36 |
|
22 | | -## Support |
| 37 | +- [ ] Display white border around thumbnail of image currently displayed as main image using `active` class |
23 | 38 |
|
24 | | -- If you are stuck for more than 20 minutes, ask us for help. |
| 39 | +- [ ] Add a feature of your choice |
0 commit comments