Category: Javascript

Introduction

Javascript Introduction

Javascript Introduction

Javascript initially designed to make web pages alive.

The Program written in javascript language called as scripts. It can be written in the html and executed automatically as the page load.

Javascrip executed as a plain text. They don’t need a special preparation or comliler to run the program.

Why JavaScript

Firstly Javascript was created with the name as LiveScript, But at that time java was very popular language.

So It was decided that positioning a new language as a Java would help.

But as it evolved, JavaScript becomes a independent language, with it’s own specification.

Now Javascript has no relation to java at all.

At Present JavaScript can not only execute in the browser, it also run on the server as nodejs.

Moreover JavaScript can be executed on any device that has a special program called the JavaScript Engine.

Developer Console

Developer’s Console

User doesn’t see the errot by default in the browser if something gose wrong in the script or if there is some king of error in the script.

To see errors and get the useful information about script developers console have been embedded in the browsers.

Mostly developers use Chrome or Firefox web browsers because those browsers have the best developer tools.

Other browsers also provide developer tools.

Some browsers provides some special features, but usually we use firefox or chrome.

Developer tools are potent; there are many features. To start, we’ll learn how to open and see errors there.

To open the Developer Console just press F12 key or Cmd+Opt+J for Mac

Then you will see one tab name console there we can see all the code error or warnings.

Developer Console looks something like this:

Javascript Developer Console

Syntax

Javascript Syntax

JavaScript program can be insterted in any part of the html document by using syntax <script> tag.

For Example:

<html>
  <head>
    <title>Javascript</title>
  </head>
  <script>
    alert('Hi There');
  </script>
</html>

The Code written in the <script> tag will automativally executed when the browser meets the tag.

Moderen Markup

As we are using HTML5 there days there is not need to use any kind of attribute with the script tag.

The old HTML4 required to use script type with the tag as follow:

<script type="text/javascript"></script>

External Script:

If we have a lot of JavaScript code we can put it into a separate file.

Different file should be saved as filename.js

The script file is attached to HTML with the src attribute:

<script src='/abcd/js/myfile.js'></script>

In the above code /abcd/js/myfile.js is a absolute path for the javascript file.

It is also possible to provide path relative to the current folder of your file is located in the same folder.

<script src='myfile.js'></script>

First JS Code

As we have learn about how to use JavaScript with our HTML code in the last tutorial let Checl First JS Code.

Now It’s time to use JavaScript to print some text in our browser.

To print something in JavaScript we need to use document.write();

in the syntax document.write() document stands for entire document and write use to write something on the page.

The syntax can be used as follow :

<script>
   document.write("Hello Javascript");
</script>

We can use script tag anywhere on the webspage there is no specific location to place our javascript code.

But if we used document.write() anywhere in the script tag it will reflect inside the bod tag only as this will define by the javascript.

Variables

A Javascript applicaion need to work with the information it can be store as a variables.

Variable are known as named storage for data, we can bind any kind of data in the variable.

Data stored in variable can be called anytime on the document.

We need to use let keyword to create new variable in JavaScript

Example for the same:

<script>
    let msg = "Message";
</script>

To print the above statement here is the code:

<script>
document.write(msg);
</script>

We can diclate multiple variable in single line :

<script>
   let msg= "message", username="John Deo";
</script>

You may also get to know one more keyword use to diclare variable name in JavaScript known as var.

Technically both var and let are the same but in the slightly different.

the var keyword used in the old javascript modren javascript use let keyword for declaring variable.

overriting variable:

<script>
  let msg;
  msg = "Hello";
  msg = "There";
  document.write(msg);// will print There
</script>

There is one more popular method for variable known as copy variable.

<script>
   let abc = "abc";
   let aaa = abc;
   document.write(aaa); // print abc
</script>

So in the above code I have just copy the contaent contain by abc into aaa.

 

While Loop

While loop creates a loop that executes a specified statement as long as the condition will not be true.

If you don’t have any idea about loop before please read this article first.

While Loop checked before executing the statement.

Syntax:

var a = 0;
while( a < 4){
  a++;
}

Condition:

Expression evaluated before pass through the loop. If condition checked to false, statement will be executed.

When condition checked to true execution will stop.

 

Random Colour Squares with Javascript

Hi Everyone in this tutorial I am going to let you know random coloured box.

