JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<!doctype html>
<html lang="en">
  <head>
      <meta charset="utf=8" />        
  </head>
  <body>
      <p>Name: <input type="text" id="name" /></p>
      <p>Age: <input type="range" class="num" min=13 max=100 step=1 value=25 /></p> 
      <p><button id="do">DO WORK!</button></p>              
  </body>
</html>

CSS

p {
    padding: 15px;
}

JavaScript

if (!$) {
    var $ = {};
}

$.id = function(sel) {
    return document.getElementById(sel);
};

$.class = function(sel) {
    return document.getElementsByClassName(sel);
};

$.id('do').onclick = function() {
    $.id('name').value = "Brandon";
    $.class('num')[0].value = 77;
};