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>