Random Colour Squares with Javascript
Random Colour Squares with Javascript

So these are the type of boxes used in musical squares.

These boxes are randomly coloured with javascript code.

So we need to do following things to make it happen.

  1. Create Multiple boxes
  2. Generate random number
  3. Check if random number is odd or even

So let’s start with the coding part first of all I am going to create 200 box.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Change Color</title>
<style media="screen">
.square{
width: 40px;
height: 40px;
margin: 5px;
display: inline-block;
}
.dg{
background: grey;
}
.lg{
background: #ccc;
}
</style>
</head>
<body>
<script>

for(var i = 1; i<=200; i++){
var num = getRandomArbitrary(1,200);
document.write('<div class="square dg">');
document.write('</div>');
}
</script>
</body>
</html>

In the above code I have made 200 box with javascript loop with the dark grey color.

Now it’s time to let these boxes which colour should taken by each box.

For the same first of all I am going to create one random number generator function.

function getRandomArbitrary(min, max) {
   return Math.floor(Math.random() * (max - min) + min);
}

So once random number will be generated. Now we need to check weather it’s odd or even.

For the same I have one more function.

function numbertype(num){
  if(num % 2 == 0){
    return 'dg';
  }else{
    return 'lg';
  }
}

Now we are ready to generate these boxes automatic choosing.

Here is the final Code for Random Colour Squares with Javascript:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Change Color</title>
<style media="screen">
.square{
width: 40px;
height: 40px;
margin: 5px;
display: inline-block;
}
.dg{
background: grey;
}
.lg{
background: #ccc;
}
</style>
</head>
<body>
<script>
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function numbertype(num){
if(num % 2 == 0){
return 'dg';
}else{
return 'lg';
}
}
var c = '';
for(var i = 1; i<=200; i++){
var num = getRandomArbitrary(1,200);
document.write('<div class="square '+numbertype(num)+'">');
document.write('</div>');
}
</script>
</body>
</html>

 

Hope you guys enjoy this musical squares tutorial stay tuned for my upcoming posts.

In my next post I will let you know how to change colour on every key press.

Random Color Squares on Keyup

Hi Everyone, Random Color Squares on Keyup This will be continued to my last post.

Before all the boxes take the place after reloading the page.

In this post I am going to do the same thing with keyup method.

Random Color Squares on Keyup
Random Color Squares on Keyup

So the ideal is that whenever we press the key it will generate different output every time.

let’s start with the coding part:

First of all we need to create multiple square boxes using the javascript for loop.

Check my last post for the same (if needed).

After this I am going to create one variable and place all the square boxes inside.

function createboxes(){
var c = '';
for(var i = 1; i<=200; i++){
var num = getRandomArbitrary(1,200);
 c += '<div class="square '+numbertype(num)+'"></div>';
}
 document.getElementById('boxes').innerHTML = c;
}
createboxes();

In the above code I have just create new function named createboxes().

Lastly I have called the same function to be executes.

Now it’s time to make it happen on keyup.

$(document).ready(function(){
$(this).keyup(function(){
createboxes();
});
});

You can see in the above code I have jused jquery to make this process easier.

Firstly I have select the entire document and when it’s ready then use keyup method to capture user activity.

Here is the complete code for Random Color Squares on Keyup:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Change Color</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style media="screen">
.square{
width: 40px;
height: 40px;
margin: 5px;
display: inline-block;
}
.dg{
background: grey;
}
.lg{
background: #ccc;
}
</style>
</head>
<body>
<div id="boxes"></div>
<script>
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function numbertype(num){
if(num % 2 == 0){
return 'dg';
}else{
return 'lg';
}
}
function createboxes(){
var c = '';
for(var i = 1; i<=200; i++){
var num = getRandomArbitrary(1,200);
c += '<div class="square '+numbertype(num)+'"></div>';
}
document.getElementById('boxes').innerHTML = c;
}
createboxes();
$(document).ready(function(){
$(this).keyup(function(){
createboxes();
});
});
</script>
</body>
</html>

So that’s all for today guys hope you enjoy this tutorial, stay tuned for my upcoming posts.

Create Timer in JavaScript

Create Timer in JavaScript

Hello everyone, In this tutorial I am going to Create one timer widget.

Time widget is used to set timer for many reasons ex: Quiz test.

Now let’s start with the designing part first, I have used bootstrap and jquery for the same.

