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
![homepage.gif]()
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.
![solutionexplorer.gif]()
Step 3 : Here we have to use the convert function.
Code :
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;
}
}
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>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- WinWebApp17 references -->
<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.
(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: startup code here
}
}
WinJS.Application.start();
})();
Step 6 : After running this code we get the output as shown below.
![output1.gif]()
When we have entered a value in the kilometer field and converted it then we will get the value in the miles field.
![output2.gif]()