Open Weather Project with JSON Rest web service and Network API

Create New project RecyclerView Custom Adapter with empty activity

// android_manifest.xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.krishanandroid.openweatherproject">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

// actvity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.krishanandroid.openweatherproject.MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter zipcode"
        android:textSize="16sp"
        android:textColor="@color/colorAccent"
        android:id="@+id/et_zipcode"
        android:padding="12dp"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Check Weather"
        android:textSize="16sp"
        android:id="@+id/button_weather"
        android:padding="12dp"/>

    <TextView
        android:id="@+id/tv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Main"
        android:padding="12dp"/>

    <TextView
        android:id="@+id/tv_Description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Description"
        android:padding="12dp"/>

    <TextView
        android:id="@+id/tv_temp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Temperature"
        android:padding="12dp"/>

    <TextView
        android:id="@+id/tv_humidity"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Humidity"
        android:padding="12dp"/>

    <TextView
        android:id="@+id/tv_country"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Country"
        android:padding="12dp"        />
    <TextView
        android:id="@+id/tv_location"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Location"
        android:padding="12dp"/>

</LinearLayout>

// MainActivity.java
package com.krishanandroid.openweatherproject;

import android.content.Context;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;

public class MainActivity extends AppCompatActivity {

    TextView    mHumidity, mTemp, mCountry, mLocation, mMain, mDesc;

    EditText    mZipCode;
    Button      mCheckWeather;

    MyTask      myTask;

    private class MyTask extends AsyncTask<String, Void, String>{

        URL                 url;
        HttpURLConnection   con;
        InputStream         i;
        InputStreamReader   ir;
        BufferedReader      br;
        String              s;
        StringBuilder       sb;

        @Override        protected String doInBackground(String... strings) {

            try {
                url=new URL(strings[0]);
                con= (HttpURLConnection) url.openConnection();
                i=con.getInputStream();
                ir=new InputStreamReader(i);
                br=new BufferedReader(ir);
                sb=new StringBuilder();
                s=br.readLine();
                while (s!=null){
                    sb.append(s);//add each json line to string builder
                    s=br.readLine();//read each line from buffered reader                }
                //return json to onpost                return sb.toString();

            } catch (MalformedURLException e) {
                e.printStackTrace();
                Log.d("OWP","URL IS WRONG" + e);
            } catch (IOException e) {
                e.printStackTrace();
                Log.d("OWP","NETWORK PROBLEM" + e);
            }

            return null;
        }

        @Override        protected void onPostExecute(String s) {
            super.onPostExecute(s);
            if (s==null)
            {
                Toast.makeText(MainActivity.this,"No data found",Toast.LENGTH_LONG).show();
                return;
            }

            try {
                JSONObject jsonObject = new JSONObject(s); // Getting data in json object                JSONArray jsonArray = jsonObject.getJSONArray("weather");

                for(int i=0;i<jsonArray.length();i++){

                    JSONObject obj=jsonArray.getJSONObject(i);
                    String main=obj.getString("main");
                    String description=obj.getString("description");
                    mMain.setText("Main: "+main);
                    mDesc.setText("Description: "+description);

                }

                JSONObject main=jsonObject.getJSONObject("main");
                String temp=main.getString("temp");
                String humidity=main.getString("humidity");
                mTemp.setText("Temp: "+temp);             // temperature
                mHumidity.setText("Humidity: "+humidity); // humidity
                JSONObject sys=jsonObject.getJSONObject("sys");
                String country=sys.getString("country"); // set country name
                mCountry.setText("Country: "+country);
                String name=jsonObject.getString("name");
                mLocation.setText("Name: "+name); // set location name
            } catch (JSONException e) {
                e.printStackTrace();
                Toast.makeText(MainActivity.this, "Disconnect", Toast.LENGTH_SHORT).show();
            }
        }
    }

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // initialize variables        mHumidity = findViewById(R.id.tv_humidity);
        mTemp = findViewById(R.id.tv_temp);
        mCountry = findViewById(R.id.tv_country);
        mLocation = findViewById(R.id.tv_location);
        mMain = findViewById(R.id.tv_main);
        mDesc = findViewById(R.id.tv_Description);

        mZipCode = findViewById(R.id.et_zipcode);
        mCheckWeather = findViewById(R.id.button_weather);

        myTask = new MyTask();
        // button click listener        
mCheckWeather.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                if (checkInternet()==true)
                {
                    String zipcode = mZipCode.getText().toString();
                    myTask.execute("http://api.openweathermap.org/data/2.5/weather?
zip="+zipcode+",in&appid=bae1ba8dfee48b1");
                    mCheckWeather.setEnabled(false);
                }else                {
                    Toast.makeText(MainActivity.this,"No internet",Toast.LENGTH_LONG).show();
                }
            }
        });

    }

    public boolean checkInternet(){
        ConnectivityManager manager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo networkInfo = manager.getActiveNetworkInfo();
        if (networkInfo!=null && networkInfo.isConnected()== true){
            return true; // internet available        }else{
            return false;//means no internet        }
    }
}
Live Demo: https://www.youtube.com/watch?v=5neuwaL-09Y

Multiple fragments in one activity example

Create New project Multiple Fragment with empty activity

// activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" 
   android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.krishanandroid.multiplefragment.MainActivity">

    <FrameLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/container" >
    </FrameLayout>
</LinearLayout>
// fragment-login.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.krishanandroid.multiplefragment.MainActivity">

    <EditText 
       android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="enter email"
        android:id="@+id/editText1"
        android:textSize="24sp"
        android:gravity="center_horizontal"
        android:textColor="@color/colorAccent"/>

    <EditText
        android:layout_width="match_parent" 
       android:layout_height="wrap_content"
        android:hint="enter password"
        android:id="@+id/editText2"
        android:textSize="24sp"
        android:gravity="center_horizontal"
        android:textColor="@color/colorAccent"/>


    <Button 
       android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Login"
        android:layout_gravity="center"
        android:textSize="16sp"/>

</LinearLayout>
// fragment_welcome.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.krishanandroid.multiplefragment.MainActivity">

    <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="Welcome user"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:text="Your name is: "
        android:textSize="24sp"/>

</LinearLayout>
//WelcomeFragment.java
package com.krishanandroid.multiplefragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class WelcomeFragment extends Fragment {

    TextView mTv1, mTv2;

    public WelcomeFragment() {
        // Required empty public constructor    }

       @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment        
View view = inflater.inflate(R.layout.fragment_welcome, container, false);
        mTv1 = view.findViewById(R.id.textView1);
        mTv2 = view.findViewById(R.id.textView2);

        Bundle bundle = getArguments();
        if (bundle!=null)
        {
            String email = bundle.getString("email");
            String pwd = bundle.getString("pwd");

            mTv1.setText("Hi "+email);
            mTv2.setText("Pwd: "+pwd);
        }
        return view;
    }
}
// LoginFragment.java
package com.krishanandroid.multiplefragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;

public class LoginFragment extends Fragment {

    EditText        mEmail, mPassword;
    Button          mButtonLogin;

    public LoginFragment() {
        // Required empty public constructor    }

    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment       
 View view = inflater.inflate(R.layout.fragment_login, container, false);

        mEmail = view.findViewById(R.id.editText1);
        mPassword = view.findViewById(R.id.editText2);
        mButtonLogin = view.findViewById(R.id.button1);

        mButtonLogin.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                String email = mEmail.getText().toString();
                String pwd = mPassword.getText().toString();

                MainActivity m = (MainActivity) getActivity();
                m.loadWelcome(email, pwd);
            }
        });
        return view;
    }

}

// MainActivity.java
package com.krishanandroid.multiplefragment;

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    FragmentManager                 fragmentManager;
    FragmentTransaction             fragmentTransaction;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fragmentManager = getSupportFragmentManager();
        fragmentTransaction = fragmentManager.beginTransaction();

        LoginFragment loginFragment = new LoginFragment();
        Bundle bundle = new Bundle();
        loginFragment.setArguments(bundle);

        fragmentTransaction.add(R.id.container,loginFragment);
        fragmentTransaction.commit();

    }

    public void loadWelcome(String email, String pwd) {

        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction  fragmentTransaction = manager.beginTransaction();

        WelcomeFragment welcomeFragment = new WelcomeFragment();

        Bundle bundle = new Bundle();
        bundle.putString("email",email);
        bundle.putString("pwd",pwd);
        welcomeFragment.setArguments(bundle);
        fragmentTransaction.replace(R.id.container,welcomeFragment);
        fragmentTransaction.addToBackStack(null); // Back button correctly        fragmentTransaction.commit();
    }
}

Live Demo: https://www.youtube.com/watch?v=vgReN-zmXnQ

Android Activity Life Cycle Example

Create New project ActivityLifeCycle with empty activity.

// activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main" 
   android:layout_width="match_parent"
    android:layout_height="match_parent" 
   android:orientation="vertical" 
   tools:context="com.krishanandroid.activitylifecycle.MainActivity">

    <TextView       
 android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <Button      
  android:layout_width="match_parent"   
     android:layout_height="wrap_content"  
      android:text="Open Second Screen"  
      android:id="@+id/button"  
      android:onClick="openSecondScreen"/>
</LinearLayout>

// MainActivty.Java
package com.krishanandroid.activitylifecycle;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toast.makeText(MainActivity.this,"1. onCreate",Toast.LENGTH_LONG).show();
    }

    @Override    protected void onStart() {
        super.onStart();
        Toast.makeText(MainActivity.this,"2. onStart",Toast.LENGTH_LONG).show();
    }

    @Override    protected void onRestoreInstanceState(Bundle savedInstanceState) {
        super.onRestoreInstanceState(savedInstanceState);

        Toast.makeText(MainActivity.this,"3. onRestore",Toast.LENGTH_LONG).show();
    }

    @Override    protected void onResume() {
        super.onResume();
        Toast.makeText(MainActivity.this,"4. onResume",Toast.LENGTH_LONG).show();
    }

    @Override    protected void onPause() {
        super.onPause();
        Toast.makeText(MainActivity.this,"5. onPause",Toast.LENGTH_LONG).show();
    }

    @Override    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        Toast.makeText(MainActivity.this,"6. onSave",Toast.LENGTH_LONG).show();
    }

    @Override    protected void onStop() {
        super.onStop();
        Toast.makeText(MainActivity.this,"7. onStop",Toast.LENGTH_LONG).show();
    }

    @Override    protected void onRestart() {
        super.onRestart();
        Toast.makeText(MainActivity.this,"8. onRestart",Toast.LENGTH_LONG).show();
    }

    @Override    protected void onDestroy() {
        super.onDestroy();
        Toast.makeText(MainActivity.this,"9. onDestroy",Toast.LENGTH_LONG).show();
    }

    // On button click implementation    public void openSecondScreen(View view) {

        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        startActivity(intent);
    }
}

// activity_second.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   xmlns:tools="http://schemas.android.com/tools" 
   android:id="@+id/activity_second" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical"  
  tools:context="com.krishanandroid.activitylifecycle.SecondActivity">

    <TextView     
   android:layout_width="match_parent"   
     android:layout_height="wrap_content" 
       android:text="Welcome to Second Screen"  
      android:textColor="@color/colorAccent"   
     android:textSize="24dp"/>

</LinearLayout>

// SecondActivity.java
package com.krishanandroid.activitylifecycle;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class SecondActivity extends AppCompatActivity {

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
    }
}
Live Demo: https://www.youtube.com/watch?v=PYnBSDMsO2c&t=121s

RecyclerView Custom Adapter Example

Create New project RecyclerView Custom Adapter with empty activity

Add dependencies in build.gradle as below

dependencies {
    implementation 'com.android.support:recyclerview-v7:26.0.0'
}

// activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"    

xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"   

 android:layout_height="match_parent"   

 android:orientation="vertical"  

  tools:context="com.krishanandroid.recyclerviewcustomadapter.MainActivity">

    <EditText  android:layout_width="match_parent"  

      android:layout_height="wrap_content" 

       android:id="@+id/et_eno" 

       android:hint="enter eno" 

       android:inputType="number"

        android:textSize="16sp"   

     android:gravity="center_horizontal"/>

    <EditText    

    android:layout_width="match_parent"  

      android:layout_height="wrap_content" 

       android:id="@+id/et_name"  

      android:hint="enter name"   

     android:inputType="text"  

      android:textSize="16sp"  

      android:gravity="center_horizontal"/>

    <EditText   

     android:layout_width="match_parent"  

      android:layout_height="wrap_content" 

       android:id="@+id/et_salary"  

      android:hint="enter sal"

        android:inputType="number" 

       android:textSize="16sp"   

     android:gravity="center_horizontal"/>

    <Button     

   android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:id="@+id/button_add"  

      android:text="Add"  

      android:textSize="16sp"/>

    <android.support.v7.widget.RecyclerView 

       android:layout_width="match_parent" 

       android:layout_height="match_parent"  

      android:id="@+id/recyclerView1"    

    android:padding="4dp">

    </android.support.v7.widget.RecyclerView>

</LinearLayout>

// MainActivity.java

package com.krishanandroid.recyclerviewcustomadapter;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import java.util.ArrayList;

import static android.support.v7.widget.LinearLayoutManager.VERTICAL;

public class MainActivity extends AppCompatActivity {

    EditText                mEno, mESalary, mEName;
    Button                  mButtonAdd;

    RecyclerView            mRecyclerView;

    ArrayList<RowItems>     arrayList;
    LinearLayoutManager     linearLayoutManager;
    RecyclerViewAdapter     myAdapter;

    public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>{

        @Override        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

            View view = getLayoutInflater().inflate(R.layout.row_items, parent,false);

            ViewHolder viewHolder = new ViewHolder(view);
            return viewHolder;
        }

        @Override        public void onBindViewHolder(ViewHolder holder, int position) {

            RowItems items = arrayList.get(position);
            holder.tv1.setText(""+items.getEno());
            holder.tv2.setText(items.getEname());
            holder.tv3.setText(""+items.getEsalary());
        }

        @Override        public int getItemCount() {
            return arrayList.size();
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            TextView tv1, tv2, tv3;
            public ViewHolder(View itemView) {
                super(itemView);
                tv1 = itemView.findViewById(R.id.tv1);
                tv2 = itemView.findViewById(R.id.tv2);
                tv3 = itemView.findViewById(R.id.tv3);
            }
        }
    }

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mEno = findViewById(R.id.et_eno);
        mESalary = findViewById(R.id.et_name);
        mEName = findViewById(R.id.et_salary);
        mButtonAdd = findViewById(R.id.button_add);

        mRecyclerView = findViewById(R.id.recyclerView1);

        arrayList = new ArrayList<RowItems>();
        myAdapter = new RecyclerViewAdapter();

        linearLayoutManager = new LinearLayoutManager(MainActivity.this, VERTICAL, false);

        mRecyclerView.setAdapter(myAdapter);

        mRecyclerView.setLayoutManager(linearLayoutManager);

        mButtonAdd.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                String no = mEno.getText().toString();
                String salary = mESalary.getText().toString();
                String name = mEName.getText().toString();

                RowItems rowItems = new RowItems(no, salary, name);

                arrayList.add(rowItems);
                myAdapter.notifyDataSetChanged();
                mEno.setText(" ");
                mESalary.setText(" ");
                mEName.setText(" ");
                mEno.requestFocus();
            }
        });
    }
}

// row_items.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView    
    android:layout_width="wrap_content"  
      android:layout_height="wrap_content" 
       android:text="eno"    
    android:id="@+id/tv1"   
     android:textSize="16sp" 
       android:padding="4dp"/>

    <TextView   
     android:layout_width="wrap_content"  
      android:layout_height="wrap_content" 
       android:text="ename"   
     android:id="@+id/tv2"   
     android:layout_marginLeft="12dp" 
       android:textSize="16sp" 
       android:padding="4dp"/>

    <TextView    
    android:layout_width="wrap_content"   
     android:layout_height="wrap_content"
        android:text="esalary"    
    android:layout_marginLeft="12dp"
        android:id="@+id/tv3" 
       android:textSize="16sp" 
       android:padding="4dp"/>
</LinearLayout>

// RowItems.java
package com.krishanandroid.recyclerviewcustomadapter;

/** * Created by user on 9/13/2018. */// Bean classpublic class RowItems {
    String eno, ename, esalary;

    // constructors    public RowItems(String eno, String ename, String esalary) {
        this.eno = eno;
        this.ename = ename;
        this.esalary = esalary;
    }

    public String getEno() {
        return eno;
    }

    public void setEno(String eno) {
        this.eno = eno;
    }

    public String getEname() {
        return ename;
    }

    public void setEname(String ename) {
        this.ename = ename;
    }

    public String getEsalary() {
        return esalary;
    }

    public void setEsalary(String esalary) {
        this.esalary = esalary;
    }
}
Live Demo: https://www.youtube.com/watch?v=K9jVvwQ1MPs