DEV Community

jann88
jann88

Posted on • Updated on

Building a weatherHub app using vanilla JavaScript and consume API

//In this project I'm working towards creating a Weather hub is an application for users to search for any weather data they may need. It also allows them to set a default location for revisiting the application and getting quick data on the location of their choice.
About The Project
This app is simple to navigate and takes minimal time to get results of any information you might need.
Build a WeatherHub in 30 minutes with JASON server,HTML,CSS and JavaScript.
Before we begin, all the code for this project can be found in the GitHub Repo.

Creating our Server (with JSON server )
First thing we need to do is get our server up and running.
Setting up the index view
Instead of responding with text when someone visits our root route, we’d like to respond with an HTML file.
Adding a CSS File.
make our API call. When we receive our callback, the first thing we’re going to do is check for an error. If we have an error, we’re going to render our index page.
In this instance, I’ve added an error string:

function defaultLocationGrabber() {
return fetch('http://localhost:3000/locations')
.then((resp) => resp.json())
.then((localData) => {
const defaultLocation = localData.defaultLocation;
if (defaultLocation !== "") {
fetchWeather(defaultLocation)
document.querySelector(".hidden").classList.add("show");;
}
})
}

Discussion (0)