It is a lightweight, web app demonstration of the clock app from iOS. The clock app is developed with the Ember.js MVC framework and coded using HTML5, CSS3, JavaScript, and jQuery. Ember.js uses the Handlebars template language which extends the Mustache template syntax. It uses plain HTML expressions and describes the user interface using good semantics. Each template is also backed by a model object which updates the template automatically. There is a router which monitors the browser window and automatically keeps track of the application state. A model which is a JavaScript object is used to store persistent state. The controllers decorate models with display logic. Data is stored and retrieved by using the REST API.
Utilizing the power of the Ember.js framework, the clock app is developed using only a single page. It functions as both a native-style mobile and desktop web application. Its components are modularized to ensure its maintainability, reusability, and extendability. The clock app contains a World Clock, Timer, and Stopwatch function. Each of these functions appear as its own page to the user. The state of each clock function can operate individually, so all 3 "pages" may run at the same time. This implementation allows you to move between each function without terminating its previously set states.
The World Clock will load a list of cities along with its GMT time offsets using a JSON call. The app will update each fixture item in real time, calculate the local offset in the timezone relative to the system time, and display the correct time in the application.
The World Clock list uses the DS.LSAdapter which uses local storage via the browser to save the list of clocks persistently.
The World Clock and Timer refreshes its display time every second using Ember's built in Ember.run.later() function. The Stopwatch refreshes every 1/100 of a second. World Clock will continue to run even if the user switches to the Timer or Stopwatch function.
The query will attempt to auto-complete as the user is typing.
The search results are alphabetized and scrollable.
Target clock is added to the main clock list.
Edit opens up the function to delete clocks. Click the icon to remove a clock.
Clock has been removed.
Clicking done exits the edit mode.
The Timer can be running, cancelled, paused, and resumed. Hours and minutes can be used to set the total countdown time. The timer will continue to operate even if the user switches to the World Clock or Stopwatch function.
The Stopwatch can be running, stopped, resumed, lapped, and reset. Lap will record the elapsed time since the last lap was recorded. Stopwatch will continue to operate even if the user swithces to the World Clock or Timer function.
- run “ember server” to start ember server service
- goto http://localhost:4200/ to view app
- add "/node_modules" and "/vendor/*" to .gitignore to stop git from updating these static dependencies
This README outlines the details of collaborating on this Ember application.
git clonethis repositorynpm installbower install
ember server- Visit your app at http://localhost:4200.
ember testember test --server
ember build
- Ember JS: http://emberjs.com/
- Ember-CLI: http://www.ember-cli.com/
- w3Schools: http://www.w3schools.com/
This software was developed by Hinsen Chan at Santa Clara University in Summer 2014.