diff --git a/README.md b/README.md index 0ae655f..22b5f60 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Overview -Takes functionality from our [public website calculator](https://www.rewiringamerica.org/app/ira-calculator) and packages it up in a custom web component built using `lit`. Lit's `Task` library takes care of watching the form parameters for changes +Takes functionality from our [public website calculator](https://www.rewiringamerica.org/app/ira-calculator) and packages it up in a custom web component built using `lit`. Lit’s `Task` library takes care of watching the form parameters for changes and fetching data from our API. **Note:** API keys are required, sign up on our [API homepage](https://www.rewiringamerica.org/api). @@ -26,7 +26,7 @@ and fetching data from our API. For better or worse, using BEM to keep CSS manageable. This may be overkill since LitElement encapsulates the styles for us already. -The CSS font-face does not seem to apply if fonts are loaded by the Shadow DOM's styles, so a separate font stylesheet is provided for these. +The CSS font-face does not seem to apply if fonts are loaded by the Shadow DOM’s styles, so a separate font stylesheet is provided for these. # Hosting @@ -41,8 +41,8 @@ Features and content: - [ ] Switch order of incentives depending on whether credits/rebates are more useful. - [x] Add currency formatting to the income input element. Using [autonumeric](http://autonumeric.org), which is large. - [ ] Consider [Inputmask](https://robinherbots.github.io/Inputmask/#/documentation/numeric) in future. -- [x] Use a better tooltip component to ensure tooltips are readable at mobile breakpoints. Trying Shoelace's [tooltip](https://shoelace.style/components/tooltip). -- [ ] Think about how the 'back to calculator' links should work on RA's detail pages ([example](https://www.rewiringamerica.org/app/ira-calculator/information/electrical-panel)) +- [x] Use a better tooltip component to ensure tooltips are readable at mobile breakpoints. Trying Shoelace’s [tooltip](https://shoelace.style/components/tooltip). +- [ ] Think about how the 'back to calculator' links should work on RA’s detail pages ([example](https://www.rewiringamerica.org/app/ira-calculator/information/electrical-panel)) - [ ] Add analytics support (Amplitude events?) - [ ] Add support for Spanish translations. - [ ] Send javascript events for calculate, results, project details clicks. @@ -50,7 +50,7 @@ Features and content: Robustness: - [x] Take a copy of fonts and serve them from this domain. -- [ ] Port to API v1's calculator endpoint. +- [ ] Port to API v1’s calculator endpoint. - [ ] Add slots to allow customizing the form intro text. - [x] Add UI tests with Cypress, run in CI. - [ ] Add unit tests, run in CI. @@ -63,7 +63,7 @@ Optimizations: - [ ] Add support for caching results in localStorage. - [ ] Add support for showing default list of incentives (from `/api/v0/incentives`). -- [ ] Reuse microcopy from Rewiring America's CMS to avoid duplication between this repo and our website. +- [ ] Reuse microcopy from Rewiring America’s CMS to avoid duplication between this repo and our website. Roadmap: @@ -74,7 +74,7 @@ Roadmap: Bugs: -- [ ] Clicking the tooltip for Household Income should focus the input. Do we need `delegatesFocus` or do we need to refactor the input into a slot so it's light DOM? +- [ ] Clicking the tooltip for Household Income should focus the input. Do we need `delegatesFocus` or do we need to refactor the input into a slot so it’s light DOM? - [ ] Tapping the tooltip on mobile probably shouldn't select the field. Move outside the label maybe? # References diff --git a/src/api/fetch.ts b/src/api/fetch.ts index ecc52df..927f64e 100644 --- a/src/api/fetch.ts +++ b/src/api/fetch.ts @@ -19,16 +19,16 @@ export async function fetchApi( }); if (response.status >= 400) { console.error(response); - // statusText isn't always set, but it's a reasonable proxy for a human readable error if it is: + // statusText isn't always set, but it’s a reasonable proxy for a human readable error if it is: let message = response.statusText; try { const error = await response.json(); console.error(error); if (error.title && error.detail) { - // Zuplo's API key errors have this form: + // Zuplo’s API key errors have this form: message = `${error.title}: ${error.detail}`; } else if (error.message && error.error) { - // Rewiring America's API errors have this form: + // Rewiring America’s API errors have this form: message = `${error.error}: ${error.message}`; } } catch (e) { diff --git a/src/calculator-form.ts b/src/calculator-form.ts index dd2ed0e..5c1f09b 100644 --- a/src/calculator-form.ts +++ b/src/calculator-form.ts @@ -97,9 +97,9 @@ export const formTemplate = ( const projectField = showProjectField ? html`