ECS 189H Assignment 3

Please submit by midnight, Thurs April 27, using Canvas.

We will use the Yahoo weather API to make a weather widget. My design sketch above just shows the basic functionality; we will get a target design with artwork from Dani on Friday. By default, we see the 5-day weather forecast for Davis.

• Pushing the arrow on the right moves all the days one over to the left, so that today disappears and we see the five days following today. A left arrow should appear to let the user shift back, as well. Here are some hints on that.
• We have ten days of forecast total, so after pushing the right arrow five times, the right arrow should disappear, leaving the left arrow.
• Entering a place name or a zip code in the box at the bottom should either switch to showing the weather for that place, or leave the display the same an put up a message saying the place was not found.

Getting data

Below is a beginning for the app, which gets today's weather in Davis from the Yahoo Weather API and dumps the data onto the Web page (of course as a string). Try it, download it, and start from there. The data is returned to us from the Yahoo server as a Javascript object, with which we can access the properties we need for this application. You can look at the Yahoo weather API for more details on what's in the object. Despite what it says at Yahoo, you do not need to get a key to use this API; don't bother.

weatherApp.html
weather.js

Design

Here is the design you should follow. We're more into the functionality of the app in this assignment than the design, so don't drive yourself crazy matching these designs exactly before you get the sliding window and the zip-code/place textbox and button working. The mobile version should just show today's forecast.

Like last time, the graphics you need are in a zip file, WeatherApp3.zip. Make the directory "WeatherApp 3" that it creates as a sibling (child of same parent) of the directory containing your html, css and js files. For instance, directory Assn3 has two children, code and WeatherApp 3, with code containing your code and WeatherApp being the directory we get from Dani's zip file.

Your implementation should be responsive. You'll can get full credit if you end up with two basic layouts, one with one row of five forecasts that moves back and forth with the arrows and a mobile one with just todays forecast. For one measley point of extra credit, fanatics, if the laptop window gets too narrow go to showing four forecasts (with the arrows), then three, then two, and finally go to the mobile layout, without using three more media queries - do it in Javascript!

Some details

• You must stick to pure Javascript and CSS (including flexbox), no Angular, JQuery, Bootstrap, etc.
• Add the acknowledgement:
  
  somewhere on your App.
• Hand in the assignment as a zip file, using Canvas. Include your html, js, and css files, and a README indicating what you'd like the graders to notice.