Forem: Divyesh Kamalanaban

JavaScript weather app for absolute beginners

Divyesh Kamalanaban — Fri, 12 Nov 2021 07:56:39 +0000

Introduction

I know, calling APIs and fetching them can be really tough for beginners. It is an absolute pain in the neck for absolute beginners. However, I'll try to explain all about APIs through a really decent web application, a simple weather app.

This may seem tough, but actually it's easier than it looks.

I will be using AJAX to call APIs and fetch information from them, so this might seem outdated, but to get a good idea about API calling, this is a good way to start.

You need to know some Javascript to continue with this tutorial.

What are APIs actually?

APIs or Application Programming Interface acts like an intermediate between server and the client that brings or fetches information from the server to the client.

With that data, you can create applications like a weather app, which without APIs is practically impossible.

Why? Because you need to have satellites and huge amount of system to harness the information from satellites, which contain the forecast data.

Now that you know what an API actually is, let's take a quick glance at what we're going to do get data today!

I am not going to focus much on UI today, since it's all about logic for today.

Our Agenda for today:

Get your API key from https://openweathermap.org
Make a XHR request to the https://openweathermap.org server and get the JSON file.
Get the required info from JSON file.
Show the data to users.

I recommend you use the console for showing the data, because showing the information in screen isn't agile and effective.

With that said, let's get our hands dirty.

Making a XHR Request

What on earth is XHR? XHR stands for XML HTTP Request. From the name, you can find out it's a HTTP request for XML.

Irony that we're using it in Javascript? Nope.

Actually, we're using AJAX method as told before. AJAX stands for Asynchronous JavaScript and XML. Since this method is used in both JS and XML, XHR request becomes relevant to JavaScript too.

The thing that actually is ironical is that we're repeating the word 'Request'.

Till now, you have learnt synchronous JavaScript, which executes step by step or line by line.

But when it comes to APIs, you'll use asynchronous Javascript, which doesn't wait for an action or a function to get over.

So, this will heavily reduce wait times, which in turn doesn't annoy the user.

Coming back to the request, it is being heavily used in AJAX. You could say that XHR is a huge part of AJAX.

Now, let's create a function namely getweather(). Pass e (preferably) inside the parameters. This will be used to troubleshoot errors.

Now, let's create a constant xhr with value new XMLhttpRequest(). the new keyword is used to create an object.

Deep dive into Objects

An object is a data type that's used in OOP (Object Oriented Programming). Consider an object like a real life object, which has properties.

For example, let car = new object();. Now, let's define the properties of this object, car.

car.color = 'red';
car.model = 'Challenger';
car.manufacturer = 'Dodge';

Seems easy, right? So, I correlated a real life object, which is a Dodge Challenger red car with a JavaScript Object, which has these properties of real life car defined.

There are ton of use cases. Imagine you are creating a user database. There are about a 100 users. So, you can create a people object to define the basic properties of your users.

function User(name, email, address){

this.name = name;
this.emailid = email;
this.address = address;

}

Notice the use of this keyword. The this keyword refers to User in this function or context. The value of this keyword changes with context or the function.

What I showed you before is creating a simple object, used for generally theoretical purposes.

What I showed you is a constructor function, which helps us assign the properties of User to those 3 variables mentioned as parameters.

So, let's create a new user:

let Ken  = new User('Ken', 'ken@random.com', 'Times Square, NYC');

Now, we've created a new user with name Ken, email 'ken@random.com', and with his address as 'Times Square, NYC'.

Now, we can create as many users as we want with a base Object of User.

This forms the crux of OOP, which is an important part of probably every programming language.

So, this knowledge is enough to help us call APIs.

Continuing with XHR

Now, let's use the open() method (a function present inside an object).

xhr.open('GET', `https://api.openweathermap.org/data/2.5/weather?q=ANYCITYFORNOW&appid=YOURAPIKEY&units=metric`, true);

When it comes to APIs, there are a few methods that comes to use.

GET
PUT
POST
DELETE
PATCH
HEAD

These methods refer to these 5 operations respectively.

READ
UPDATE
WRITE
DELETE
Partial Modifications
Similar to GET, but provides response without body.

We'll be using GET, because we want to just read the data and obtain it from the server.

I used template literals (backticks) for the API key, more on that later.

So, after this, we'll use xhr.onload() method. This accepts a callback function or a function that gets executed after xhr.onload is done.

The xhr.onload() is simple to understand: After the request is done and you get the data, what should be done.

Now in this function there are 2 conditions, for which we will be using if and else statements.

Take a look at this code:

  xhr.onload = function (data){
        if (this.status === 200){

            let response = JSON.parse(this.responseText);
            console.log (response);            
        }

        else{
            console.log('Something went wrong.'); 
        }
    }

the this.status is the status code server returns after the request. 200 means the request is OK, so we've used 200 here.

I've passed data as the argument here, just in case to troubleshoot errors.

responseText is the text that server provides after our request. We've to convert it into JSON, so that we can get the required data, therefore I used JSON.parse() method.

Now, you can console log the response variable.

Try running the code, and see if it works. Works? nope.

We didn't send the request yet! use xhr.send() after the above code.

