mozilla

Revision 474795 of Face Value

  • Revision slug: Web/Apps/Reference_apps/Face_value
  • Revision title: Face value
  • Revision id: 474795
  • 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
Chrono does not require a network connection to run.

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="/en-US/docs/HTML/Using_the_application_cache">appcache</a></dt>
  <dd>
    Chrono does not require a network connection to run.</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 id="sect3">
  <h2 id="Third-party_Libraries">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>
  <p>&nbsp;</p>
  <ul>
  </ul>
</section>
Revert to this revision