Building the Unit Converter in Windows Store App

Introduction

In this section we will show how to build a simple unit converter showing how to convert units in a Windows 8 Metro Style application. When we enter the units in the kilometers field and then click on the convert button then results in showing the miles in the miles field. So, It converts kilometers to miles. We have to implement it in a JavaScript Metro Style application.

Here we show a simple example for converting kilometers to miles.

The steps are as follows.

Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.

Open Visual Studio 2011
File>New>Project
Choose Template>JavaScript> Blank Application
Rename this Application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; .js and .html files. In the images folder add any image in this application.

Step 3 : Here we have to use the convert function.

Code :

Step 4 : We have to make some changes in the default.html file and the complete code looks as below.

Code : defaut.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Converter</title>

<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>

<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
<script>
function Convert() {
var Kilometers = document.getElementById("Kilometers");
var Miles = document.getElementById("Miles");
if (Kilometers.value == "") {
if (Miles.value != "") {
Kilometers.value = Miles.value * 1.609344;
}
}
else {
Miles.value = Kilometers.value / 1.609344;
}
}
</script>
</head>
<body>
<div style= "width:1350px; height:750px; background-color:#ff6a00; ">
<div id ="header" style="position:absolute; left:100px; top: 50px;font-size:80pt">Unit Converter</div>
<img style="position:absolute;left: 15px;top:30px;width:80px;height:82px;"
alt="logo" src="/images/coverter.jpg" width ="20" height="22" />
<span style ="position:absolute; left:16px;top:200px;font-size:40pt ">kilometers</span>
<input id = "Kilometers" style ="position:absolute;left:19px;top:246px;font-size:40pt" type="number" />
<span style ="position:absolute; left:500px;top:185px; font-size:44pt ">Miles</span>
<input id = "Miles" style ="position:absolute;left:515px;top:239px;font-size:40pt" type="number" />
<button style ="position:absolute; left:1000px; top:189px;width:249px;height:129px;background-color:#f00; font-size:40pt;color:#ffd800;"
onclick="Convert(); ">Convert</button>
</div>
</body>
</html>

Step 5 : In the js file we don't have any changes in this application. So, the code (shown below) will be like:

Code : default.js file.

Step 6 : After running this code we get the output as shown below.

When we have entered a value in the kilometer field and converted it then we will get the value in the miles field.