JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/darkly/bootstrap.min.css">

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Selectors: attribute presence and value selectors</title>
    <link rel="stylesheet" href="../styles.css" />
    <style></style>

    <style class="editable">
      li[class] {
        font-size: 200%;
      }

      li[class="a"] {
        background-color: yellow;
      }

      li[class~="a"] {
        color: red;
      }
    </style>
  </head>

  <body class="bg-dark">
    <section class="preview">
      <h1>Attribute presence and value selectors</h1>
      <ul>
        <li>Item 1</li>
        <li class="a">Item 2</li>
        <li class="a b">Item 3</li>
        <li class="ab">Item 4</li>
      </ul>
    </section>

    <textarea class="playable playable-css" style="height: 200px">
li[class] {
  font-size: 200%;
}

li[class="a"] {
  background-color: yellow;
}

li[class~="a"] {
  color: red;
}</textarea
    >

    <textarea class="playable playable-html" style="height: 160px">
<h1>Attribute presence and value selectors</h1>
<ul>
  <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
</ul></textarea
    >

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="../playable.js"></script>
</html>

CSS

/* Some default styling for cookbook examples */
/*
rgb(53 43 34)
rgb(75 70 74)
rgb(95 97 110)
rgb(137 151 188)
rgb(160 178 226)
*/
body {
  background-color: #fff;
  color: #333;
  font:
    1.2em / 1.5 Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  padding: 0;
  margin: 0;
}

/* styles for the editor */

.playable {
  font-family: monospace;
  display: block;
  margin-bottom: 10px;
  border: none;
  border-left: 6px solid #558abb;
  width: 90%;
  max-width: 700px;
  padding: 10px 10px 0px;
  font-size: 90%;
}

.playable-css {
  height: 80px;
}

.playable-html {
  height: 160px;
}

.playable-buttons {
  text-align: right;
  width: 90%;
  max-width: 700px;
  padding: 5px 10px 5px 26px;
  font-size: 100%;
}

.preview {
  width: 90%;
  max-width: 700px;
  border: 1px solid #4d4e53;
  border-radius: 2px;
  padding: 10px 14px 10px 10px;
  margin-bottom: 10px;
}

.preview input {
  display: block;
  margin: 5px;
}

JavaScript

var section = document.querySelector("section");
var editable = document.querySelector(".editable");
var textareaHTML = document.querySelector(".playable-html");
var textareaCSS = document.querySelector(".playable-css");
var reset = document.getElementById("reset");
var htmlCode = textareaHTML.value;
var cssCode = textareaCSS.value;

let editorHeading = document.createElement("h4");
editorHeading.innerHTML = "Interactive editor";
document.querySelector("body").insertBefore(editorHeading, textareaCSS);

function fillCode() {
  editable.innerHTML = textareaCSS.value;
  section.innerHTML = textareaHTML.value;
}

reset.addEventListener("click", function () {
  textareaHTML.value = htmlCode;
  textareaCSS.value = cssCode;
  fillCode();
});

textareaHTML.addEventListener("input", fillCode);
textareaCSS.addEventListener("input", fillCode);
window.addEventListener("load", fillCode);