How to Create an Interactive Website using JavaScript in 10 minutes

Overview :

Javascript Changed the web application /website fate after his entry. Before the Java Script , the website can be designed using HTML and introduce computation and make the website interactive ,we have to realy on perl. But perl is most advanced language can be understood by few people. API support in perl are limited .

With all those disadvantages ,website was used to survive in the world. As soon as the live script is introduced the complex web application started to emerge . Slowly the java script takes different views in JQuery,React ,Angular and Vue etc.

In this article ,I mainly concentrate on how to create or make an website interactive means, the website should able to get the input from the user ,process those values then it has to display some output information. This is only possible only when the web page is having the power to perform computation , it is possible only through the scripting languages .

From the user or the developer protective the JavaScript learning is very simple and we have so many advanced IDE (Integrated Development Environment) to perform the javascript coding , so these make the life easier and efficient debugging of the programme .

In my previous post I explained the javascript usage and creation of a simple javascript. If u have not gone through that ,please click the link above specified.

Once we learn to create simple javascript , the next part is how to include that into the html of the web page. This is achieved by using the script tag <script>.

The following step by step procedure illustrate the creation of interactive website:


In this example I am creating a simple calculator , in this program you can provide the input through keyboard and result is displayed in the webpage only . We used the HTML and Javascript to create this program.

The above code defines all 4 different functions definition : In each I used different inbuilt functions ,their usage is given below:

parseFloat() : parse the floating point value,

isNaN() : check whether it is not a number,

document.getElementById(“val1”) : It is one of the most commonly used function ,as the name itself specify , get the value of the element specified by ID of input type.

value1 value2

Now we come for the final part of the program, As I told earlier In this program I am crating four buttons ,each for each operation , as soon as user click that button , the particular action will be trigged using the function :onclick=”javascript:sub()” ,in this example snippet ,on clicking the sub button ,the above code will be executed ,which calls the sub function ,which is defined in the above part of the document.

Please copy this program in your notepad , save it as .html , execute this html in the browser , you will ge the output look like this :


Front page

The following diagram illustrates reading the values to value1 and value2


Above two snapshots illustrates the addition and division operation .

In this way by using Javascript ,we created interactive web page to perform the arithmetic operation.