JSFiddle - React, Tailwind, and code Playground

by Bruce Anderson

HTML

<div>
      <h3>Basic if-diff demo.</h3>
      <div> 
        Type in the text boxes, and see what happens when value in the left textbox matches or doesn't match the right textbox.
      </div>
      <label for=lhs>LHS:</label><input id=lhs> 
      <p-d on=input to=[-lhs]  val=target.value m=2></p-d>
      <label for=rhs>RHS:</label><input id=rhs>
      <p-d on=input to=[-rhs]  val=target.value m=2></p-d>
      <if-diff if -lhs equals -rhs data-key-name=equals></if-diff>
      <p-d on=value-changed to=[data-lhs-equals-rhs] prop=textContent value=target.value></p-d>
      <div data-equals=0 id=equalsStatus>
          <template>
            <div>LHS == RHS</div>
          </template>
      </div>

      <if-diff if -lhs not_equals -rhs data-key-name=notEquals></if-diff>
      <p-d on=value-changed to=[data-lhs-not-equals-rhs] prop=textContent></p-d>
      <div data-not-equals=0>
          <template>
              <div>LHS != RHS</div>
          </template>       
      </div>

      

      LHS Equals RHS: <span data-lhs-equals-rhs></span><br>
      LHS Doesn't equal RHS: <span data-lhs-not-equals-rhs></span>

      <!-- ========================  Script Refs ========================== -->
      <script type=module src=https://unpkg.com/if-diff@0.0.50/if-diff.js?module></script>
      <script type=module src=https://unpkg.com/p-et-alia@0.0.86/p-d.js?module></script>
    </div>