JSFiddle - React, Tailwind, and code Playground

by lechevalierd3on

HTML

<form oninput="char.value = slider.value; document.querySelector('progress').max = slider.value">
  <progress value="0" max="140"></progress>
  <input name="slider" type="range" min="0" value="140" max="255" value=""/>
  <output onforminput="" for="slider" name="char">140</output>
</form>

<p contenteditable="true">
  Type a tweet here.
</p>

JavaScript

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    console.log('p', mutation);
    var val = document.querySelector("p").innerText.length;
    document.querySelector("progress").value = val;
  });
});

var config = {
  attributes: true,
  childList: true,
  characterData:true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true,
  attributeFilter: true
};
observer.observe(document.querySelector("p") , config);


// just for fun more fooling arround

function spy(query) {
  var config = {
    attributes: true,
    childList: true,
    characterData:true,
    subtree: true,
    attributeOldValue: true,
    characterDataOldValue: true,
    attributeFilter: true
  };
  
  var obs = new MutationObserver(function(mutations){
    mutations.each(function(mutation){
      console.log(query, mutation);
    });
  });
  
  obs.observe(document.querySelector(query), config);
}
spy("input"); spy("progress"); spy("output");