DEV Community: Fahad Hassan

Build a Weather App using JavaScript

Fahad Hassan — Sat, 08 May 2021 13:46:36 +0000

Let's get started!

to get complete code visit : GitHub

Some basic things we need to understand before creating a weather app are.

We need to fetch weather data from a weather forecasting the platform using APIs
After fetching data we need to extract our required information from that weather data e.g: weather_condition, temperature etc

Fetching Weather data using AccuWeather APIs

AccuWeather is an American company that provides international weather forecasting services.

Note: to fetch weather information using APIs from Accuweather we first need to create a user account on accuweather.

Please visit Accuweather tutorial

It is a detailed video tutorial on how to get started with AccuWeather and to get APIs, which we are using in our code to fetch weather data.

Basic HTML Structure and CSS Styling

I have used bootstrap for basic styling. To get the HTML and CSS file please visit GitHub

JavaScript code

Create a new file forecast.js

1. `forecast.js` File

Task# 1

In forecast.js first, you need to initialize your API key

const key = 'CXhPk82ZAZgV0ngVUWdVBVGePc4qMGqf';

After this we need to create two function getCity() and getWeather(). Using these functions we will fetch the city data and weather_condition of that city from AccuWeather.

const key = 'CXhPk82ZAZgV0ngVUWdVBVGePc4qMGqf';

const getCity = async(city) =>{/*code to fetch the city detail using API*/}

const getWeather = async(id) =>{/*code to fetch the weather detail using API*/}

Task# 2

In getCity() and getWeather() we need to define two variables url and query.

Now initialize these variables as follows.

const getCity = async(city) =>{

    const url = 'https://dataservice.accuweather.com/locations/v1/cities/search';
    const query = `?apikey=${key}&q=${city}`
}

const getWeather = async(id) =>{

    const url = 'https://dataservice.accuweather.com/currentconditions/v1/'
    const query = `${id}?apikey=${key}`
}

Note: to understand the API key, URL and Query please watch the above given video tutorial

In the above code, after setting the API key, URLs and Query we need to call the fetch() method and pass the rrl + query as an argument which makes a complete web address resource to access the data. The Fetch API accesses resources across the network. You can make HTTP requests (using GET, POST, and other methods), download, and upload files. fetch() starts a request and returns a promise. When the request completes, the promise is resolved with the Response object.

const key = 'CXhPk82ZAZgV0ngVUWdVBVGePc4qMGqf';

const getCity = async(city) =>{

    const url = 'https://dataservice.accuweather.com/locations/v1/cities/search';
    const query = `?apikey=${key}&q=${city}`

    const response = await fetch(url+query);
    const data = await response.json();
    return data[0];

}


const getWeather = async(id) =>{

    const url = 'https://dataservice.accuweather.com/currentconditions/v1/'
    const query = `${id}?apikey=${key}`
    const response = await fetch(url+query);
    const data = await response.json();

    return data[0];
}

getCity() and getWeather() are asynchronous functions since they are marked with the async keyword. As fetch() return a promise so you have to wait for it to be resolved that's why we have marked it with an await keyword.
We are returning the 0-index of data return data[0] because when the promise becomes resolve it will return 2 types of data [0] and [1]. The most accurate one will always be the first one [0], so that's why we are returning [0]-index of data

In the end, we will get a response object in the JSON formate of city details from getCity() same is the case with getWeather() as they are returning promises we will deal with these promises in the app.js file.

2. `app.js` file

In app.js we have a async function named updateCity() as shown below

let updateCity = async (city) =>{

    const cityName = await getCity(city);
    const weatherDetail = await getWeather(cityName.Key);

    return{cityName,weatherDetail};
}

this function is returning an object having city details and weather details.

because the async function always returns a promise so in the code below we are getting the name of the city from the user and passing the city name as an argument to updateCity() function and as we know updateCity() function will return a promise so we need to deal with that promise (if the promise is resolved 'then' what? and if it is not resolved 'catch' the error)

getCityForm.addEventListener('submit',e =>{
    e.preventDefault();

    const city = getCityForm.city.value.trim();
    getCityForm.reset();

    updateCity(city)
        .then(data => updateUI(data))
        .catch(err => {
            console.log(alert('Please enter a valid city name'))
            console.log(err);
        })
})

When the promise becomes resolved we have to update our user interface to show the details to the user.

So in the code, above we pass the resolved promise to the updateUI() function(which will update our User Interface)

const updateUI = (data) =>{

    wDetail.classList.remove('d-none')
    cityTime.classList.remove('d-none')
    const cityDetail = data.cityName;
    const weatherDetail = data.weatherDetail;
    degree.textContent = weatherDetail.Temperature.Metric.Value;
    condition.textContent = weatherDetail.WeatherText
    const weatherIconNumber = weatherDetail.WeatherIcon
    icon.setAttribute('src',`icons/${weatherIconNumber}.svg`)

    //from weather condition we will get timestamp 
    //So we have to convert it into real time
    const timestamp = weatherDetail.LocalObservationDateTime;
    const now = new Date(timestamp)
    curTime.textContent = now.toLocaleDateString()
    curCity.textContent = cityDetail.EnglishName
    if(weatherDetail.isDayTime){
        curMeridiem.textContent = "Day";
    }else{
        curMeridiem.textContent = 'Night';
    }
}

In the updateUI() function we are simply first getting the sub details(e.g: Temperature, weather condition, etc) of city and weather details and rendering those details on the screen.

Hurry! Our Weather app is ready

Conclusion

Thanks for reading this article!
If you have some queries or want to share something hit a comment below!

Build a Pomodoro timer using JavaScript

Fahad Hassan — Thu, 06 May 2021 22:01:58 +0000

Let's understand how can we create a Pomodoro timer by using JavaScript

To get complete code visit: GitHub

What is a Pomodoro Timer?

Pomodoro Timer is a technique that uses a timer to break down work into intervals. Traditionally 25 minutes in length separated by short breaks. The image below is an example of a Pomodoro timer.

Let's get started!

Task# 1

We need to decrease the time of the timer starting from 25 minutes to 0
As we know, in a Pomodoro timer every work session will be of 25 minutes and after every 25 minutes there will be a break session, let suppose break time is 5 minutes

workDuration = 25
breakDuration = 5
seconds = 60

Our first task is to decrease the time by one second seconds = seconds - 1 on every clock second.

We also need to keep in mind that when the seconds become :00 we need to reinitialized seconds = 60 and with this, we also need to decrement the minutes by 1 workDuration = workDuration - 1;

let's arrange the code by writing a function RemainingTime()

workMinutes = workDuration - 1           //25 = 24:59
breakMinutes = breakDuration - 1        //5 = 4:59 
let RemainingTime = () =>{
    seconds = seconds - 1
    if(seconds === 0){
        workMinutes = workMinutes - 1
        seconds = 60
}
}

Now we are done with Task# 1. But there is a problem!

The RemainingTime() function will execute only once when we call it, so to fix this problem we need to call this function on every clock second.

Task 2

To call a function multiple times there is a built-in method in JavaScript named as setInterval

setInterval() method is used to execute a specified function multiple times at set time intervals specified in milliseconds (1000ms = 1second). We have to pass to arguments to this method

setInterval(your_fucntion_name , specified_time)

As we want to call our function on every clock second so our arguments to the set interval method will be

setInterval(RemainingTime,1000)

Now the code will look like

let RemainingTime = () =>{
    seconds = seconds - 1
    if(seconds === 0){
        workMinutes = workMinutes - 1
        seconds = 60
}
}
let timer = setInterval(RemainingTime , 1000)

Now it make sense , Our function will be called on every clock second
If you noticed we are not dealing with the break time in the above function.

What if the workMinutes become -ve by continuously decrement in workMinutes?

When the work duration will be over (workMinutes become -ve) we need to start the break session (breakDuration = 5)

For this purpose we have to add some conditions in our code

let RemainingTime = () =>{
    seconds = seconds - 1
    if(seconds === 0){
        workMinutes = workMinutes - 1
        if(workMinutes === -1){
             workMinutes = breakMinutes
}
        seconds = 60
}
}
let timer = setInterval(RemainingTime , 1000)

In the above code when the workMinutes become -ve(or less than 0) then breakMinutes will be assigned to workMinutes
This condition causes the code to start a session of break(5 minutes session) when the workMinutes become over

Let understand this by an example

- let we have workMinutes = 4:59 and we have breakMinutes = 1:59
- Now start decreasing the workMinutes
  (4:59,4:58,4:57,4:56 ..... 0:05,0:04,0:03,0:02,0:01,0:00,-1:59)
  in the above line when the workMinutes become -ve(-1:59)
- We will assign breakMinute to workMinutes then workMinutes 
  become workMinutes = 1:59
