Simply css playground

by Michał Oręziak

HTML

<div id="wrapper">
  <div id="try">
    <div id="info"></div>
    <ul id="select"></ul>
  </div>

  <div id="result">
    <div>dfdfgdfgdfgdfgdfdfgdfgdfg</div>
  </div>
</div>
<div id="setup">
  <div id="setup-wrapper">
    <h1>Try out this!</h1>
    <form action="" id="setupFORM">
      <input type="text" id="prop" placeholder="Property">
      <fieldset id="values">
        <input type="text" class="value" placeholder="Value">
      </fieldset>
    </form>
  </div>

</div>

CSS

#select li{
  display:block;
}
#wrapper{
  display:flex;
}
#try, #result{
  width:49.9%;
}
#result{
  height:50vh;
  border:2px solid black;
  background:white;
}
#result div{
  height:auto;
  width:auto;
}
#setup{
  width:100%;
  height:100%;
  position:fixed;
  z-index:10;
  top:0;
  left:0;
  background:#2c3e50;
  display:flex;

  justify-content:center;
  color:white;
}
#setup-wrapper{
  width:75%;
  margin-top:10%;
  height:auto;
  
  input{
    height:2em;
  }
}

JavaScript

function $(el) {
  return document.querySelector(el);
}
//const value = $('input[name="value"]:checked').value;
function onChange(e) {
  let lis = document.querySelectorAll('li');
  [].forEach.call(lis, function(li) {
    li.style.fontWeight = "normal";
  });
  e.currentTarget.style.fontWeight = "bold";
  let prop = e.target.name.replace(/-([a-z])/g, function(g) {
    return g[1].toUpperCase();
  });
  $('#result div').style[prop] = e.target.value;
}

function createForm(property, values, resultCSS) {
  $("#info").innerHTML = '';
  $("#select").innerHTML = '';
  if (resultCSS) {
    Object.keys(resultCSS).forEach(function(key) {
      $("#result").style[key] = resultCSS[key];
    });
  }

  function createField(value) {
    let field = document.createElement("li")
    field.innerHTML = `<input type="radio" name="${property}" value="${value}" />${value}`;
    field.addEventListener("change", onChange);
    return $("#select").appendChild(field);
  }

  function createInfo(property) {
    let info = `Sprawdź właściwość 
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/${property}">${property}</a>`;
    return $("#info").innerHTML = info;
  }
  values.forEach(createField);
  createInfo(property);
  let initialValue = window.getComputedStyle($('#result')).getPropertyValue(property);
  console.log(initialValue);
  $('input[value=' + initialValue + ']').click();
}


createForm('align-self', ['center', 'flex-end', 'flex-start', 'auto'], {
  display: 'flex'
});


$('#values:last-child').addEventListener('input', function(e) {
  let field = document.createElement('input');
  $('#values').appendChild(field);
  removeAllListeners(e.target, "input");
});

function removeAllListeners(node, event) {
  if (node in _eventHandlers) {
    var handlers = _eventHandlers[node];
    if (event in handlers) {
      var eventHandlers = handlers[event];
      for (var i = eventHandlers.length; i--;) {
        var handler = eventHandlers[i];
       ...