Best way to create length convertor using JavaScript.

In this blog I will show you how to create length convertor using JavaScript.

Video tutorial of Centimeter to Inches Convert using JavaScript

This tutorial video can help you to create Centimeter to Inches Convert using JavaScript.

Centimeter to Inches Convert using JavaScript[Source Codes]

This source code can help you to create Centimeter to Inches Convert using JavaScript.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="cmin_box"> 
    <div class="cmin_box_row">
    	<div class="cm_cont">
    		<label>Centimeters</label>
    		<input id="centimeters_inches" type="text" name="">
    	</div>
    	<strong>
    	   =
    	</strong>
    	<div class="in_cont">
    		<label>Inches</label>
    		<input id="inches_centimeters" type="text" name="">
    	</div>
    </div>
    <button id="reverse">Reverse</button>
    <button id="convert" onClick="cmin()">Convert</button>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: linear-gradient(to right bottom, #1b9dc2, #031f6a);
	color: #000;
	
	display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.cmin_box{
	width: 600px;
	padding: 50px;
	background:#1b9dc2;
	border-radius: 15px;
	color: #fff;
	text-align: center;
}
.cmin_box_row{
	display: flex;
	align-items: flex-end;
	margin-bottom: 15px;
	text-align: left;
}
.cmin_box_row div{
	width: 50%
}
.cmin_box_row label{
	display: block;
	font-size: 22px;
}
.cmin_box_row input{
	width: 100%;
	padding: 8px;
	border-radius: 5px;
	border: 0
}
.cmin_box_row strong{
	padding:8px 10px;
}
.cmin_box button{
	padding: 8px 15px;
	border:0;
	cursor: pointer;
	background:#03158a;
	color: #fff;
	border-radius: 5px;
}

JavaScript Code

Copy

count = 0;
$('#reverse').click(function(event) {
  cm_contHTML = $('.cm_cont').html();
  in_contHTML = $('.in_cont').html();
  //alert(cm_contHTML);
 // alert(varin_contHTML);
  $('.cm_cont').html(in_contHTML);
  $('.in_cont').html(cm_contHTML);
  if(count == 0){
    $("#convert").attr({'onClick':'incm()'});
    count = 1
  }else{
    $("#convert").attr({'onClick':'cmin()'});
    count = 0
  }
});

function cmin(){
    //alert()
  var centimeters_inches =  $("#centimeters_inches").val()
  $("#inches_centimeters").val(centimeters_inches/2.54)
}
function incm(){
  var inches_centimeters =  $("#inches_centimeters").val()
  $("#centimeters_inches").val(inches_centimeters * 2.54)
}