Now open the console and check if it works. It should work. If it doesn't check the API link once more and see if you have substituted the right values.

Getting the required values

Now getting the required values is really simple. Take a look at the JSON and see the all the values closely.

The main JSON contains the current temperature, minimum temperature and maximum temperature.

Let's store the temperature value in temp variable.

let temp = response.main.temp;

Console log it and see if it works. It works!

Store the required values in respective variables and try console logging it. If all works, you have successfully done the API calling right!

Now, take the input element of your webpage, and call it with its id or class by document.getElementById or document.getElementByClass.

Use the value property and substitute it in the link. Template literals lets you do this by adding ${value}.

So, we have pretty much completed the API calling!

Making a simple CSS timeline for beginners!

Divyesh Kamalanaban — Mon, 08 Nov 2021 12:58:19 +0000

A little bit of backstory

While I was designing my own portfolio, I was thinking to create a dedicated timeline for it. Timelines always looked complicated, to be honest. While I searched for timelines across the internet, I came to know that there are multiple ways of creating CSS Timelines.

A few ways to create timeline:

Using Flexboxes
Using Grid
Using an Unordered List (Seriously?)
Positioning divs using transforms

We'll be using grids to create a CSS timeline, which is probably the most beginner friendly ways to get started with CSS Timelines (I hope).

Creating the basic structure

We'll start with some basic HTML to create a barebones structure for our Timeline.

<section class="full-page">
<!--This is the main container that contains the whole timeline.-->

<div class="timeline">

          <!--Well, The reason for this div is to fill space. 
This space is technically used for keeping dates, 
but I didn't find the need for dates. However, I'll provide 
you the styling for dates, so that you can use it if you 
wanted to.-->
                  <div class="timeline-empty">
                  </div>

<!--This is the class where the timeline graphics are 
housed in. Note that we have timeline-circle 
here for that pointer in timeline.-->

               <div class="timeline-middle">
                   <div class="timeline-circle"></div>
               </div>
               <div class="timeline-component timeline-content">
                <h3>HTML</h3>
                <p>Some Text</p>
           </div>
                <div class="timeline-component timeline-content">
                         <h3>CSS</h3>
                         <p>Some Text.</p>
                </div>
                <div class="timeline-middle">
                    <div class="timeline-circle"></div>
                </div>
                <div class="timeline-empty">
                </div>

                <div class="timeline-empty">
                </div>

               <div class="timeline-middle">
                   <div class="timeline-circle"></div>
               </div>
               <div class=" timeline-component timeline-content">
                <h3>Javascript</h3>
                <p>Some Text.</p>
           </div>

       </div>
    </div> 
</section>

I have explained majority part of the code in the comment blocks in the above code, in case you felt it wasn't adequate enough, let me know in the comments below.

The first half of making timeline is over. On to CSS!

Styling the timeline.

Right now, our timeline looks like this:

Not a great thing to look at. So, we'll use CSS to make our timeline look cool.

I've used Sass here, which you can see in the variables here, but there's no much deviation from regular CSS.

.full-page{
/*I have used this to center the whole timeline on the screen.*/
  display: flex;
  align-items: center;
  justify-content: center;
}

/*The timeline container has a minimal width
than the main container to make text look more dressed up.*/
.timeline{
  width: 80%;
  height: auto;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/*This is the container for timeline content. Those are its
styling. The include statement is used in sass to copy 
a certain bunch of rules. This is related to 
styling and nothing to worry at your end.*/

.timeline-content{
  padding: 20px;
  @include neu-card; 
  margin-bottom: 20px;
  border-radius: 6px ;
}

/*Adding some margin for all components in
the timeline. The timeline content is used 
for text blocks exclusively.*/

.timeline-component{
  margin: 0px 20px 20px 20px;
}

/*This is where, I've added responsiveness. Before 
this I added display: flex to show it as an 
array of text blocks. But if the screen size is
 huge enough for a timeline, you can use media 
queries to add styles that are apt for larger 
screens, which is adding a timeline. 1fr 3px
1fr means that there will be 3 columns with 2 
columns equally sized with a column of width 3px
in the middle.
*/

@media screen and (min-width: 768px) {
  .timeline{
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
  }

/*Adding the styles for the timeline line and pointer.*/

  .timeline-middle{
    position: relative;
    background-image: $linear-grad;
    width: 3px;
    height: 100%;
  }

/*Adding styles for that circle pointer. using
some transforms and positioning to keep it center*/
  .timeline-circle{
    position: absolute;
    top: 0;
    left: 50%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-image: $linear-grad;
    transform: translateX(-50%);

  }
}

And marks the end of this code. The comments in the code block are hopefully helpful in explaining the code well to you.

This is how my version of the code looks (You can find the pure CSS version in this embed, but the formatting is pretty messed:

Try resizing the result window, you'll see the magic for yourself.

There might be much efficient ways to do the same thing (Using flexboxes), but since this is a tutorial oriented for beginners, I've used grids.

Grids are really easy to understand comparatively. That's why I chose grids over flexboxes.

However, if you need a flexbox version of this, there are ton of tutorials on the internet. Who knows, maybe I could create a flexbox version of this article soon!

Stay tuned for more updates.