Simple HTML/CSS/JavaScript Code Playground In jQuery - Unicode

Simple HTML/CSS/JavaScript Code Playground In jQuery - Unicode
File Size: 144 KB
Views Total: 349
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Unicode is a jQuery based online code editor & debugger that enables the developers to edit, debug, and preview HTML, CSS, and JavaScript codes on the client side.

Use it as a minimal alternative to Codepen, JSFiddle, JS Bin, etc.

How to use it:

1. Just download the package and upload the files to anywhere you want to deloy the online code playground.

2. Customize the code playground by overriding the default HTML as follows:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Unicode: Online Code Playground</title>
  </head>
  <body>
    <div class="page-element container" id="page-container">
      <div class="container-element" id="sidebar">
        <img
          class="sidebar-element"
          id="main-logo"
          src="public/images/logos/unicode-main.png"
          type="images/png"
          alt="Unicode"
          />
        <div class="container-element" id="button-container">
          <div class="btn active-btn" id="html-btn" data-field="html">
            <img
              class="btn-ico"
              id="html-btn-ico"
              src="public/images/icons/html.png"
              type="images/png"
              alt="HTML"
              />
          </div>
          <div class="btn active-btn" id="css-btn" data-field="css">
            <img
              class="btn-ico"
              id="css-btn-ico"
              src="public/images/icons/css.png"
              type="images/png"
              alt="CSS"
              />
          </div>
          <div class="btn" id="js-btn" data-field="js">
            <img
              class="btn-ico"
              id="js-btn-ico"
              src="public/images/icons/js.png"
              type="images/png"
              alt="JavaScript"
              />
          </div>
          <div class="btn active-btn" id="op-btn" data-field="op">
            <img
              class="btn-ico"
              id="op-btn-ico"
              src="public/images/icons/op.png"
              type="images/png"
              alt="Output"
              />
          </div>
        </div>
        <a href="#"
          ><img
          class="sidebar-element"
          id="araekiel-logo"
          src="public/images/logos/araekiel.png"
          type="images/png"
          alt="Araekiel"
          /></a>
      </div>
      <div class="page-element" id="field-container">
        <textarea
          class="field input-f maximized-field"
          id="html-field"
          data-field="html"
          spellcheck="false"
          placeholder="HTML"
          >
<h3>Begin Coding!</h3>
</textarea
          >
        <textarea
          class="field input-f maximized-field inactive-field"
          id="css-field"
          data-field="css"
          spellcheck="false"
          placeholder="CSS"
          >
@import url('https://fonts.googleapis.com/css?family=Varela+Round&display=swap');
html {
  font-family: "Varela Round";
  text-align: center;
}
</textarea
          >
        <textarea
          class="field input-f inactive-field"
          id="js-field"
          data-field="js"
          spellcheck="false"
          placeholder="Javascript"
          ></textarea>
        <iframe
          class="field output-f maximized-field"
          id="output-field"
          data-field="op"
          ></iframe>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="public/js/elements.js"></script>
    <script src="public/js/functions.js"></script>
    <script src="public/js/main.js"></script>
  </body>
</html>

 


This awesome jQuery plugin is developed by Araekiel. For more Advanced Usages, please check the demo page or visit the official website.