Simple HTML/CSS/JavaScript Code Playground In jQuery - Unicode
| File Size: | 144 KB |
|---|---|
| Views Total: | 2076 |
| 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.
