Introduction
In the Windows 8 Metro Style Application we have to make there are many applications, the simple clock is an application that displays the current time and date from the system. Now we want to display the time in hours, minutes and seconds format. We will be using a time converter and navigation by using the HTML 5 and JavaScript. Here, we have to initialize there are many functions. So we have to follow these steps.
These steps are given below.
Step 1 : First of all we have to create a new Metro Style Application; let us see the description with images of how to create it.
- Open Visual Studio 2011
- File>New>Project
- Choose Template>JavaScript> Blank Application
- Rename this Application
![openPage.gif]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with; .js and .html.
![solutionexplorer.gif]()
Step 3 : In this application the saved clock HTML file code looks like as below.
Code : savedclock.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Saved Clock</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="ms-deferred/javascript" src="/winjs/js/base.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/ui.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/binding.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/controls.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/animations.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/uicollections.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/wwaapp.js"></script>
<link rel="stylesheet" href="/css/savedClocks.css" />
<script type="ms-deferred/javascript" src="/js/savedClocks.js"></script>
</head>
<body>
<div class="savedClocks fragment">
<header role="banner" aria-label="Header content">
<button disabled class="win-backbutton" aria-label="Back"></button>
<div class="titleArea">
<h1 class="pageTitle win-title">My Clock</h1>
</div>
</header>
<section role="main" aria-label="Main content">
<p>Content goes here.</p>
</section>
</div>
</body>
</html>
Step 4 : Putting it all together, the js file will have the code as shown below.
Code : Default.js
(function () {
'use strict';
WinJS.Application.addEventListener('fragmentappended', function handler(e) {
if (e.location.indexOf('savedClocks.html') !== -1) { fragmentLoad(e.fragment, e.state); }
});
function fragmentLoad(elements, options) {
WinJS.UI.processAll(elements)
.then(function () {
// TODO: Initialize the fragment here.
});
}
WinJS.Namespace.define('savedClocks', {
fragmentLoad: fragmentLoad,
});
})();
Step 5 : Now let's run the application. This is what we'll see.
![clock1.jpg]()
After clicking on this page the given output is seen below.
![clockoutput1.gif]()