JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<link type="text/css" href="https://www.policyexpert.co.uk/secured/Output/css/motor.css" rel="stylesheet"></link>

<section class="question motor-section l-span12-m l-span8-d">
    <header class="motor-section-heading"><h3>Am I amazing?</h3></header>
    <div class="question-content">
    	<article class="motor-section-content l-span12-m l-span12-d" id="target"></article>
    </div>
</section>

JavaScript

var addClass = xtag.addClass.bind(xtag),
    removeClass = xtag.removeClass.bind(xtag),
    query = xtag.query.bind(xtag)

xtag.register('yes-no', {
    lifecycle: {
        created: function(){
          var me = this
          // superinputs begin life knowing they're super.
          var div = document.createElement('div')
          div.innerHTML = '<span class="content l-span8-m l-span12-d  "><div class="yes-no l-span8-m  l-span3-t l-span2-d"><button data-value="Yes" class="">Yes</button><button data-value="No" class="">No</button></div></span>'
          var previous = null
          query(div, 'button').forEach(function(btn){btn.onclick = function(e){
              me._value = (e.target.innerHTML)
              
              if (previous != e.target){
                  if (previous) removeClass(previous, 'selected')
                  addClass(e.target, 'selected')
              }
              previous = e.target
          }
                                                    });
          this._value = undefined;
          this.appendChild(div)
        }
    },
    accessors: {
    value: {
      get: function(){
          
          return this._value;
      }
    }
   }
})


var yn = document.createElement('yes-no')
document.getElementById('target').appendChild(yn)
yn.onclick = function(){
    alert(yn.value)
}