Pages

Saturday, November 21, 2020

how to create Simple Javascript App?

LBToKGConverterApp-Javascript:
In this lesson you will learn how to create LB TO KG converter with validation. you will learn HTML, CSS, Bootstrap and in Javascript you will learn function, event if else and many more. Please click on video to watch. You can modify css and Bootstrap. Design may not be ideal here because purpose is to show topics .
                                  video


                            Soruce Code:

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>LB To KG Calculator</title>
    <style>
        #container{
            height: 350px;
            width: 200px;
            background-color:gray;
            border: 2px solid black;
            text-align: center;
            margin-top: 100px;;
            margin-left: 225px;
        
            
        }
        #error{
            color: red;

        }
    </style>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" rel="stylesheet"></link>
</head>
<body>
    <div id="container">
    <h1>LB to KG Calculator</h1>
    <h3><span id="error"></span></h3>
    LB:<input id="lb" type="text" />
    KG:<input id="kg" type="text" /><br /><br />
    <button class="btn btn-warning" id="submit" type="button">Submit</button>
    </div>
    <script>
         lb =document.getElementById("lb");
         kg =document.getElementById("kg");
         error =document.getElementById("error");
         submit =document.getElementById("submit");
         submit.addEventListener("click", function(){ 
            if(lb.value ==""){
                error.innerText ="Please Enter Valid Number"

            } else{
                error.innerText="";
                kg.value=lb.value/2.20462262;
            

            }
           
        })

    </script>

    
</body>
</html>
LB To KG Calculator

LB to KG Calculator

LB: KG: