Wealth Health java JavaScript Knowledge tutorial for beginners: Easy Javascript App for beginner

JavaScript App for Beginner: In this tutorial you will learn HTML, CSS, Bootstrap, JavaScript function, event, DOM, Validation , if else statement and many more by creating app . It is learn with fun activity . you will learn how to create Feet to Inch conversion. so make it and show to world. Below you will find video and source code for App.

lets understand one by one. First lets create HTML Document

h1tag contains title, now add two input tag and set type as text . now we will add one button . That's what we need for html . now we since we will add CSS in future so lets wrap all html in div and give id as container. we will add id to input tag also . For error message lets give h3 tag and add span tag for future error message. for coloring button we will give id to button tag also.

<div id ="container">

        <h1>Feet to Inch Convertor App</h1>

        Feet:<input id ="fee"type ="text">

        <h3><span id = "err"></span></h3>

        Inch:<input id ="inc"type ="text"><br><br>

        <button id="sub"class="btn btn-dark">Convert</button>

    </div>

now we can create style tag after title in html.
we can do this multiple way . best way is do it via creating separate file and link it.
for Simplicity purpose we have created style tag in same file . Since we gave id
for container so we will use hashtag for container and we will set height , width color
etc. Now our CSS is also ready .

CSS

  <style>

        #container{

            height:400px ;

            width:200px ;

            background-color: coral;

            text-align: center;

            color:white;

            border:2px solid brown;

            margin-top: 100px;

            margin-left: 100px;

}

        #err{

            color:red;

}

    </style>

Now time to introduce JavaScript. 

feet=document.getElementById("fee");

Now lets locate out element. document.getElement will find our element. since we use 

id as fee in our HTML . Now we will store in feet variable . 

lets do it for another input tag and submit button . 

inch=document.getElementById("inc");

   inch=document.getElementById("inc");

        submit=document.getElementById("sub");

        error=document.getElementById("err");

Since we have added our submit butoon in variable we can add even listener on it. so we
create function when someone click on button our function will run. we will add if else
statement . if value of feet is empty, we will through error message and we have provide
error message text as "Invalid, can not empty!". If user enter any content in input field
it will run else block of code. we will clear error message first. and will provide
formula which will convert value accurately.

For more information we have added video tutorial step by step so you can watch it also.
in this video tutorial you will learn about HTML, CSS, Bootstrap. JavaScript is very important
we have covered datatype variable how to use it, Function, if else statement, Document Object Model (DOM)

by adding and fetching id and store in variable. now you can create many app just need to change formula accordingly .

submit.addEventListener("click", function(){
            if(feet.value===""){
                error.textContent= "Invalid, can not empty!"

            }
            else{
                error.textContent ="";
                inch.value=feet.value*12;

            }
        
        })

Video

Source-code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FeettoInch Convertor</title>
    <style>
        #container{
            height:400px ;
            width:200px ;
            background-color: coral;
            text-align: center;
            color:white;
            border:2px solid brown;
            margin-top: 100px;
            margin-left: 100px;
        }
        #err{
            color:red;

        }

    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/
css/bootstrap.min.css" 
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
crossorigin="anonymous">
</head>
<body>
    <div id ="container">
        <h1>Feet to Inch Convertor App</h1>
        Feet:<input id ="fee"type ="text">
        <h3><span id = "err"></span></h3>
        Inch:<input id ="inc"type ="text"><br><br>
        <button id="sub"class="btn btn-dark">Convert</button>
    </div>
   
    <script>
        feet=document.getElementById("fee");
        inch=document.getElementById("inc");
        submit=document.getElementById("sub");
        error=document.getElementById("err");
        submit.addEventListener("click", function(){
            if(feet.value===""){
                error.textContent= "Invalid, can not empty!"

            }
            else{
                error.textContent ="";
                inch.value=feet.value*12;

            }
        
        })

    </script>
    
</body>
</html>