Dynamic Length Converter with JavaScript
Dynamic Length Converter with JavaScript
Download CSS Code Text File - Click here
Download CSS File - Click here
Download HTML Code Text File - Click here
Download HTML File- Click here
Download JavaScript Code Text File - Click here
Download JavaScript File- Click here
HTML Code (Save As "FileName.html")
<HTML>
<HEAD><TITLE>Functions</TITLE>
<link rel="stylesheet" type="text/css" href="style2.css">
</HEAD>
<body>
<div id="container">
<h1 class="container-title">Lenght Converter</h1>
<select id="inputType">
<option value="meter">Meter</option>
<option value="kilometer">Kilometer</option>
<option value="Centimeter">Centimeter</option>
</select>
<select id="resultType">
<option value="meter">Meter</option>
<option value="kilometer">Kilometer</option>
<option value="Centimeter">Centimeter</option>
</select><br>
<input type="text" placeholder="Input" id="input">
<span>=</span>
<input type="text" placeholder="Result" id="result">
</div>
<script src="script.js">
</script>
</BODY>
</HTML>
CSS Code (Save As "style.css")
body{
margin: 0px;
padding: 0px;
}
#container{
width: 70%px;
margin:10px auto 0 auto;
padding:10px;
text-align:center;
position:absolute;
background-color:blue;
}
.container-title{
text-align: center;
margin: 10px 0px auto 0;
font-size: 40px;
color:white;
}
input{
width:170px;
height: 25px;
text-align: center;
border: 2px solid yellow;
margin:10px;
font-size:20px;
border-radius:5px;
}
#input{
margin: 10px;
}
#inputType,#resultType{
width: 175px;
height:35px;
margin: 10px;
color: blue;
border: 2px solid black;
font-size:15px;
font-weight:bold;
background-color:yellow;
border-radius:5px;
}
span{
color:white;
font-size:15px;
}
var input = document.getElementById('input');
var result = document.getElementById('result');
var inputType = document.getElementById('inputType');
var resultType = document.getElementById('resultType');
var option_from,option_to;
input.addEventListener("keyup",myResult);
inputType.addEventListener("change",myResult);
resultType.addEventListener("change",myResult);
option_from = inputType.value;
option_to =
resultType.value;
// option_from and option_to
option_to
= resultType.value;
//this
is meter to kilometer formula
result.value
= Number(input.value) * 0.001;
}else
if(option_from === "meter" &&
option_to==="Centimeter"){
result.value
= Number(input.value) * 100;
//this
is meter to meter formula
result.value
= input.value
}
//this
is kilometer to meter formula
result.value
= Number(input.value) * 1000;
}else
if(option_from === "kilometer" &&
option_to==="Centimeter"){
//this
is kilometer to Centimeter formula
result.value
= Number(input.value) * 100000;
}else
if(option_from === "kilometer" &&
option_to==="kilometer"){
//this
is kilometer to kilometer formula
result.value
= input.value
}
//this
is Centimeter to kilometer formula
result.value
= Number(input.value) * 0.00001;
}else
if(option_from === "Centimeter" &&
option_to==="meter"){
//this
is Centimeter to meter formula
result.value
= Number(input.value) * 0.01;
}else
if(option_from === "Centimeter" &&
option_to==="Centimeter"){
//this
is Centimeter to Centimeter formula
result.value
= input.value
}
}
*****************************************
Download CSS Code Text File - Click here
Download CSS File - Click here
Download HTML Code Text File - Click here
Download HTML File- Click here
Download JavaScript Code Text File - Click here
Download JavaScript File- Click here
Post a Comment