HTML Code :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Timer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
.timer_box{
width: 100px;
height: 100px;
line-height: 100px;
font-size: 25px;
}
</style>
</head>
<body class="bg-danger">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 mx-auto mt-5 bg-info p-5">
<h1>Javascript Timer</h1>
<hr/>
<label>Enter Seconds</label>
<input type="text" id='seconds_time' class="form-control" />
<div class="row">
            <div class="col-md-4">
                <input type="button" class="btn btn-success mt-3 btn-block start" value="Start" />
            </div>
            <div class="col-md-4">
                <input type="button" class="btn btn-danger mt-3 btn-block stop" value="Stop" />
            </div>
            <div class="col-md-4">
                <input type="button" class="btn btn-warning mt-3 btn-block reset" value="Reset" />
            </div>
</div>
<div>
<div class="timer_box mt-5 bg-dark text-white rounded-circle mx-auto text-center">
0
</div>
</div>
</div>
</div>
</div>
</body>
</html>

 

Above code will give us output as follow :

Create Timer in JavaScript
Create Timer in JavaScript

In the above design I have created one input field and blank box with 0 value for the counter.

Now it’s time to code some JavaScript to make this timer in working condition.

Javascript Code :

<script>
      let count = 50;
      let b = '';
      function timer(){
        $('.counter').html(count);
        if(count==0){
          $('.reset').click();
        }else{
          count--;
        }
      }
      $(document).ready(function(){
        $('.start').click(function(){
          count = $('#seconds_time').val();
          $('#seconds_time').attr('disabled','disabled');
          b = setInterval(timer,1000);
        });
        $('.stop').click(function(){
          clearInterval(b);Untitled folder
        });
        $('.reset').click(function(){
          count = 0;
          $('#seconds_time').val('');
          $('.counter').html("0");
          $('#seconds_time').removeAttr('disabled');
          clearInterval(b);
        });
      });
    </script>

In the above code I have make function for every button on click:

Start Button : Start Interval with 1 second of time and disable input field.

Stop Button : stop the interval time.

Reset Button : Clear Interval change variable value to 0 and remove disabled from input field.

Our output will looks like follow image after this code :

Create Timer in JavaScript
Create Timer in JavaScript

Now here is the final code for all this process:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Timer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.timer_box{
width: 100px;
height: 100px;
line-height: 100px;
font-size: 25px;
}
</style>
<script>
let count = 50;
let b = '';
function timer(){
$('.counter').html(count);
if(count==0){
$('.reset').click();
}else{
count--;
}
}
$(document).ready(function(){
$('.start').click(function(){
count = $('#seconds_time').val();
$('#seconds_time').attr('disabled','disabled');
b = setInterval(timer,1000);
});
$('.stop').click(function(){
clearInterval(b);
});
$('.reset').click(function(){
count = 0;
$('#seconds_time').val('');
$('.counter').html("0");
$('#seconds_time').removeAttr('disabled');
clearInterval(b);
});
});
</script>
</head>
<body class="bg-danger">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 mx-auto mt-5 bg-info p-5">
<h1>Javascript Timer</h1>
<hr/>
<label>Enter Seconds</label>
<input type="text" id='seconds_time' class="form-control" />
<div class="row">
<div class="col-md-4">
<input type="button" class="btn btn-success mt-3 btn-block start" value="Start" />
</div>
<div class="col-md-4">
<input type="button" class="btn btn-danger mt-3 btn-block stop" value="Stop" />
</div>
<div class="col-md-4">
<input type="button" class="btn btn-warning mt-3 btn-block reset" value="Reset" />
</div>
</div>

<div>
<div class="timer_box mt-5 bg-dark text-white rounded-circle mx-auto text-center counter">
0
</div>
</div>
</div>
</div>
</div>
</body>
</html>

So that’s all for today, stay tuned for my further updates.

Generate OTP using JavaScript

Hello Everyone, In this tutorial I am going to create javascript program to generate One Time Password also known as OTP.

OTP is userd by all of the web apps and mobile apps these days.

I am preparing program in javascript to create otp you can send it to user’s mobile or on their email is.

Lets start with the designing part as usual I am using Bootstrap for the designing

and Jquery to use Javascript in easy way.

