Basic Web development tutorial with implementing a simple Weather Forecast service. (For beginner)

After you follow this tutorial, you’re going to make a webpage which finds a current weather status by a city name query is provided by a user.

You don’t need any JavaScript framework, what you need is only pure JavaScript and HTML (But, I’ve used TailwindCSS)

HTML

Firstly, you are going to structuralize a webpage. This page will get a query string for a city name, and will present a current weather data about the city which user have searched.

Now, it’s done. You are seeing this is perfectly showing on mobile and desktop screen.

The ‘result box’ is hidden before user search something.

API

Now what we’re trying to do is showing a weather data. But how do we know? Here is the OpenWeatherMap. And you can use a free data just with sign up on the site.

Current weather and forecast - OpenWeatherMap

Endpoint for getting a current weather data

Current weather data

You can manage your API key in here

Members

What’s this API? API is a promise about sending and receiving a data. Service providers make multiple endpoints to provide data on a specific info to someone who has a privilege, which both have agreed.

DOM Manipulation

At first, you have to have a handle to modify and manipulate a tag on your website. Browser supports variables and methods to do this job.

In the ‘document’ you can call ‘query’ with ‘selector’

#box indicates a tag which has an ID as 'box'
.box means tags which has class as 'box'
div means every div tags under this document

And you can catch events with adding event listeners. In current case, you use “keypress” event.

To call API

To request something through the network, you’re going to use a prepared method, ‘fetch’. There could be multiple wrapper for the fundamental methods, but you need to stick with fundamentals.

Following the link below, you need these values

• End point URL
• API KEY
• City Name

Current weather data

In here, you automatically generate the URL endpoint using the ‘destinationUrl’ method.

When you put the cityName parameter, it returns the full shape of URL string.

Using Fetch - Web APIs | MDN

Here is a description about fetch method.

Firstly, the fetch method return a string after calling the destination URL.

and ‘then’ it receives the returned string as a parameter name ‘response’ but you can name it as ‘res’ or ‘result’ anyway as you want.

To use the string as an object, you have to process the raw string value into an object form.

c.f. A shape of object

response => response.json() 

It means this.

(response) => {
  return response.json()
}

And longer form.

let response = fetch('http://....')
let data = response.json()
console.log(data)

But it’s not the same with the original code. I’ll explain it next.

Here is network request, and you can see the raw works on your developer tool in the browser.

Asynchronous works

This is a working example. So, What is the ‘then’ and ‘catch’?

In average, your machine run a code line by line in an order from the top to bottom. But you may know the network request is always taking time. It’s not instantly working.

So, if your machine always waits until time the networking work is finished, Your rest of works is pending, not response, there is nothing you can do until the time spending work is finished.

So, your machine execute the next code without waiting the ‘time-consuming works’

let response = fetch('http://....')
let data = response.json()
console.log(data)

In this code, the ‘data’ value actually doesn’t exist. Because the machine still waiting the result from the fetch activity, and already executed ‘response.json’

Promise, Await, Async

Promise is the way of making async task. In a method, if you return the Promise rather than other actual value (String, Int, Object, etc.) This method is an asynchronous method.

And you can use ‘then’ to assure the async work is done. When you implement codes under the then block. It will work after finished the main work.

function heavyWorks (param) {
  return new Promise(res, rej){
    // res() or rej()
  }
}

If this method return ‘res()’, it fires ‘then’ and if return ‘rej()’ it fires ‘catch’
This is a promise about future result

But if you need to wait until the promise done, you can use ‘await’ keyword before execution of async work

let result = await heavyWorks(param)

But this block means it is asynchronous work as well, just like the ‘heavyWorks’ method.

So, you have to notify it is ‘time-consuming work’ to the parent method.

async function mainWorks(){
  let result = await heavyWorks(param)
  //...
}

async function - JavaScript | MDN

Finally, you understood what’s the async, promise, await.

Full of code

Here is the full of code including additional part of displaying the weather information on the webpage.