Cloud Phone Currency Converter

A simple currency converter for Cloud Phone, a remote web browser and app store for 4G feture phones.

🔰 Available at cloudmosa.github.io/cloudphone-currency/

📄 Learn more at Cloud Phone for Developers

This app is written in Vanilla JS and does not use a frontend framework like React or Svelte. There are no runtime dependencies. Since Cloud Phone uses a modern Chromium engine, there is no transpilation to support older browsers.

Features

This app was designed to be as simple as possible to use, while illustrating what you can build on Cloud Phone. Several important features make this possible:

• Converts currencies live as you type
• Default currency prediction
• Remembers and stores currency selection in localStorage
• Rounds to commonly available denominations
• Displays currency symbols, codes, and country flags

Exchange Rate Data

Currency conversion rates are sourced from fawazahmed0/currency-api, hosted on CDNs including JSDelivr and Cloudflare Pages. The latest exchange rates are used with USD as a base currency.

Other Data

The following data set was generated by ChatGPT:

• src/data/currencies.json - a list of currency information including codes, names, symbols, and denominations.

🔧 Components

This app is designed to be as simple as possible, and to work on both QVGA (240x320) and QQVGA (160x128) screens by users predominantly in South Asia. It includes several components:

• src/components/header.ts - a header displaying a title
• src/components/softkeys.ts - a navigation bar fixed at the bottom of the screen with three actions: left, right, and center
• src/components/currencyInput.ts - a partially AI-generated Web Component to simplify typing currencies on T9 Cloud Phone devices
• src/components/currencyList.ts - a list for selecting currencies

Cloud Phone Details

This app mainly uses web standards and works outside of Cloud Phone, but requires one feature specific to Cloud Phone.

x-puffin-entersfullscreen

The x-puffin-entersfullscreen="off" attribute is set in src/currencyInput.ts. By default, pressing Enter on an <input> element in Cloud Phone will open a native UI for text entry. The native UI is helpful for T9 predictive text and autocorrect, but its unnecessary for basic numeric input. Instead, the app directly intercepts the keydown event, moves the cursor using arrow keys, and renders the number as a formatted currency.

Commands

This app uses rsbuild to compile and bundle, and terser to minify, the application into a single JavaScript file.

Watch, build, and serve on a local server

npm run-script dev

Build

npm run-script build

📓 Prerequisites

• Node & npm
• Git
• A GitHub account

🚀 Deploy to GitHub Pages

GitHub Pages provides free hosting for public open-source repositories. This project uses the official deploy-pages GitHub Action to build and deploy static HTML, CSS, and JS.

😎 Developer Program

To publish your app on Cloud Phone, join the Cloud Phone Developer Program.

🆓 License

Licensed under the Apache 2.0 license