rwwagner90/ember-math-helpers

<h2>
  Basic Arithmetic
</h2>

<label>
  <h3>
    Addition
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.addTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.addTemplate}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Division
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.divTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.divTemplate}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Modulus
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.modTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.modTemplate}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Multiplication
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.multTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.multTemplate}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Subtraction
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.subTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.subTemplate}} />
    </span>
  </div>
</label>

<h2>
  Advanced Arithmetic
</h2>

<label>
  <h3>
    GCD
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.gcdTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.gcdTemplate}} />
    </span>
  </div>
</label>

<h2>
  Composable Examples
</h2>

<label>
  <h3>
    Composable Subtraction
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.composableSub}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.composableSub}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Composable Multiple Operations
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.composableComplex}}
    />
    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.composableComplex}} />
    </span>
  </div>
</label>

<h2>
  Min, Max, Round
</h2>

<label>
  <h3>
    Min
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.minTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.minTemplate}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Max
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.maxTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.maxTemplate}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Round
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.roundTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.roundTemplate}} />
    </span>
  </div>
</label>

<h2>
  Random Numbers
</h2>

<label>
  <h3>
    Integer (0 - 1)
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.randomTemplate}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.randomTemplate}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Bounded Int (0 - 42)
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.randomSingleBound}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.randomSingleBound}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Bounded Int (21 - 1797)
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.randomTwoBounds}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.randomTwoBounds}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Float, 2 decimals (0 - 1)
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.randomFloatTwoDecimals}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.randomFloatTwoDecimals}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Float, 4 decimals (0 - 1)
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.randomFloatFourDecimals}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.randomFloatFourDecimals}} />
    </span>
  </div>
</label>

<label>
  <h3>
    Bounded Float, 1 decimal (20 - 93)
  </h3>

  <div class="docs-flex docs-mb-4">
    <Input
      class={{this.classString}}
      @type="text"
      @value={{this.randomBoundedAndDecimal}}
    />

    <span class="docs-flex docs-items-center docs-text-xl">
      =
      <RenderTemplate @templateString={{this.randomBoundedAndDecimal}} />
    </span>
  </div>
</label>