Fix bug where error message is not displaying properly

Issue
When user enters a wrong city name for the first time, error message is displayed properly.

When user enters the correct city name this time, it works by showing the correct weather information.

However, when user enters the wrong city name again, error message is not displayed at all.

More detail on the issue-> https://github.com/swapnilsparsh/30DaysOfJavaScript/issues/1137

My Solution

• changed getWeatherReport() to async function
• added try and catch block. In the catch block, a new method showErrorMessage() was implemented to show proper error message and clear any existing output from the previous result.

before

function getWeatherReport(city){
  fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)
  .then(weather => {
      return weather.json();
  }).then((data) => {
    showWeatherReport(data);
    lat = data.coord.lat;
    long = data.coord.lon;
    fetching();
  });

after

async function getWeatherReport(city){
    try {
        const response = await fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`);
        const data = await response.json();

        if(!response.ok) {
            throw new Error('Error while getting the weather report');
        }
        showWeatherReport(data);
        lat = data.coord.lat;
        long = data.coord.lon;
        await fetching();
    } catch(err) {
        console.error(err);
        showErrorMessage();
    }
}

function showErrorMessage() {
    document.getElementById('city').innerText = 'Country/City Name Not Found';
    // clear previous output
    document.getElementById('date').innerText = '';
    document.getElementById('temp').innerText = '';
    document.getElementById('min-max').innerText = '';
    document.getElementById('weather').innerText = '';
}

Result
When user enters a wrong city name for the first time, error message is displayed properly.

When user enters the correct city name this time, it works by showing the correct weather information.

When user enters the wrong city name again, error message is properly displayed this time.

More detail on the pr -> PR

Progress from release 0.2
I not only fixed the bug but also refactored the existing code for better readability. Before addressing the bug, I took some time to review the currently written code. That's when I found some error-prone sections aside from the current bug. Additionally, I identified some repetitive code, which lowered the quality of the code. Right after fixing the indicated bug, I went beyond what was asked for by refactoring the existing code. Here is the list of code changes that are not related to the assigned issue:

• Removed repetitive code and created a method, showWeatherImage().
• Removed unused variables.
• Changed var to either let or const.
• Changed == to === for comparison.

After these changes, the code will have better quality in terms of readability.

My previous PRs in release 0.2

• pr1 identified all the broken links on the website and fixed them (same repo as the current PR).
• pr2 added Korean translation for the about page in Telescope project.
• pr3 added a new functionality to convert .markdown to .html.
• pr4 auto-rectified git source url using regex.