Prettier: Badly Formatted Code for Demo

example.css

    html {
            box-sizing: border-box;
font-size: 16px    ;
}

*,     *:before,     *:after {
      box-sizing:       inherit ;
      }

        .banana > span:after {
        content: attr(data-points) "pts"     ;
        font-size:    0.875rem;
    position:    absolute;
        top: 50%    ;
  left:     -40%;
        background-color:     var(--white-50)    ;
        padding:    2px 10px;
      color: rgba(1,    1,   1, 1);
        border-radius:     4px;
            }

example.js

      $("#speedPercent").on("input", event => {
  $(".output").value =      event.target.value + "%"    ;
})

$("#grid").on("click", event => {
if (event.target && event.target.matches("button.banana")) {

    const points =     parseInt(   event.target.dataset.points, 10     )  ;
state = {        ...state, score: state.score + points };
    setScoreInnerHTML(state);

const span    =       event.target.querySelector("span");
    span.classList.add("exit-animation");
span.on('animationend', ()   =>    {
event.target.parentNode.removeChild(event.target)})
    }
  })

        const mutationObserver    = observer(state)
mutationObserver.observe($("#grid"), {attributes: false,childList: true,subtree: true});