Working Repo => Repo
Working Issue => Issue

In the progress..

Finally a week has passed!!! One week is short if it is short and long if it is long, but personally, it feels like the end of the semester so it is very frantic and has gone by so quickly. During this period, according to the plan I wrote last week, I was finally able to finish the part corresponding to #1(Display current time+weather(can utilize external api) among the issue items 1-4 at the time of writing. (#2 Based on the time automatically change the dark-light mode has already been completed).

Progress of first task (Add time and weather)

It was much more difficult than I thought to receive the time and weather information for number 1 from other api, process it appropriately and display it. First of all, even if the API is free or free for students, it was actually difficult to get an API made by another developer from the website of the API.

fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid={APIKEY}&units=metric`
  )

This part is a function that receives information from the API using the URL. However, very absurdly, because the rest of the "https://" was omitted, the request continued to generate an error saying that it violated the security policy of Google Chrome, Happens.. At first I thought the other side was the problem, and I actually rewrote the code, but the error persisted. So, I finally gave up and tried adding the string "https://" to it, and it finally worked.

Again, due to this situation, I realized that from now on, I need to be more careful and understand the code when writing the code. Because, this problem is not just this one time, it's been continuously consuming me a lot of time and energy since I decided to start programming. (Confusion in identifying the core problem => Decrease in efficiency)

Unexpected decision

In fact, it wasn't all about the weather. When fetching data from the api, I also wanted to get the location and weather of that location based on the location where the app is running, not the city I've already specified. So, I decided to add an API to get the current location, which was not planned.

navigator.geolocation.getCurrentPosition(success, error, options);

To get location information based on the connection place, I decided to use the google api above. Fortunately, location information was obtained without any problems through the api, and using that information, I created a function as follows and put the value into the weather api.

var crd = pos.coords;
  weather(crd.latitude, crd.longitude);

Now, when you run the corresponding Todo-list, you just need to allow the location information request and you will get the time + weather information based on your location!!! In the case of time, the function was implemented without any major problems using new Date().

What next

This week took more time than expected, but fortunately, seeing the finished product, I was very proud. Also, it feels very good to think that this part will be very useful for other personal projects or portfolios. Now for the rest of the week, our next task will be to add as quickly as possible items 3 and 4, dark-to-light mode calls for location and sunrise/sunset, and a progress bar to show progress.