- Now when we do this workMinutes will never goes to -ve value. 
- However when it will become -ve It will start a break session 
  of specified time (e.g: 1:59) and will start decreasing the 
  break time which is (1:59,1:59,1:57 ..... 0:00)

Now if you noticed, what will we do when the break session will over?

if we do not deal with this, the timer will again go to -ve time and will start decreasing that time.

Task 3

The solution to the above problem is, we have to again start the work session when the break session become 0:00 or turned to the -ve timer.

To do this we have to add another condition that will help us regarding this.

Before doing this, I want you to consider that we are also dealing with the break session after every work session. So we need a break session after every work session.

We just have to follow the following sequence for a continuous timer.

After every work session, there will be a break session
After the break session, there will be always a work session

We need to count the break session so that by using breakCount we can be able to check the turn of the break session

To follow this sequence in our code we need to just put some conditions and these conditions will check whether there is time for work session time or break session time.

let have a look at the code to understand the scenario.

breakCount = 0
let RemainingTime = () =>{
    seconds = seconds - 1
    if(seconds === 0){
        workMinutes = workMinutes - 1
        if(workMinutes === -1){
            if(breakCount % 2 === 0){
               workMinutes = breakMinutes;
               breakCount++
            }else{
               workMinutes = workDuration - 1
               breakCount++
            }
          }
        seconds = 60
      }
}
let timer = setInterval(RemainingTime , 1000)

Hurry! our Pomodoro timer is ready

In the end when we want to stop our timer. For this, we just have to stop the setInterval() method so that it stops the function calling.

To do this we just have to use the built-in method of JavaScript named as clearInterval() method which is used to clear or stop the set Intervals in JavaScript.

clearInterval(timer)

You have to add an event listener on your stop button. When the stop button is clicked, you need to call the method clearInterval(timer) which will stop the timer completely.

Conclusion

Thanks for reading this article!
want to ask something? hit a comment below!

Create a Digital Clock using JavaScript

Fahad Hassan — Thu, 06 May 2021 19:08:27 +0000

What we are covering in this article?

In this article, you will learn to create a digital clock in 12-hours format HH: MM: SS AM/PM. As well as we also cover how to display the current day and current date by using some built-in methods of JavaScript.

To get the complete code visit: GitHub

Let's Get started!

JavaScript Code

JavaScript code includes 3 main code sections

tick() function
getDayName() function
setInterval() Method

1. `tick()` function :

const tick = () =>{ /*entire code of clock*/ }

Our entire code for displaying the current time will be in the tick() function

In this function, we have 2 tasks to do

Task# 1

first we have to creat a new Date() object

const current = new Date();

Date object contains different built-in javascript methods Date object methods

We want to display the current time which includes (hours, minutes, seconds).We use getHours(), getMinutes(), getSeconds() to display current hours, minutes and seconds

getHours(): method returns the hours of the Date as a number (from 0 to 23).
getMinutes(): method returns the minutes of the Date as a number (from 0 to 59).
getHours(): method returns the seconds of the Date as a number (from 0 to 59).

As we also want to display the current day, then we will use the getDay() method to get the current day.

getDay(): method returns the weekday of the date as a number (from 0 to 6).

Now let's write some code

const current = new Date();

    let ss =current.getSeconds();
    let mm = current.getMinutes()
    let hh = current.getHours();
    let currentDay = current.getDay();

As you know, we are creating a digital clock in a 12-hours. format. A 12-hour digital clock includes meridiem (AM/PM). So we need to add meridiem with the time.

initially we will set meridiem to 'AM'

const meridiem = 'AM';

After this, we have to set some conditions on current hours
to display time in 12-hour format.

    if(hh === 00){
        hh = 12
        meridiem = 'AM';
    }
    else if( hh === 12 ){
        meridiem = 'PM';
    }
    else if( hh > 12){
        hh = hh - 12
        meridiem = 'PM';
    }

our Task# 1 is completed!. Now moving on to a new task

Task# 2

In this task, we need to render our current time on the screen.
To do this we will change the textContent of our elements which we defined in our HTML file.

Note: to get HTML and CSS files please visit GitHub/Digital-clock.

before rendering the time we need to ensure one thing, that time must be displayed in 2-digits format, when it will be less than 10.

Example:
If hours = 2 which is less than 10 that means it must be displayed as 02.
The same will be the case with minutes and seconds.

    hours.textContent = `${hh<10? `0${hh}`:hh}`;
    minutes.textContent =`${mm<10? `0${mm}`:mm}`;
    seconds.textContent =`${ss<10? `0${ss}`:ss}`
    checkMeridiem.textContent = meridiem;
    date.textContent = current.toLocaleDateString();

