Task 2: Adding the current weather to a TODO app (old)

[AlexanderLill]

Project

For this task you will be working on a to-do app called "todometer". "todometer" is a web-application written in JavaScript running in Electron, and allows to manage todo's with a very simple interface.

Alexander: Here is the website to the app: https://cassidoo.github.io/todometer/

Setup

Alexander: Depending on if I use a VM or not, the following steps might be skipped

1. Open Visual Studio Code and clone the following repository: URL
2. Install the project's dependencies using the command npm install
3. Start the app using the command npm run dev

Feature Request

Users have requested to see the current weather in a given location to know how many tasks they want to plan for the day. The weather should be shown in the top right as indicated in the picture. Please read the following text carefully to implement this task.

Task Description

To implement this feature, two changes are necessary:

Change 1: Add a Weather component to the UI

• ToDo: Define a new Weather component inside src/renderer/src/components similar to the Quote component
  • Note: For now, you can call getQuote within this component, and adjust this later.
  • Note: You can open the "Developer Tools" via the application menu "Electron" -> "Dev tools".
• Test: Check if a quote appears at the location of the weather in the above picture

Change 2: Use weather-API to retrieve and display current weather

• ToDo: Implement retrieving the current weather in a new hook inside src/renderer/src/hooks similar to the getQuote hook
  • Note: Please hard-code the location to be used for this feature. Please use "Rome, Italy".
  • Note: Please use the API https://wttr.in to retrieve the weather. To retrieve the weather in the format "☀️ +30°C", use the format parameter 1.
  • Note: You can open the "Developer Tools" via the application menu "Electron" -> "Dev tools".

    Alexander: This library and how to use it is the information retrieval part for having a website in the context

• Test: Check if the application shows the defined location and the current weather as shown in the picture

While coding

👉 While working, search online for needed information. It is quicker than navigating through the entire codebase. 👉 Save the file to see to see the effects of your changes - no need to restart the app.

[AlexanderLill]

Expected diff: https://github.com/HASEL-UZH/todometer-solution/pull/2/files