Face value

  • Revision slug: Web/Apps/Reference_apps/Face_value
  • Revision title: Face value
  • Revision id: 474785
  • Created:
  • Creator: chrisdavidmills
  • Is current revision? No
  • Comment

Revision Content

Face Value is a currency conversion app that does things differently: instead of converting arbitrary amounts it shows you the actual denominations in the country you're visiting. It lets you think in your home currency even with a foreign currency in your pocket. Read the full developer walkthrough.

Difficulty: Medium

Code Breakdown:

  • 2% HTML
  • 16% CSS
  • 82% JavaScript

Web API Usage

localStorage
Remembers user preferences and saves exchange rates for offline use.
appcache
Works great offline, only requires online connection when updated exchange rates are desired.

Folder Structure

  - test/ (casperjs integration tests)
  - www/ (client-side code/styles)
  - www/index.html (base HTML file)
  - www/js/templates/ (EJS/HTML templates)

The CordovaLib, assets, cordova, face-value.xcodeproj, and face-value folders contain Cordova files used to create a packaged iOS web app that can be submitted to the iOS App Store.

Third-party Libraries

backbone.js
By using backbone's data bindings, Face Value ensures that changes to the backend (such as exchange rate updates) are automatically reflected on the frontend.
zepto.js
The lightweight jQuery-like library simplifies common tasks such as DOM manipulation.

Revision Source

<div class="summary">
  <img alt="" src="https://mdn.mozillademos.org/files/6229/face-value1.jpg" style="width: 179px; height: 269px; float: left; padding-right: 30px; padding-bottom: 30px;" />
  <p>Face Value is a currency conversion app that does things differently: instead of converting arbitrary amounts it shows you the actual denominations in the country you're visiting. It lets you think in your home currency even with a foreign currency in your pocket. <a href="http://facevalueapp.com/behind-the-scenes">Read the full developer walkthrough</a>.</p>
  <p>Difficulty: Medium</p>
  <p>Code Breakdown:</p>
  <ul style="position: relative; left: 30px">
    <li>2% HTML</li>
    <li>16% CSS</li>
    <li>82% JavaScript</li>
  </ul>
  <div id="view-code">
    <a class="app-source button" href="https://github.com/tofumatt/face-value/">View Source</a> <a class="app-source button" href="https://github.com/tofumatt/face-value/archive/master.zip">Download</a></div>
</div>
<section id="sect1">
  <h2 id="Web_API_Usage">Web API Usage</h2>
  <dl>
    <dt>
      <a href="//developer.mozilla.org/docs/DOM/Storage#localStorage">localStorage</a></dt>
    <dd>
      Remembers user preferences and saves exchange rates for offline use.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/HTML/Using_the_application_cache">appcache</a></dt>
    <dd>
      Works great offline, only requires online connection when updated exchange rates are desired.</dd>
  </dl>
</section>
<section id="sect2">
  <h2 id="Folder_Structure">Folder Structure</h2>
  <pre>
  - <a href="https://github.com/tofumatt/face-value/tree/master/test">test/</a> (<a href="http://casperjs.org/">casperjs</a> integration tests)
  - <a href="https://github.com/tofumatt/face-value/tree/master/www">www/</a> (client-side code/styles)
  - <a href="https://github.com/tofumatt/face-value/tree/master/www/index.html">www/index.html</a> (base HTML file)
  - <a href="https://github.com/tofumatt/face-value/tree/master/www/js/templates">www/js/templates/</a> (EJS/HTML templates)</pre>
  <p>The <code>CordovaLib</code>, <code>assets</code>, <code>cordova</code>, <code>face-value.xcodeproj</code>, and <code>face-value</code> folders contain Cordova files used to create a packaged iOS web app that can be submitted to the iOS App Store.</p>
</section>
<section>
  <h2>Third-party Libraries</h2>
  <dl>
    <dt>
      <a href="http://backbonejs.org/" rel="external" target="_blank">backbone.js</a></dt>
    <dd>
      By using backbone's data bindings, Face Value ensures that changes to the backend (such as exchange rate updates) are automatically reflected on the frontend.</dd>
    <dt>
      <a href="http://zeptojs.com/" rel="external" target="_blank">zepto.js</a></dt>
    <dd>
      The lightweight jQuery-like library simplifies common tasks such as DOM manipulation.</dd>
  </dl>
  <ul>
  </ul>
</section>
Revert to this revision