Introduction
Here we present a simple navigation application using JavaScript and design a rating bar in the application. Rating functions has become very popular these days. In this application we select the JavaScript navigation application in Metro Style Application. we have to rating when we have to use this application.
Here, I will present an example to show a navigation application using JavaScript. So we have to follow these steps.
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
![fir.gif]()
Step 2 : We have to open homepage.html and write this code which is shown as given below.
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</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/default.css" />
<link rel="stylesheet" href="/css/homePage.css" />
<script type="ms-deferred/javascript"src="/js/homePage.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homePage">
<header role="banner"aria-label="Header content">
<button disabled class="win-backbutton"aria
label="Back"></button>
<div class="titleArea">
<h1 class="pageTitle win-title">Welcome to NavigationApplication!</h1>
</div>
</header>
<section role="main"aria-label="Main content">
<button style="background-color: #ffd800">Click Here</button>
<div data-win-control="WinJS.UI.Rating" data-win-options={averageRating:5,maxRating:10}"></div>
<p>Content goes here.</p>
</section>
</div>
</body>
</html> Step 3 : The default.html page look like as below.
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NavigationApplication</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>
<script src="/winjs/js/binding.js"></script>
<script src="/winjs/js/controls.js"></script>
<script src="/winjs/js/animations.js"></script>
<script src="/winjs/js/uicollections.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- NavigationApplication references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body data-homePage="/html/homePage.html">
<div id="contentHost"></div>
<div id="appbar" data-win-control="WinJS.UI.AppBar" arialabel="Command Bar" data-win-options="{position:'bottom', transient:true, autoHide:0, lightDismiss:false}">
<div class="win-left">
<button id="home" class="win-command">
<span class="win-commandicon win-large"></span><span class="win-label">Home</span>
</button>
</div>
</div>
</body>
</html>
Step 4 : After running this code we get the following output.
![output1.gif]()
Here, we give a three rating.
![output2.gif]()
This is the complete rating view.![output3.gif]()