In this assignment you will use JavaScript to build a weather app. To get the weather, we'll use the OpenWeatherMap API.
To start the lab, you must follow the GitHub Classroom link in Canvas. If you got here some other way, go back to Canvas. Using the GitHub Classroom link will create a private repository for you using our classroom site. We will only grade repositories created and submitted this way.
Once you "Accept the assignment" on GitHub Classroom, it will create a new repository for you and grant you access to it on GitHub. In order to start working on the lab, simply clone the repository to your laptop or other working environment.
Use the tutorials to get started with using the weather API. We'll begin by building a form that gets the current weather:
Next, use the tutorials to add a 5-day forecast. Note, this forecast is broken up into 3 hour segments, so for 5 days that is 15 3-hour forecasts.
In the tutorials, we add only an icon, temperature, and text description. However, there is a lot more data returned from the API. Spend some time looking at the returned JSON and the documentation to see what else is returned. Modify your pages to show more of this, including icons where possible.
Add some design to the page. Create a page that looks professional and follows the web design criteria we have discussed:
-
spacing -- use white space effectively to make the site clearer
-
color -- use color effectively to make the site appealing
-
typography -- make it pleasant to read
-
consistency -- everything should match
-
responsive design -- the site should work as well on mobile as on desktops; mobile-first designs for mobile, then expands to desktop
In a footer, you must include a link to your GitHub repository, which must be stored in GitHub Classroom.
On Canvas, submit the URL for your website, which should be running on your DigitalOcean server.
When we grade these labs, we will award points using the following rubric:
| Item | Points |
|---|---|
| Search for current weather works | 40 |
| 5-day/3-hour weather forecast added | 30 |
| Effort spent adding information that is returned from the API | 20 |
| Uses good web design principles | 10 |
For the web design principles, you will receive 2 points for each for spacing, typography, color, consistency, and responsive design. We will subtract 1 point for a principle if you need some work, 2 points if you need a lot of work.