Created
May 11, 2022 21:01
-
-
Save nfreear/c2871520766a44122c553206e50e7cdc to your computer and use it in GitHub Desktop.
FX Rate Live-Region Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> <title> Exchange rate live-region </title> | |
| <style> | |
| body { font: 1rem sans-serif; margin: 1rem auto; max-width: 36rem; } | |
| label { display: inline-block; width: 10rem; } | |
| input { font-size: inherit; padding: .2rem 1rem; } | |
| :invalid { background-color: pink; border-color: red; } | |
| /* For screen readers. | |
| */ | |
| .sr-only, | |
| .visually-hidden { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| height: auto; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| white-space: nowrap; | |
| } | |
| </style> | |
| <h1> Exchange rate live-region demo </h1> | |
| <form> | |
| <p> | |
| <label for="from-value">From amount <i>HKD |</i> </label> | |
| <input id="from-value" value="394.08" pattern="^[0-9]*\.[0-9]*" /> | |
| </p> | |
| <p> | |
| <label for="to-value">To amount <i>USD |</i> </label> | |
| <input id="to-value" value="50.00" pattern="^\d*\.\d*" /> | |
| </p> | |
| <div id="to-update" role="status" aria-live="polite" class="visually-hidden"> | |
| </div> | |
| <p> | |
| <label for="fx-rate">Exchange rate</label> | |
| <output id="fx-rate"> USD 1.00 ⇄ HKD 7.8816 </output> | |
| </p> | |
| </form> | |
| <script type="module"> | |
| const RATE = 7.8816; | |
| const LIVE_REGION = document.querySelector('#to-update'); | |
| const TO_FIELD = document.querySelector('#to-value'); | |
| const FROM_FIELD = document.querySelector('#from-value'); | |
| TO_FIELD.addEventListener('change', ev => { | |
| const toValue = parseFloat(ev.target.value); | |
| const fromValue = parseFloat(toValue) * RATE; | |
| FROM_FIELD.value = fromValue; | |
| LIVE_REGION.textContent = `The exchange rate is USD 1 equals HKD ${RATE}. | |
| You will get HKD ${fromValue}. The indicative rate is … `; | |
| console.debug('Change:', toValue, fromValue, ev); | |
| console.debug(`Live region: « ${LIVE_REGION.textContent} »`); | |
| }); | |
| </script> | |
| <pre> | |
| NDF, 11-May-2022. | |
| <!--- | |
| . . . . . . . . From amount: . . . . . To amount: | |
| Amount: HKD | 394.08 . . . . . USD | 50.00 | | |
| Exchange rate: USD 1.00 ⇄ HKD 7.8816 | | |
| . . . . . . . . The indicative rate is for reference only. The actual exchange rate… | |
| --> | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment