Chapter 4 Project

4.1 Project introduction

As mentioned before, this semester you will work on a weather website. Use everything you’ve learned in the Udemy course to create a weather forecast site using the weather API openweathermap.org, that we have looked into in the API Section. To complete this course, you are asked to meet the defined requirements. We will lay out the minimal requirements as well as give some inspiration for further development, make this project your own! Use this chapter as a rough guideline on how far you should progress everytime we meet up.

4.2 Minimal Requirements

1. Search Bar and Button

You should be able to look up any city name and by the press of a button/the enter key display the weather info of that city. Look into HTML forms!

2. API Call

In order to get the data for the weather we require you to use the Open Weather Map API. Check out their documentation here.

3. City Information

The name of the city, the current time, temperature and other city-specific information should be displayed in an appropriate section.

4. Forecast Information

Your website should have another section displaying a daily forecast for the next 7 days.

4.3 Curriculum

In the next months we will have 4+1 meetups. The following is intended to give you some direction on what we think would be a good working-pace for your project. We won’t spoil much here, but instead give some hints and make you aware of problems you may encounter.

04.05.2022 - Web-Dev Coding Introduction

We will go over the basics of HTML and build your first website. Please remember to bring your own laptop!

18.05.2022 - 1. Coding Meetup

Udemy Course

You should have watched Section 1-5 by now. Optional: 6-8 and 10.

Action

  1. Make a sketch, what your future weather website should look like and with annotations how some elements behave once you interact with them. If you need more inspiration, search for weather websites in the web. Think about what you would do differently and how these could be improved.
  2. Set up a blank index.html document and try to model your sketch from Step 1 with HTML.
  3. Try to group content that belongs together into sections. Dont use divs everywhere, remember this from the Udemy course and give your layout some meaning! Instead of getting weather data from the API, make up the data for a city of your choice.
  4. If you’ve gotten to the CSS part of the course, create a style.css file and add some simple styling for the general layout (remember to link it within the HTML file).

01.06.2022 - 2. Coding Meetup

Udemy Course

You should have watched Section 6-8 and 10 by now.

Action

  1. Now its time to apply your CSS knowledge. If you haven’t already, add a style.css file and link it within the HTML document.
  2. Before you can style elements, you will have to add selectors to your HTML file.
  3. Remember Flexbox? Once you get some practice, you can easily control the layout of a page with it.

15.06.2022 - 3. Coding Meetup

Udemy Course

By now, you should be done with all our recommended sections. More specifically sections 14-19, 22, 24, 25 and 27-29.

Action

  1. If you haven’t already, go over the API Section now.
  2. In the script.js file, write the functions that hit the API. You’re going to want functions that can take a location and return the weather data for that location. For now, just console.log() the information.
  3. Write the functions that process the JSON data you’re getting from the API and return an object with only the data you require for your app.
  4. Connect the search bar you’ve created to the function. Still just console.log() the result for now.
  5. Now that you have a pretty good grip on the API, remove the “fake data” we added before and display the weather information on your website!

29.06.2022 - 4. Coding Meetup

Udemy Course

By now, you should be done with all our recommended sections.

Action

  1. Finish up any left-over tasks from before.
  2. Make this project your own! There are many additional features you can add. Here are some ideas:
  • Check out Font Awesome
  • Toggle options between Celcius/Fahrenheit
  • Change background based on weather/time
  • Add a search history with the Local storage API
  • Ability to hide the forecast/search history with keyframes
  • When loading the page, display the weather for the user’s location if he gives permission. Use the Geolocation API
  • Surprise us! Be creative and truly make this project your own!