Temperature Converter

Live islandRuns locally in this page

Page shell

<article>
  <h1>Temperature Converter</h1>
  <temperature-converter></temperature-converter>
</article>
<script src="https://unpkg.com/cami@0.4/build/cami.cdn.js"></script>
<script type="module" src="./island.js"></script>

Island source

JavaScriptTypeScript

const { html, ReactiveElement } = cami
class TemperatureConverterElement extends ReactiveElement {
    celsius = '';
    fahrenheit = '';
    convertToFahrenheit(celsius) {
        const value = Number(celsius);
        if (celsius !== '' && Number.isFinite(value)) {
            this.fahrenheit = String(value * (9 / 5) + 32);
        }
    }
    convertToCelsius(fahrenheit) {
        const value = Number(fahrenheit);
        if (fahrenheit !== '' && Number.isFinite(value)) {
            this.celsius = String((value - 32) * (5 / 9));
        }
    }
    template() {
        return html `
      <label>
        Celsius:
        <input type="number" .value=${this.celsius} @input=${(event) => this.convertToFahrenheit(event.currentTarget.value)}>
      </label>
      <label>
        Fahrenheit:
        <input type="number" .value=${this.fahrenheit} @input=${(event) => this.convertToCelsius(event.currentTarget.value)}>
      </label>
    `;
    }
}
customElements.define('temperature-converter', TemperatureConverterElement);

import { html, ReactiveElement } from 'cami'

class TemperatureConverterElement extends ReactiveElement {
  celsius: string = ''
  fahrenheit: string = ''

  convertToFahrenheit(celsius: string): void {
    const value = Number(celsius)
    if (celsius !== '' && Number.isFinite(value)) {
      this.fahrenheit = String(value * (9 / 5) + 32)
    }
  }

  convertToCelsius(fahrenheit: string): void {
    const value = Number(fahrenheit)
    if (fahrenheit !== '' && Number.isFinite(value)) {
      this.celsius = String((value - 32) * (5 / 9))
    }
  }

  template(): ReturnType<typeof html> {
    return html`
      <label>
        Celsius:
        <input type="number" .value=${this.celsius} @input=${(event: InputEvent) =>
          this.convertToFahrenheit((event.currentTarget as HTMLInputElement).value)}>
      </label>
      <label>
        Fahrenheit:
        <input type="number" .value=${this.fahrenheit} @input=${(event: InputEvent) =>
          this.convertToCelsius((event.currentTarget as HTMLInputElement).value)}>
      </label>
    `
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'temperature-converter': TemperatureConverterElement
  }
}

customElements.define('temperature-converter', TemperatureConverterElement)