Let’s code in HTML :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OTP Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 bg-success p-5 mx-auto mt-5">
<h1 class="text-center">OTP Generator</h1>
<hr/>
<label>Enter Mobile No</label>
<input type="number" class="form-control number" />
<input type="number" class="form-control mt-3 otp" placeholder="ENTER OTP"/>
<input type="button" class="btn btn-dark mt-3 generate" value="Send OTP"/>
<input type="button" class="btn btn-dark mt-3 check" value="Check"/>
</div>
</div>
</div>
</body>
</html>

After this our design is ready and looks as follow :

Generate OTP using JavaScript
Generate OTP using JavaScript

You can see in the upper design we see

Enter mobile no and enter otp no both options at the same time but we need them one by one.

and same for the buttons we need to show 1 button at a time so

I am going to hide input and button on document ready function.

 $(document).ready(function(){
$('.otp').hide();
$('.check').hide();

});

Now We need to make some javascript code to generate OTP and send it to where ever you want to.

<script>
function randomNumber(min, max) {
return Math.ceil(Math.random() * (max - min) + min);
}
var otp = '';
$(document).ready(function(){
$('.otp').hide();
$('.check').hide();
$('.generate').click(function(){
otp = randomNumber(1000,9999);
var number = $('.number').val();
$('.number').attr('disabled','disabled');
$('.otp').show();
$('.check').show();
$('.generate').hide();
alert(otp);
/// Code to send OTP
});
$('.check').click(function(){
var user_otp = $('.otp').val();
if(otp==user_otp){
alert('Succcess');
}else{
alert('Error');
}
});
});
</script>

In the above code I have made 1 function to generate otp and

leave blank space with the caption Code to send otp which can use API or AJAX to execute code.

After this code our output will looks like following image:

Generate OTP using JavaScript
Generate OTP using JavaScript

