JavaScript · Intermediate level

Intermediate level · Module 6: Intermediate JavaScript Project · Lesson 2 of 3

Implementing the Features

Implement rates, conversions, budget entries, persistence and offline behaviour module by module.

In this lesson you will

  • Implement each module against its planned interface
  • Integrate the modules through the state and render cycle

Key concepts

module implementationintegrationcaching strategycurrency conversion

The lesson

Build and check calc.js first — conversions between SSP and USD and totals — because it has no dependencies. Then the store with persistence, then the API module with caching, and finally the UI.

Keep amounts in a single currency and unit internally, convert only for display and show which rate and date were used for each conversion.

Integrate step by step: after connecting each module, run the app, check the console and try the offline mode.

Step by step

  1. Implement and check calc.js.
  2. Implement the store with localStorage.
  3. Implement the API client with timeout and cache.
  4. Implement the UI and connect everything in main.js.

Practice activity

Implement all features of the budget app.

Expected result: All features work online and offline, with no console errors.

Check your understanding

  1. Why implement calc.js first?

    Show answer

    It has no dependencies and is easy to check on its own.

  2. Why show the rate date next to conversions?

    Show answer

    So users know how current the conversion is, especially offline.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.