Fix bug where error message is not displaying properly
Tags: beginners, opensource, javascript
Published: 2023-11-19 23:52:35

**Issue**
When user enters a wrong city name for the first time, error message is displayed properly. 
![first](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a02nxhevwsqux7zjgyax.png)

When user enters the correct city name this time, it works by showing the correct weather information. 
![correct input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9c4tzx48tonhbthp0ni.png)

However, when user enters the wrong city name again, error message is not displayed at all.
![wrong input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejbjfex2z5sidu1qn2m0.png)
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_
```javascript
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_
```javascript
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.
![after](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnlovdjkyek791pi44me.png)

When user enters the correct city name this time, it works by showing the correct weather information.
![after](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogrux0cewxjxi8a9szqu.png)

When user enters the wrong city name again, error message is properly displayed this time.
![after](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgghffgzkobjm0tf6f1j.png)

More detail on the pr -> [PR](https://github.com/swapnilsparsh/30DaysOfJavaScript/pull/1138)

**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](https://github.com/IshaanAdarsh/ezmail/pull/43) identified all the broken links on the website and fixed them (same repo as the current PR).
- [pr2](https://github.com/Seneca-CDOT/telescope/pull/3836) added Korean translation for the about page in Telescope project.
- [pr3](https://github.com/prasenjeet-symon/intellectia/pull/150) added a new functionality to convert `.markdown` to `.html`.
- [pr4](https://github.com/swiftwave-org/dashboard/pull/47) auto-rectified git source url using regex.