Wednesday 14 November 2012

Creating a Clock App for Windows 8 with HTML/JS/CSS

Ok!, today we are going to create a basic windows 8 clock app, the idea is to use nothing but web technologies to get an app up and running

Windows 8 apps are perfect for dashboards, reporting and apps which are all inclusive, so I thought of making a basic one that shows a clock, its simple and shows the very basics of app dev

So lets get started!

Step 1: Open VS
Step 2: Click create, new project, Other languages, JavaScript, Blank App
Step 3: Enter your suitable project name



 Step 4: This now creates the standard project layout


Step 5: Lets change the metadata of the project so its more meaningful, the display name and the description


 Step 6: Now lets change the icon so it looks a bit snazzy, open the logo.png file and do whatever you like to it


Lets see how that looks!, press F5 then windows key, you can see the app as the last tile, ooooh shiny!


Step 7: In the default.html create a new div to hold the clock, give it a class, we want to do the same with the date so we can display some more information


Step 8: Now the magic, the JavaScript, open the JS file and add the following code, And viola, here we go!, press F5


 As you can see it’s a bit unstyled so lets change that


Step 10: Open the default.css, you can see the file is prefilled with the various states allowed so you just need to add your CSS within this, make sure to apply the styles for the other view states of the app


Now press F5!, its just like magic, here is your clock all, simple and beautiful


Now get that bad boy in TFS and published and your ready to go!