This weather dashboard allow you as a traveler to see the weather outlook for multiple cities so that you can plan a trip accordingly and see the forecast of the current weather along with next fives days in an interval of every 3 hours in each day.
Project Repository: (http://github.com)
- Search box take a city name
- Search box in not case sensetive however do type in the correct city name
- Search history which stored the search history which then can be used to retype and search, simply just click
- Body has two section:
- Currend day section at the top which shows the weather for current day
- Section bellow shows forecasting for the next 3 days in 3 hour interval
- Dashbaord take a user request
- User submits the request
- Search key gets entered into local databaase
- Then then API takes the request and gets the weather details and out puts on to the client browser
- If search history exist
- user click the search key
- Value gets passed on to the api and then the result returned gets rendered in the browser
I was able to manipulate the date and time string to make the date and time more user friendly before outputting it to the borwser
Line 67 - 69: var dateTime = element.dt_txt;
var time = dateTime.substring(10, dateTime.length - 3);
var date = dateTime.substring(0, dateTime.length - (time.length + 2));
Turn the first letter of the search upper case before passing it on to the api and saving it to the local storage
Line 101: userSearchInput = userSearchInput.charAt(0).toUpperCase() + userSearchInput.slice(1);
Finally checking to see if the key exist in the local storange before adding new key to keep the local database clean
Line 111: if ((!existingLocalKey.includes(userSearchInput)) && isTrue) {
existingLocalKey.push(userSearchInput);
}
Thank you for visiting and happy coding!