In the above code, we have a new method toLocaleDateString() which will return the current date in D/M/YYYY format

As I mentioned above, we also need to display the current weekday of the current date.

2. `getDayName()` function :

We need to define a function called getDayName()

const getDayName = (value) =>{
    const DayNames = [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
    ]
    return DayNames[value];
}

this function will get an argument named as value which will be an integer value. Inside this function, we have to define an array of names of days of a week and this function will return the day_name corresponding to the argument passed to the function.

3. `setInterval()` Method

Now our last task is to continuously call our tick() function because we want to increment our time on every clock second.

To do this we have to use a build-in JavaScript method named setInterval() which executes a function at specified intervals in milliseconds.

setInterval method gets two arguments. One is function_name and the other is time in milliseconds(1000 milliseconds = 1 second).

Syntax of setInterval Method :

setInterval(function_name,time_interval);

Now to execute our function on every clock second we will use setInterval() method as follows.

setInterval(tick,1000)

Now let's arrange the complete code

const tick = () =>{
    const current = new Date();

    let ss =current.getSeconds();
    let mm = current.getMinutes()
    let hh = current.getHours();
    let meridiem = 'AM';
    let currentDay = current.getDay();


    //Converting the 24 hours formate into 12 hour formate 
    if(hh === 00){
        hh = 12
        meridiem = 'AM';
    }
    else if( hh === 12 ){
        meridiem = 'PM';
    }
    else if( hh > 12){
        hh = hh - 12
        meridiem = 'PM';
    }



    hours.textContent = `${hh<10? `0${hh}`:hh}`;
    minutes.textContent =`${mm<10? `0${mm}`:mm}`;
    seconds.textContent =`${ss<10? `0${ss}`:ss}`
    checkMeridiem.textContent = meridiem;
    date.textContent = current.toLocaleDateString();
    day.textContent = getDayName(currentDay);

}

const getDayName = (value) =>{
    const DayNames = [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
    ]
    return DayNames[value];
}


setInterval(tick,1000)

Hurry! Our stunning Digital Clock is ready.

Add this to your project showcase and share it with your friends and give a boost to your profile.

Understanding 'Cursor' in SQL

Fahad Hassan — Wed, 05 May 2021 17:47:33 +0000

What is Cursor?

In SQL cursor is a temporary work area created in system memory when a SQL statement is executed. In other words the cursor is a database object which is very useful when we want to manipulate the record of a table

Note: Cursor can hold more than one row but can process only one row at a time

How to use a Cursor?

There are four steps to use a Cursor

Declare : This part includes declaring the cursor with a cursor name.
Open : This is the entering part of the cursor.
Fetch : This part includes row by row retrieval of data.
Close : This part includes exiting from cursor, used to close cursor.
Deallocate : This is the deallocation part of cursor in which all the system resources associated with cursor will be released.

Syntax

DECLARE cursor_name CURSOR
OPEN cursor_name
FETCH NEXT FROM cusror_name

/implement sql queries/

CLOSE cursor_name
DEALLOCATE cursor_name

Parametrized Cursor

SQL allows to pass parameters to a cursor. Sometime when we want provide condition with WHERE clause we use parametrized cursor.

Syntax of Parametrize Cursor

DECLARE cursor_name(parameter_name parameter_datetype)

to open a cursor with parameters we use following syntax

OPEN cursor_name(value_list)

In this syntax you have to pass the arguments corresponding to the parameters of the cursor

DEV Community: Fahad Hassan

Build a Weather App using JavaScript

Let's get started!

Fetching Weather data using AccuWeather APIs

Basic HTML Structure and CSS Styling

JavaScript code

1. forecast.js File

Task# 1

Task# 2

2. app.js file

Conclusion

Build a Pomodoro timer using JavaScript

What is a Pomodoro Timer?

Task# 1

Task 2

Task 3

Conclusion

Create a Digital Clock using JavaScript

What we are covering in this article?

JavaScript Code

1. tick() function :

Task# 1

Task# 2

2. getDayName() function :

3. setInterval() Method

Syntax of setInterval Method :

Understanding 'Cursor' in SQL

What is Cursor?

How to use a Cursor?

Syntax

Parametrized Cursor

Syntax of Parametrize Cursor

1. `forecast.js` File

2. `app.js` file

1. `tick()` function :

2. `getDayName()` function :

3. `setInterval()` Method