Now here is the final code for Generate OTP using JavaScript:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OTP Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function randomNumber(min, max) {
return Math.ceil(Math.random() * (max - min) + min);
}
var otp = '';
$(document).ready(function(){
$('.otp').hide();
$('.check').hide();
$('.generate').click(function(){
otp = randomNumber(1000,9999);
var number = $('.number').val();
$('.number').attr('disabled','disabled');
$('.otp').show();
$('.check').show();
$('.generate').hide();
alert(otp);
/// Code to send OTP
});
$('.check').click(function(){
var user_otp = $('.otp').val();
if(otp==user_otp){
alert('Succcess');
}else{
alert('Error');
}
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 bg-success p-5 mx-auto mt-5">
<h1 class="text-center">OTP Generator</h1>
<hr/>
<label>Enter Mobile No</label>
<input type="number" class="form-control number" />
<input type="number" class="form-control mt-3 otp" placeholder="ENTER OTP"/>
<input type="button" class="btn btn-dark mt-3 generate" value="Send OTP"/>
<input type="button" class="btn btn-dark mt-3 check" value="Check"/>
</div>
</div>
</div>
</body>
</html>

Thanks.

Get Country name from IP

In this tutorial I am going to let you all know that how you can get country name from IP address.

I have user 2 apis for this task, Here are the links for the same:

To get location : http://ip-api.com/json

For Country Flag : https://restcountries.eu/rest/v2/name/{country_name}?fullText=true

So let’s start with the coding part I have used bootstrap and jquery to make this process easier

HTML code :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Get Country</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body class="bg-info">
<div class="container">
<div class="row">
<div class="col-md-6 p-5 bg-dark text-light mx-auto mt-5">
<table class="table">
<tbody>
<tr>
<td>Name</td>
<td id='country_name'></td>
</tr>
<tr>
<td>Flag</td>
<td id='country_flag'></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

After this designing part I need to make some JS code to perform this:

JS Code :

<script>
var country = '';
function abcd(cc){
$.ajax({
url: 'https://restcountries.eu/rest/v2/name/'+cc+'?fullText=true',
success: function(data){
//country = alert(JSON.stringify(data[0].name));
$('#country_name').html(data[0].name);
$('#country_flag').html("<img src='"+data[0].flag+"' style='width:100%;'/>");
}
});
}
$(document).ready(function(){
$.ajax({
url: 'http://ip-api.com/json',
success: function(data){
country = data.country;
abcd(country);
}
});
});
</script>

So In this code I have used methods to ready and callback

When document is on ready stage, hit my first api to detect user’s location.

once I got user location from the api I have call new function as callback to get data of the same country.

Then shows data got from the API on the web page using jQuery .html().

Our output will looks as following image :

Get Country name from IP
Get Country name from IP

Here is the complete code for Get Country name from IP:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Get Country</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var country = '';
function abcd(cc){
$.ajax({
url: 'https://restcountries.eu/rest/v2/name/'+cc+'?fullText=true',
success: function(data){
//country = alert(JSON.stringify(data[0].name));
$('#country_name').html(data[0].name);
$('#country_flag').html("<img src='"+data[0].flag+"' style='width:100%;'/>");
}
});
}
$(document).ready(function(){
$.ajax({
url: 'http://ip-api.com/json',
success: function(data){
country = data.country;
abcd(country);
}
});
});
</script>

</head>
<body class="bg-info">
<div class="container">
<div class="row">
<div class="col-md-6 p-5 bg-dark text-light mx-auto mt-5">
<table class="table">
<tbody>
<tr>
<td>Name</td>
<td id='country_name'></td>
</tr>
<tr>
<td>Flag</td>
<td id='country_flag'></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Hope you guys enjoy this tutorial.

Dinner Decider

Dinner Decider Web Application usign Java Script

In this tutorial I am going to create one dinner decider app, This app will help the user to decide one item from may.

Moreover, This app will help you out to decide what to eat from multiple options.

So Let’s Start with the designing part, I am using Bootstrap and Jquery to make it easy:

Our Designing output will looks as follow :

Dinner Decider
Dinner Decider

Here is the HTML Code for the same:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Document</title>
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto p-5 bg-danger mt-5 text-white">
<h1 class="text-center">Dinner Decider</h1>
<hr/>
<div class="main_output"></div>
<label>Enter Name</label>
<input type="text" class="form-control" id="item_name" />
<input type="button" class="btn btn-success mt-3 add_button" value="Add Item"/>
<input type="button" class="btn btn-success mt-3 float-right decide_button" value="Decide for me"/>
<div class="output"></div>
</div>
</div>
</div>
</body>
</html>

After This HTML Code we need to code in Javascript to make it happen.

In the Javascript I have to do following works :

  • Add Options from which user have to decide
  • Create Button to chose one item from all the options.

Let’s start coding in JS :

<script>
$(document).ready(function(){
var a = [];
$('.add_button').click(function(){
var aa = $('#item_name').val();
a.push(aa);
var items = '<ul class="list-group text-dark mt-4">';
for(b in a){
items += "<li class='list-group-item'>"+a[b]+"</li>";
}
items += "</ul>";
$('.output').html(items);
$('#item_name').val('').focus();
});
$('.decide_button').click(function(){
var rand = a[Math.floor(Math.random() * a.length)];
var out = "You should try : <strong>" + rand + "</strong>";
$('.main_output').html(out);
$('.main_output').addClass('alert alert-success');
}); 
});
</script>

In the above code I have create and empty array with name a.

Then Store values into an array using add_button class

And make a function which called when we click on decide. to make it happen.

Here is the working output for the following code.

Dinner Decider
Dinner Decider

Here is the final Code for Dinner Decider App:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
var a = [];
$('.add_button').click(function(){
var aa = $('#item_name').val();
a.push(aa);
var items = '<ul class="list-group text-dark mt-4">';
for(b in a){
items += "<li class='list-group-item'>"+a[b]+"</li>";
}
items += "</ul>";
$('.output').html(items);
$('#item_name').val('').focus();
});
$('.decide_button').click(function(){
var rand = a[Math.floor(Math.random() * a.length)];
var out = "You should try : <strong>" + rand + "</strong>";
$('.main_output').html(out);
$('.main_output').addClass('alert alert-success');
}); 
});
</script>
<title>Document</title>
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto p-5 bg-danger mt-5 text-white">
<h1 class="text-center">Dinner Decider</h1>
<hr/>
<div class="main_output"></div>
<label>Enter Name</label>
<input type="text" class="form-control" id="item_name" />
<input type="button" class="btn btn-success mt-3 add_button" value="Add Item"/>
<input type="button" class="btn btn-success mt-3 float-right decide_button" value="Decide for me"/>
<div class="output"></div>
</div>
</div>
</div>
</body>
</html>

So that’s all for today hope you guys enjoy my tutorial stay tuned for my further updates.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.