JSFiddle - React, Tailwind, and code Playground

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<label for="allow-quiz">Do you want to add quiz?</label> <input type="checkbox" name="allow-quiz" id="quiz-check" />
<span id='allowed'>$$allowed</span>
<div id="quiz-form">
    <div style="margin-bottom: 10px">
      <input id='quiz-title' placeholder='Quiz title'>
    </div>
    <div>
      <textarea id='quiz-description' placeholder='Quiz description'></textarea>
    </div>
    <div>
      <input id='quiz-time' placeholder='Quiz time' type='number'> minutes
    </div>
    <div style="margin-top: 10px">
      <button id='add-btn'>Add question</button>
    </div>
    <div id="question-form">
     <textarea id='question-text' placeholder='Question'></textarea> <br><br>
      A) <input id='option-a' placeholder='Option A'><br><br>
      B) <input id='option-b' placeholder='Option B'><br><br>
      C) <input id='option-c' placeholder='Option C'><br><br>
      D) <input id='option-d' placeholder='Option D'><br><br>
     <button id='save-btn'>Save question</button>
    </div>
</div>

JavaScript

let myState = state({allowed: 'no'})
dom('#allowed').bind(myState)
render(()=> {
  console.log(myState.allowed)
  if(myState.allowed === 'no') dom('#quiz-form').hide()
  else dom('#quiz-form').show()

})
dom('#quiz-check').change(()=> myState.allowed = myState.allowed === 'no' ? 'yes' : 'no')