jsfiddle.net
Open in
urlscan Pro
2606:4700:3032::ac43:9e09
Public Scan
URL:
https://jsfiddle.net/jun88mxcom/16bvqya8/
Submission: On February 04 via manual from VN — Scanned from CH
Submission: On February 04 via manual from VN — Scanned from CH
Form analysis 1 forms found in the DOM
POST https://fiddle.jshell.net/_display/?editor_console=true
<form method="post" id="show-result" target="result" action="https://fiddle.jshell.net/_display/?editor_console=true" autocomplete="off">
<input type="hidden" name="authenticity_token" value="PyBaMIaG6ODfik4oSnMdkouaavsYy5mzWn9BLEZGw9I/koDNVrL4O9gN17gF1wFxwyfK7UTNCkP3GFMZRhfVqA==">
<header>
<h1>
<span class="title">JSFiddle</span>
<div class="changelog-badge">
<a title="JSFiddle" href="/">
<svg width="46px" height="33px" viewBox="0 0 46 33" id="no-war">
<g stroke-width="1.8" fill="none" fill-rule="evenodd">
<path d="M23.4888889,20.543316 C21.4404656,18.4187374 19.0750303,15.6666667 16.4832014,15.6666667 C13.8721947,15.6666667 11.7555556,17.6366138 11.7555556,20.0666667 C11.7555556,22.4967196 13.8721947,24.4666667 16.4832014,24.4666667 C18.8347252,24.4666667 19.9845474,23.0125628 20.6429148,22.312473" id="Oval-1" stroke-linecap="round"></path>
<path d="M22.5111111,19.5900174 C24.5595344,21.7145959 26.9249697,24.4666667 29.5167986,24.4666667 C32.1278053,24.4666667 34.2444444,22.4967196 34.2444444,20.0666667 C34.2444444,17.6366138 32.1278053,15.6666667 29.5167986,15.6666667 C27.1652748,15.6666667 26.0154526,17.1207706 25.3570852,17.8208603" id="Oval-1-Copy" stroke-linecap="round"></path>
<path d="M45,22.7331459 C45,19.1499462 42.7950446,16.079593 39.6628004,14.7835315 C39.6774469,14.5246474 39.7003932,14.2674038 39.7003932,14.0035978 C39.7003932,6.82243304 33.8412885,1 26.611593,1 C21.3985635,1 16.9102123,4.03409627 14.8051788,8.41527616 C13.7828502,7.62878013 12.503719,7.15547161 11.1134367,7.15547161 C7.77825654,7.15547161 5.07450503,9.84159999 5.07450503,13.1544315 C5.07450503,13.7760488 5.16938207,14.3779791 5.3477444,14.9418479 C2.74863428,16.4787471 1,19.2867709 1,22.5105187 C1,27.3287502 4.89630545,31.2367856 9.72803666,31.31094 L36.3341301,31.3109406 C41.1201312,31.3406346 45,27.4870665 45,22.7331459 L45,22.7331459 Z" stroke-linejoin="round"></path>
</g>
</svg>
</a>
</div>
</h1>
<div id="actions">
<nav class="actionCont">
<div class="actionItem">
<a class="aiButton" id="run" title="Run (Command/Ctrl + Enter)" href="#run">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
Run</a>
</div>
<!-- Logged in users don't need the info popup on saving/updating/forking -->
<div class="actionItem dropdown ">
<a class="aiButton dropdownTrigger" title="Save (Command/Ctrl + S)" href="#save" data-popover-trigger="saveInfo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
Save</a>
</div>
<div class="actionItem dropdown visible">
<a class="aiButton dropdownTrigger" title="Fork" href="#fork" data-popover-trigger="forkInfo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shuffle"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
Fork</a>
</div>
<div class="actionItem hidden ">
<a class="aiButton" id="mark_favourite" title="Set as base" href="#set-as-base">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
Set as base</a>
</div>
<div class="actionItem ">
<a class="aiButton" id="collaborate" title="Collaborate" href="#collaborate">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
Collaborate</a>
</div>
<div class="actionItem dropdown visible ">
<a class="aiButton dropdownTrigger" id="share" title="Embed" href="#embed" data-popover-trigger="embed">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
Embed</a>
</div> <!-- /actionItem -->
</nav>
<ul class="actionCont dropdown right">
<li class="actionItem dropdown">
<a id="upvote-iframe-load" class="aiButtonVote dropdownTrigger" href="#upvote" data-popover-trigger="upvote">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#87C449" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
Vote for features</a>
</li>
<li class="actionItem">
<a class="aiButton dropdownTrigger" href="#" title="Editor settings" data-popover-trigger="editor-settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
Settings
</a>
</li> <!-- /actionItem -->
<li class="actionItem"><a class="aiButton" href="/user/login/">Sign in</a></li>
</ul>
<div class="dropdownCont hidden" data-popover-ref="editor-settings" data-popover-position="left">
<div class="dcWrapper editorSettings">
<div id="editor-options">
<h3>Editor layout</h3>
<div id="layout">
<!-- HACK: for some reason the first input always gets the value of the last active
grid mode, for that reason a hack is to create an invisible first input -->
<input style="display: none;" name="layout" type="radio" value="grid_invisible_hack">
<label>
<input name="layout" type="radio" value="1" checked="">
<span class="gridMode grid_1"></span> Classic </label>
<label>
<input name="layout" type="radio" value="2">
<span class="gridMode grid_2"></span> Columns </label>
<label>
<input name="layout" type="radio" value="3">
<span class="gridMode grid_3"></span> Bottom results </label>
<label>
<input name="layout" type="radio" value="4">
<span class="gridMode grid_4"></span> Right results </label>
<label>
<input name="layout" type="radio" value="5">
<span class="gridMode grid_5"></span> Tabs (columns) </label>
<label>
<input name="layout" type="radio" value="6">
<span class="gridMode grid_6"></span> Tabs (rows) </label>
</div>
<h3>Console</h3>
<div class="fieldsCont">
<p class="proBadge">
<label class="checkboxCont ">
<input type="checkbox" name="editorConsole">
<span class="checkbox"></span> Console in the editor <small>(beta)</small>
</label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="clearConsole">
<span class="checkbox"></span> Clear console on run </label>
</p>
</div> <!-- /fieldsCont -->
<h3>General</h3>
<div class="fieldsCont">
<!-- <p>
<label class="checkboxCont">
<input type="checkbox" name="darkTheme" checked>
<span class="checkbox"></span>
Dark theme
</label>
</p> -->
<p>
<label class="checkboxCont">
<input type="checkbox" name="lineNumbers" checked="">
<span class="checkbox"></span> Line numbers </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="lineWrapping" checked="">
<span class="checkbox"></span> Wrap lines </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="indentWithTabs">
<span class="checkbox"></span> Indent with tabs </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="codeHints">
<span class="checkbox"></span> Code hinting (autocomplete) <small>(beta)</small>
</label>
</p>
</div> <!-- /fieldsCont -->
<div class="selectPairs">
<div class="selectPair">
<span class="label">Indent size:</span>
<div class="selectCont">
<select name="indentUnit">
<option value="2">2 spaces</option>
<option value="3">3 spaces</option>
<option value="4">4 spaces</option>
</select>
</div>
</div> <!-- /selectPair -->
<div class="selectPair">
<span class="label">Key map:</span>
<div class="selectCont">
<select name="keyMap">
<option value="default">Default</option>
<option value="sublime">Sublime Text</option>
<!-- <option value="vim">VIM</option> -->
<option value="emacs">EMACS</option>
</select>
</div>
</div> <!-- /selectPair -->
<div class="selectPair">
<span class="label">Font size:</span>
<div class="selectCont">
<select name="fontSize">
<option value="1">Default</option>
<option value="2">Big</option>
<option value="3">Bigger</option>
<option value="4">Jabba</option>
</select>
</div>
</div> <!-- /selectPair -->
</div> <!-- /selectPairs -->
<h3>Behavior</h3>
<div class="fieldsCont">
<p>
<label class="checkboxCont disabled" data-title="Log in to use auto-running">
<input type="checkbox" name="autoRun" disabled="">
<span class="checkbox"></span> Auto-run code </label>
</p>
<p>
<label class="checkboxCont disabled" data-title="Log in to use auto-running">
<input type="checkbox" name="autoRunValid" disabled="">
<span class="checkbox"></span> Only auto-run code that validates </label>
</p>
<p>
<label class="checkboxCont disabled" data-title="Log in to use auto-saving">
<input type="checkbox" name="autoSave" disabled="">
<span class="checkbox"></span> Auto-save code (bumps the version) </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="autoCloseTags" checked="">
<span class="checkbox"></span> Auto-close HTML tags </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="autoCloseBrackets" checked="">
<span class="checkbox"></span> Auto-close brackets </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="codeLinting" checked="">
<span class="checkbox"></span> Live code validation </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="matchTags">
<span class="checkbox"></span> Highlight matching tags </label>
</p>
</div> <!-- /fieldsCont -->
<h3>Boilerplates</h3>
<div class="fieldsCont">
<p>
<label class="checkboxCont">
<input type="checkbox" name="reduceHelloBar">
<span class="checkbox"></span> Show boilerplates bar less often </label>
</p>
</div> <!-- /fieldsCont -->
</div> <!-- /editor-options -->
</div> <!-- /dcWrapper -->
</div> <!-- /dropdownCont -->
<div class="dropdownCont hidden" data-popover-ref="upvote" data-popover-position="left">
<div class="dcWrapper" style="width: 750px;" id="votehub-cont">
<script type="text/javascript">
let votehubLoaded = false
document.querySelector("#upvote-iframe-load").addEventListener("click", function() {
async function loadVoteHub() {
const response = await fetch("https://vote-hub.app/api/voter")
const obj = await response.json()
const userId = obj.voter
let frame =
`<iframe src="https://vote-hub.app/votings/c3246f03-9571-43a3-b4ed-a26f4c290757/embed?identifier=${userId}&show_name=1&show_description=1&show_total=0&show_percent=1" style="width: 100%; min-height: calc(100vh - 90px); border: none"></iframe>`
let frameCont = document.querySelector("#voting-iframe-cont")
if (!votehubLoaded) {
frameCont.innerHTML = frame
votehubLoaded = true
}
}
loadVoteHub()
})
</script>
<style>
#votehub-cont {
display: grid;
grid-template-columns: 2fr 1fr;
}
#voting-iframe-cont {
position: relative;
left: -10px;
width: 100%;
}
#approved-votes {
padding: 20px;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 10px;
}
#approved-votes h3 {
font-weight: bold;
font-size: 14px;
margin-bottom: 15px;
}
#approved-votes li {
margin-top: 5px;
}
#approved-votes a {
color: #2E71FF;
}
.aiButtonVote {
border: solid 1px rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 0 10px;
margin-top: 10px;
height: 35px;
display: flex;
outline: none;
text-decoration: none;
color: #fff;
align-items: center;
justify-content: center;
position: relative;
font-weight: bold;
}
.aiButtonVote:hover {
border: solid 1px #fff;
text-decoration: none;
}
.aiButtonVote svg {
margin-right: 7px;
}
.aiButtonVote:after {
content: "January";
display: block;
position: absolute;
right: -10px;
bottom: -12px;
color: #222;
font-size: 11px;
font-weight: normal;
border-radius: 5px;
padding: 2px 5px;
background-color: #87C449;
}
</style>
<div id="voting-iframe-cont"> Loading ... </div>
<div id="approved-votes">
<h3>Planned features by votes</h3>
<ul>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Publish fiddles as mini-websites</a></li>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Save fiddles as templates</a></li>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Download a zipped fiddle</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="dropdownCont center hidden" data-popover-ref="saveInfo">
<div class="dcWrapper info">
<p><strong>Save anonymous (public) fiddle?</strong></p>
<p>- Be sure not to include <strong>personal data</strong><br>- Do not include <strong>copyrighted material</strong></p>
<p class="warning"><strong>Log in</strong> if you'd like to <strong>delete this fiddle</strong> in the future.</p>
<button id="save">Save</button>
</div>
</div>
<div class="dropdownCont center hidden" data-popover-ref="forkInfo">
<div class="dcWrapper info">
<p><strong>Fork anonymous (public) fiddle?</strong></p>
<p>- Be sure not to include <strong>personal data</strong><br>- Do not include <strong>copyrighted material</strong></p>
<p class="warning"><strong>Log in</strong> if you'd like to <strong>delete this fiddle</strong> in the future.</p>
<button id="fork">Fork</button>
</div>
</div>
<div class="dropdownCont center hidden" data-popover-ref="embed">
<div class="dcWrapper embed">
<div id="creator">
<section>
<h3>Tabs:</h3>
<div class="inlineFields">
<label class="inputCont_checkbox checkboxCont">
<input type="checkbox" name="tabs" value="js" checked="">
<span class="checkbox"><i class="bts bt-check"></i></span> JavaScript </label>
<label class="inputCont_checkbox checkboxCont">
<input type="checkbox" name="tabs" value="html" checked="">
<span class="checkbox"><i class="bts bt-check"></i></span> HTML </label>
<label class="inputCont_checkbox checkboxCont">
<input type="checkbox" name="tabs" value="css" checked="">
<span class="checkbox"><i class="bts bt-check"></i></span> CSS </label>
<label class="inputCont_checkbox checkboxCont">
<input type="checkbox" name="tabs" value="result" checked="">
<span class="checkbox"><i class="bts bt-check"></i></span> Result </label>
</div> <!-- /inlineFields -->
</section>
<section class="noborder">
<h3>Visual:</h3>
<div class="inlineFields">
<label class="inputCont_checkbox checkboxCont">
<input type="radio" name="skin" value="light" checked="">
<span class="radio"></span> Light </label>
<label class="inputCont_checkbox checkboxCont">
<input type="radio" name="skin" value="dark">
<span class="radio"></span> Dark </label>
</div> <!-- /inlineFields -->
<label class="inputCont_text">
<input type="text" name="accentColor" maxlength="7" placeholder="Accent color">
</label>
<label class="inputCont_text">
<input type="text" name="fontColor" maxlength="7" placeholder="Font color">
</label>
<label class="inputCont_text">
<input type="text" name="menuColor" maxlength="7" placeholder="Menu background">
</label>
<label class="inputCont_text">
<input type="text" name="bodyColor" maxlength="7" placeholder="Code background">
</label>
</section>
<section class="noborder">
<h3> Embed snippet <a href="#" class="codeTypeToggle">Prefer iframe?</a>: </h3>
<div class="embedCodeWrap">
<textarea class="embedCode" id="share_embedded_dropdown" data-view="embed" data-pattern-value="<script async src="{embedSrc}"></script>"><script async src="{embedSrc}"></script>
</textarea>
</div> <!-- /embedCodeWrap -->
<div class="embedCodeWrap hidden">
<textarea class="embedCode" data-view="embedded"
data-pattern-value="<iframe width="100%" height="300" src="{embedSrc}" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>"><iframe width="100%" height="300" src="{embedSrc}" allowfullscreen allowpaymentrequest frameborder="0"></iframe>
</textarea>
<p><strong>No autoresizing</strong> to fit the code</p>
<p><strong>Render blocking</strong> of the parent page</p>
</div> <!-- /embedCodeWrap -->
</section>
</div> <!-- /creator -->
<div id="preview"></div> <!-- /preview -->
</div> <!-- /dcWrapper -->
</div> <!-- /dropdownCont -->
<div id="progressbar">
<div class="pb"></div>
</div>
</header>
<main id="layout-container">
<div id="sidebar">
<section id="s-cont">
<div id="profile-segment" class="">
<div class="userSidebar ">
<div class="userProfile">
<div class="avatar">
<img src="https://www.gravatar.com/avatar/a95ce844bda8440e06f4579924548bd7?s=80" height="45" width="45">
</div>
<div class="profileDetails">
<a href="/user/jun88mxcom/fiddles/">
jun88mxcom
</a>
<div class="company">
</div> <!-- /company -->
<ul class="socialInfo">
<li class="more">
<svg viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="1.4" fill="none" stroke-linejoin="round" stroke="currentColor">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</g>
</svg>
</li>
</ul>
</div> <!-- /profileDetails -->
</div> <!-- /userProfile -->
</div> <!-- /userSidebar -->
</div>
<div class="sidebarItem opened">
<h3 class="toggler" title="Posted on 27 01 2024"> Fiddle meta </h3>
<div class="body">
<p>
<input type="text" name="title" maxlength="255" value="" placeholder="Untitled fiddle">
</p>
<p>
<textarea rows="10" cols="40" name="description" placeholder="No description"></textarea>
</p>
<p class="privateFiddleCont">
<label class="checkboxCont proBadge">
<input type="checkbox" name="is_private" value="1" disabled="">
<span class="checkbox"></span> Private fiddle <a class="proBadgeSelf" href="/extra/" target="_blank">Extra</a>
</label>
</p>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem">
<h3 class="toggler proBadge"> Groups <a class="proBadgeSelf" href="/extra/" target="_blank">Extra</a>
</h3>
<div class="body">
<ul class="groupsList toggleGroupPrivacy">
</ul> <!-- .groupsList -->
<div id="choices-select">
<div class="choices" data-type="select-multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">
<div class="choices__inner"><select name="ignore_this_select" multiple="" class="choices__input" hidden="" tabindex="-1" data-choice="active"></select>
<div class="choices__list choices__list--multiple"></div><input type="text" class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list"
aria-label="false">
</div>
<div class="choices__list choices__list--dropdown" aria-expanded="false">
<div class="choices__list" aria-multiselectable="true" role="listbox">
<div id="choices--ignore_this_select-16-item-choice-1" class="choices__item choices__item--choice choices__item--disabled" role="option" data-choice="" data-id="1" data-value="" data-select-text="Press to select"
data-choice-disabled="" aria-disabled="true">You have no groups</div>
</div>
</div>
</div>
</div>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<script src="/js/Groups.js?6d99c9bdf6c9a2201f3d15048efe4dd0e86cb47b"></script>
<script type="text/javascript">
var resources = []
</script>
<div class="sidebarItem">
<h3 class="toggler "> Resources <strong class="resourcesLabel">URL</strong> <strong class="resourcesLabel">cdnjs</strong>
<em id="resource-counter" class="hidden">0</em>
</h3>
<div class="body">
<ul id="external_resources_list">
</ul>
<div id="external-resources-form">
<p>
<input id="external_resource" type="text" name="q" value="" placeholder="JavaScript/CSS URL" autocomplete="off">
<a id="add_external_resource" class="submit" href="#" title="Add resource">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
</a>
</p>
</div>
<input type="hidden" value="" id="external_resources_id" name="add_external_resources">
<ul class="resourcesInfo">
<li>Paste a direct CSS/JS URL</li>
<li>Type a library name to fetch from CDNJS</li>
</ul>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem">
<h3 class="toggler"> Async requests </h3>
<div class="body">
<p><code>/echo</code> simulates Async calls:<br> JSON: <code>/echo/json/</code><br> JSONP: <code>//jsfiddle.net/echo/jsonp/</code><br> HTML: <code>/echo/html/</code><br> XML: <code>/echo/xml/</code>
</p>
<p>See <a href="https://jsfiddle.gitbook.io/help/async-requests" target="_new">docs</a> for more info.</p>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem">
<h3 class="toggler"> Other (links, license) </h3>
<div class="body">
<p class="maintainers">Created and maintained by <a title="Piotr's twitter" href="https://twitter.com/zalun" target="_blank" rel="noopener">Piotr</a> and
<a title="UX and UI Designer" href="https://twitter.com/oskar" target="_blank" rel="noopener">Oskar</a>.</p>
<p>Hosted on <a href="https://m.do.co/c/52e7a0ad196d" target="_blank" rel="noopener"><strong>DigitalOcean</strong></a></p>
<p><strong></strong></p>
<p>All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.</p>
<p><strong>Links</strong></p>
<p>
<a href="https://github.com/jsfiddle/jsfiddle-issues/issues" target="_blank" rel="noopener">Bug tracker</a><br>
<a href="https://jsfiddle.net/about" target="_blank" rel="noopener">About</a><br>
<a href="https://docs.jsfiddle.net" target="_blank" rel="noopener">Docs</a><br>
<a href="http://status.jsfiddle.net" target="_blank" rel="noopener">Service status</a>
</p>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<style media="screen">
.maintainers {
position: absolute;
top: -900em;
left: -900em;
}
</style>
</section>
<section id="s-bottom">
<div class="twitterCont">
<!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jsfiddlenet" id="_carbonads_js"></script> -->
<script type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIEKQ7&placement=jsfiddlenet" id="_carbonads_js"></script>
</div>
<div id="support-jsfiddle">
<h3>Support the development of JSFiddle and get extra features ✌🏻</h3>
<a href="/extra/">Become a supporter</a>
</div>
<!-- <div id="fallback">
<a href="https://instagram.com/oskarkrawczyk" target="_blank">
<h3>Lifestyle, adventure and backstage photographer based in Warsaw, Poland.</h3>
<img src="/img/fallback/logo-adunit.jpg" />
</a>
</div> -->
<div id="fallback" class="show">
<a href="https://pixelpeeper.com/exif-data-viewer?utm_source=jsfiddle" target="_blank">
<h3>Exif Data Viewer: turn JPG files into Lightroom presets.</h3>
<img src="/img/fallback/logo-adunit.jpg">
</a>
</div>
</section>
</div> <!-- #sidebar -->
<div id="content">
<div id="editor">
<div class="panel-v left" style="width: calc(50% - 0.5px);">
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_html" name="code_html" style="display: none;"></textarea>
<div class="windowLabelCont">
<a href="#" class="windowLabel" data-panel="html" data-popover-trigger="html">
<span class="label">HTML</span>
<svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
<path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
</svg>
</a>
<a href="#" class="panelTidy" data-panel="html">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap fontSize_1" translate="no">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px; width: 18px; visibility: hidden;">
<div style="min-width: 1px; height: 750px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; visibility: hidden;">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 730px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>25</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16.3984px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation" style="">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://jun88mx.com/"</span><span class="cm-tag cm-bracket">></span>Jun88<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span> đang dẫn đầu trong làng giải trí cá cược tại Việt Nam và châu Á. Nhà cái Jun88 không ngừng đổi mới hình ảnh, diện mạo, đặc biệt là kho tàng game cực kỳ chất lượng có thể kể đến như cá cược bóng đá, casino, xổ số, đá gà,.. kèm theo nhiều khuyến mãi siêu khủng. Jun 88 cam kết mang đến cho người chơi trãi nghiệm mượt mà, giao diện hiện đại, nạp rút nhanh chóng. Đăng ký ngay hôm nay nhận 88k.</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">2</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">Thông tin liên hệ:</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">3</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">Địa chỉ: 2 Đ. Số 2, Thảo Điền, Quận 2, Thành phố Hồ Chí Minh</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">4</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">Phone: 098319299</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">5</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">Email: jun88mxcom@gmail.com</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">6</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;">Website: <span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://jun88mx.com/"</span><span class="cm-tag cm-bracket">></span>https://jun88mx.com/<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">7</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;">#jun88 #bóng đá jun88 #nhà cái jun88 #trang chủ jun88 #jun88mx #jun88com #jun88mxcom #đăng ký jun88 #đăng nhập jun88 #jun 88</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">8</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">Social:</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">9</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://twitter.com/jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://twitter.com/jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">10</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.youtube.com/@jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://www.youtube.com/@jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">11</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.linkedin.com/in/jun88mxcom/"</span><span class="cm-tag cm-bracket">></span>https://www.linkedin.com/in/jun88mxcom/<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">12</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://glose.com/u/jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://glose.com/u/jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">13</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://rapidapi.com/jun88mxcom/api/jun88mx"</span><span class="cm-tag cm-bracket">></span>https://rapidapi.com/jun88mxcom/api/jun88mx<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">14</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.diigo.com/profile/jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://www.diigo.com/profile/jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">15</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.pearltrees.com/jun88mxcom/item572592192"</span><span class="cm-tag cm-bracket">></span>https://www.pearltrees.com/jun88mxcom/item572592192<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">16</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.deviantart.com/jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://www.deviantart.com/jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">17</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.flickr.com/people/jun88mxcom/"</span><span class="cm-tag cm-bracket">></span>https://www.flickr.com/people/jun88mxcom/<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">18</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.reddit.com/user/jun88mxcom/"</span><span class="cm-tag cm-bracket">></span>https://www.reddit.com/user/jun88mxcom/<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">19</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.pinterest.com/jun88mxcom/"</span><span class="cm-tag cm-bracket">></span>https://www.pinterest.com/jun88mxcom/<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">20</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.gta5-mods.com/users/jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://www.gta5-mods.com/users/jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">21</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.plurk.com/jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://www.plurk.com/jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">22</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://www.instapaper.com/p/jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://www.instapaper.com/p/jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">23</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://band.us/band/93710326/intro"</span><span class="cm-tag cm-bracket">></span>https://band.us/band/93710326/intro<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">24</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://wakelet.com/@jun88mxcom"</span><span class="cm-tag cm-bracket">></span>https://wakelet.com/@jun88mxcom<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">25</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 730px;"></div>
<div class="CodeMirror-gutters" style="height: 780px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-vertical" style="height: 1px;"></div>
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_js" name="code_js" style="display: none;"></textarea>
<div class="windowLabelCont">
<a href="#" class="windowLabel" data-panel="js" data-popover-trigger="js">
<span class="label">JavaScript + No-Library (pure JS)</span>
<svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
<path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
</svg>
</a>
<a href="#" class="panelTidy" data-panel="js">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap fontSize_1 CodeMirror-focused" translate="no">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; visibility: hidden;">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; visibility: hidden;">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 25px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>1</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors" style="visibility: hidden;">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16.7969px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 25px;"></div>
<div class="CodeMirror-gutters" style="height: 75px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-horizontal" style="width: 1px;"></div>
<div class="panel-v right" style="width: calc(50% - 0.5px);">
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_css" name="code_css" style="display: none;"></textarea>
<div class="windowLabelCont">
<a href="#" class="windowLabel" data-panel="css" data-popover-trigger="css">
<span class="label">CSS</span>
<svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
<path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
</svg>
</a>
<a href="#" class="panelTidy" data-panel="css">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap fontSize_1" translate="no">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; visibility: hidden;">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; visibility: hidden;">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 25px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>1</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16.7969px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 25px;"></div>
<div class="CodeMirror-gutters" style="height: 75px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-vertical" style="height: 1px;"></div>
<div class="panel-h panel resultsPanel" style="height: calc(50% - 0.5px);">
<div class="resultsCont minimized consoleEnabled">
<div class="iframeCont">
<iframe name="result"
allow="midi; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write; notifications; payment-handler; persistent-storage; background-sync; ambient-light-sensor; accessibility-events;"
sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" allowpaymentrequest="" frameborder="0"
src="//fiddle.jshell.net/jun88mxcom/16bvqya8/show/?editor_console=">
</iframe>
</div>
<div class="windowLabelCont">
<span class="windowLabel hidden"> Result </span>
<em class="size hidden">695px</em>
</div>
<div id="console">
<section class="header">
<svg class="logo" height="16" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="1.8" fill="none" stroke-linejoin="round">
<polyline points="4,17 10,11 4,5"></polyline>
<line x1="12" x2="20" y1="19" y2="19"></line>
</g>
</svg>
<h3>Console (beta)</h3>
<div class="consoleActions">
<a id="console-clear" href="#">Clear console</a>
<a id="console-minimize" href="#">Minimize</a>
</div>
<div id="console-summary">
<span class="log ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="1.8" fill="none" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>0 </span>
<span class="info ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>0 </span>
<span class="warn ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<path
d="M10.29 3.86l-8.47 14.14 -7.80912e-08 1.35236e-07c-.552351.956547-.224686 2.17975.73186 2.7321 .297614.171855.634491.264121.97814.267898h16.94l-1.12917e-07 1.24109e-09c1.1045-.0121397 1.99004-.917357 1.9779-2.02186 -.00377709-.343648-.0960428-.680526-.267898-.97814l-8.47-14.14 1.92952e-08 3.18097e-08c-.572861-.944407-1.80285-1.2456-2.74726-.672744 -.275097.166869-.505875.397647-.672744.672744Z">
</path>
<line x1="12" x2="12" y1="9" y2="13"></line>
<line x1="12" x2="12.01" y1="17" y2="17"></line>
</g>
</svg>0 </span>
<span class="error ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<polygon points="7.86,2 16.14,2 22,7.86 22,16.14 16.14,22 7.86,22 2,16.14 2,7.86 7.86,2"></polygon>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>0 </span>
</div>
</section>
<ul id="console-output">
<li class="system">JSFiddle Console (beta). Turn on/off in Editor settings.</li>
<li class="system">☁️ "Running fiddle"</li>
</ul><input id="console-input" type="text" placeholder=">_">
</div>
</div>
</div>
</div>
</div>
<div class="windowSettings html hidden" data-panel="html" data-popover-ref="html">
<h3>Language</h3>
<div class="selectCont">
<select name="panel_html" class="panelChoice" id="panel_html_choice" data-panel_id="id_code_html" data-panel="html">
<option data-mime-type="text/html" value="0" selected="">HTML</option>
<option data-mime-type="text/x-haml" value="1">HAML</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div> <!-- /selectCont -->
<h3>Doctype</h3>
<div class="selectCont">
<select name="doctype">
<option id="dtd_XHTML 1.0 Strict" value="1">XHTML 1.0 Strict</option>
<option id="dtd_XHTML 1.0 Transitional" value="2">XHTML 1.0 Transitional</option>
<option selected="" id="dtd_HTML 5" value="3">HTML 5</option>
<option id="dtd_HTML 4.01 Strict" value="4">HTML 4.01 Strict</option>
<option id="dtd_HTML 4.01 Transitional" value="5">HTML 4.01 Transitional</option>
<option id="dtd_HTML 4.01 Frameset" value="6">HTML 4.01 Frameset</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div>
<h3>Body tag</h3>
<p>
<label>
<input id="id_body_tag" type="text" name="body_tag" maxlength="255" value="">
</label>
</p>
</div> <!-- /windowSettings -->
<div class="windowSettings js hidden" data-panel="js" data-popover-ref="js">
<h3>Language</h3>
<div class="selectCont">
<select name="panel_js" class="panelChoice" id="panel_js_choice" data-panel_id="id_code_js" data-panel="js">
<option data-mime-type="text/javascript" value="0" selected="">JavaScript</option>
<option data-mime-type="text/coffeescript" value="1">CoffeeScript</option>
<option data-mime-type="application/javascript" value="2">JavaScript 1.7</option>
<option data-mime-type="text/jsx" value="3">Babel + JSX</option>
<option data-mime-type="text/typescript" value="4">TypeScript</option>
<option data-mime-type="text/coffeescript" value="5">CoffeeScript 2</option>
<option data-mime-type="text/javascript" value="6">Vue</option>
<option data-mime-type="text/jsx" value="7">React</option>
<option data-mime-type="text/jsx" value="8">Preact</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div> <!-- /selectCont -->
<h3>Frameworks & Extensions</h3>
<div class="panelExtrasChoice">
<div class="selectCont">
<select name="js_lib" id="js_lib">
<optgroup label="Alpine.js">
<option value="409">Alpine.js 2.1.2</option>
</optgroup>
<optgroup label="AngularJS">
<option value="137">AngularJS 1.1.1</option>
<option value="180">AngularJS 1.2.1</option>
<option value="283">AngularJS 1.4.8</option>
<option value="281">AngularJS 2.0.0-alpha.47</option>
</optgroup>
<optgroup label="Bonsai">
<option value="120">Bonsai 0.4.1</option>
</optgroup>
<optgroup label="Brick">
<option value="176">Brick edge</option>
</optgroup>
<optgroup label="CreateJS">
<option value="170">CreateJS 2013.09.25</option>
<option value="279">CreateJS 2015.05.21</option>
</optgroup>
<optgroup label="D3">
<option value="134">D3 3.x</option>
<option value="386">D3 4.13.0</option>
<option value="397">D3 5.9.2</option>
</optgroup>
<optgroup label="Dojo">
<option value="87">Dojo (nightly)</option>
<option value="372">Dojo 1.4.8</option>
<option value="370">Dojo 1.5.6</option>
<option value="368">Dojo 1.6.5</option>
<option value="366">Dojo 1.7.12</option>
<option value="364">Dojo 1.8.14</option>
<option value="362">Dojo 1.9.11</option>
<option value="360">Dojo 1.10.8</option>
<option value="358">Dojo 1.11.4</option>
<option value="356">Dojo 1.12.2</option>
</optgroup>
<optgroup label="Ember">
<option value="190">Ember (latest)</option>
</optgroup>
<optgroup label="Enyo">
<option value="115">Enyo (nightly)</option>
<option value="116">Enyo 2.0.1</option>
<option value="121">Enyo 2.1</option>
<option value="145">Enyo 2.2.0</option>
<option value="214">Enyo 2.4.0</option>
<option value="238">Enyo 2.5.1</option>
<option value="299">Enyo 2.7.0</option>
</optgroup>
<optgroup label="ExtJS">
<option value="23">ExtJS 3.1.0</option>
<option value="109">ExtJS 3.4.0</option>
<option value="107">ExtJS 4.1.0</option>
<option value="80">ExtJS 4.1.1</option>
<option value="147">ExtJS 4.2.0</option>
<option value="258">ExtJS 5.0.0</option>
<option value="256">ExtJS 5.1.0</option>
<option value="338">ExtJS 6.2.0</option>
</optgroup>
<optgroup label="FabricJS">
<option value="250">FabricJS 1.5.0</option>
<option value="342">FabricJS 1.7.7</option>
<option value="378">FabricJS 1.7.15</option>
<option value="380">FabricJS 1.7.20</option>
</optgroup>
<optgroup label="Glow">
</optgroup>
<optgroup label="Inferno">
<option value="336">Inferno 1.0.0-beta9</option>
</optgroup>
<optgroup label="JSBlocks">
<option value="252">JSBlocks (edge)</option>
</optgroup>
<optgroup label="KineticJS">
<option value="124">KineticJS 4.0.5</option>
<option value="139">KineticJS 4.3.1</option>
</optgroup>
<optgroup label="Knockout.js">
<option value="104">Knockout.js 2.0.0</option>
<option value="117">Knockout.js 2.1.0</option>
<option value="122">Knockout.js 2.2.1</option>
<option value="163">Knockout.js 2.3.0</option>
<option value="172">Knockout.js 3.0.0</option>
<option value="388">Knockout.js 3.4.2</option>
</optgroup>
<optgroup label="Lo-Dash">
<option value="167">Lo-Dash 2.2.1</option>
</optgroup>
<optgroup label="Minified">
<option value="164">Minified 1.0 beta1</option>
</optgroup>
<optgroup label="MithrilJS">
<option value="273">MithrilJS 0.2.0</option>
<option value="390">MithrilJS 1.1.6</option>
</optgroup>
<optgroup label="Mootools">
<option value="59">Mootools (nightly)</option>
<option value="62">Mootools 1.3.2</option>
<option value="63">Mootools 1.3.2 (compat)</option>
<option value="95">Mootools 1.4.5</option>
<option value="96">Mootools 1.4.5 (compat)</option>
<option value="216">Mootools 1.5.1</option>
<option value="263">Mootools 1.5.2</option>
<option value="329">Mootools 1.5.2 (compat)</option>
<option value="325">Mootools 1.6.0</option>
<option value="327">Mootools 1.6.0 (compat)</option>
</optgroup>
<optgroup label="No-Library">
<option value="11" selected="">No-Library (pure JS)</option>
</optgroup>
<optgroup label="OpenUI5">
<option value="271">OpenUI5 (latest, mobile)</option>
</optgroup>
<optgroup label="Paper.js">
<option value="158">Paper.js 0.22</option>
</optgroup>
<optgroup label="Pixi">
<option value="315">Pixi 3.0.11</option>
<option value="331">Pixi 4.0.0</option>
</optgroup>
<optgroup label="Processing.js">
<option value="67">Processing.js 1.2.3</option>
<option value="81">Processing.js 1.3.6</option>
<option value="135">Processing.js 1.4.1</option>
<option value="206">Processing.js 1.4.7</option>
</optgroup>
<optgroup label="Prototype">
<option value="4">Prototype 1.6.1.0</option>
<option value="265">Prototype 1.7.3</option>
</optgroup>
<optgroup label="RactiveJS">
<option value="287">RactiveJS 0.7.3</option>
</optgroup>
<optgroup label="Raphael">
<option value="30">Raphael 1.4</option>
<option value="36">Raphael 1.5.2</option>
<option value="76">Raphael 2.1.0</option>
</optgroup>
<optgroup label="React">
<option value="159">React 0.3.2</option>
<option value="166">React 0.4.0</option>
<option value="184">React 0.8.0</option>
<option value="192">React 0.9.0</option>
<option value="285">React 0.14.3</option>
</optgroup>
<optgroup label="RightJS">
<option value="45">RightJS 2.1.1</option>
<option value="136">RightJS 2.3.1</option>
</optgroup>
<optgroup label="Riot">
<option value="382">Riot 3.7.4</option>
</optgroup>
<optgroup label="Shipyard">
<option value="99">Shipyard (nightly)</option>
<option value="105">Shipyard 0.2</option>
</optgroup>
<optgroup label="Thorax">
<option value="143">Thorax 2.0.0rc3</option>
<option value="174">Thorax 2.0.0rc6</option>
</optgroup>
<optgroup label="Three.js">
<option value="82">Three.js r54</option>
<option value="399">Three.js 105</option>
</optgroup>
<optgroup label="Underscore">
<option value="111">Underscore 1.3.3</option>
<option value="133">Underscore 1.4.3</option>
<option value="160">Underscore 1.4.4</option>
<option value="267">Underscore 1.8.3</option>
</optgroup>
<optgroup label="Vue">
<option value="236">Vue (edge)</option>
<option value="289">Vue 1.0.12</option>
<option value="344">Vue 2.2.1</option>
</optgroup>
<optgroup label="WebApp Install">
<option value="142">WebApp Install 0.1</option>
</optgroup>
<optgroup label="XTK">
<option value="106">XTK edge</option>
</optgroup>
<optgroup label="YUI">
<option value="9">YUI 2.8.0r4</option>
<option value="102">YUI 3.5.0</option>
<option value="118">YUI 3.6.0</option>
<option value="123">YUI 3.7.3</option>
<option value="130">YUI 3.8.0</option>
<option value="153">YUI 3.10.1</option>
<option value="182">YUI 3.14.0</option>
<option value="204">YUI 3.16.0</option>
<option value="230">YUI 3.17.2</option>
</optgroup>
<optgroup label="Zepto">
<option value="90">Zepto 1.0rc1</option>
</optgroup>
<optgroup label="jQuery">
<option value="46">jQuery (edge)</option>
<option value="131">jQuery 1.9.1</option>
<option value="248">jQuery 2.1.3</option>
<option value="319">jQuery 2.2.4</option>
<option value="376">jQuery 3.2.1</option>
<option value="384">jQuery 3.3.1</option>
<option value="401">jQuery 3.4.1</option>
</optgroup>
<optgroup label="jQuery Slim">
<option value="407">jQuery Slim 3.2.1</option>
<option value="405">jQuery Slim 3.3.1</option>
<option value="403">jQuery Slim 3.4.1</option>
</optgroup>
<optgroup label="jTypes">
<option value="165">jTypes 2.1.0</option>
</optgroup>
<optgroup label="qooxdoo">
<option value="127">qooxdoo 2.0.3</option>
<option value="126">qooxdoo 2.1</option>
</optgroup>
<optgroup label="svg.js">
<option value="395">svg.js 2.6.5</option>
<option value="393">svg.js 2.7.1</option>
<option value="391">svg.js 3.0.5</option>
</optgroup>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div>
<ul id="js_dependency">
</ul>
</div>
<h3>Framework <script> attribute</h3>
<p class="libraryTagAttributes">
<label>
<input id="id_js_lib_option" type="text" name="js_lib_option" maxlength="255" placeholder="ie. data-type=""" value="">
</label>
</p>
</div> <!-- /windowSettings -->
<div class="windowSettings css hidden" data-panel="css" data-popover-ref="css">
<h3>Language</h3>
<div class="selectCont">
<select name="panel_css" class="panelChoice" id="panel_css_choice" data-panel_id="id_code_css" data-panel="css">
<option data-mime-type="text/css" value="0" selected="">CSS</option>
<option data-mime-type="text/x-scss" value="1">SCSS</option>
<option data-mime-type="text/x-sass" value="2">SASS</option>
<option data-mime-type="text/css" value="4">PostCSS (Stage 0+)</option>
<option data-mime-type="text/css" value="5">PostCSS (Stage 3+)</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div> <!-- /selectCont -->
<h3>Options</h3>
<p id="normalize_check">
<label class="checkboxCont">
<input type="checkbox" name="normalize_css" id="id_normalize_css" value="1">
<span class="checkbox"><i class="bts bt-check"></i></span> Normalized CSS </label>
</p>
</div> <!-- /windowSettings -->
<div id="problem-banner"></div>
</div> <!-- #content -->
<ul id="flash-messages" class="draft hidden">
<li class="warning">
<!--?xml version="1.0" encoding="UTF-8"?--><svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<polyline points="23,4 23,10 17,10"></polyline>
<path
d="M20.49 15l8.16053e-09-2.30983e-08c-1.65578 4.68667-6.79735 7.1437-11.484 5.48792 -4.68667-1.65578-7.1437-6.79735-5.48792-11.484 1.65578-4.68667 6.79735-7.1437 11.484-5.48792 1.26714.447675 2.41794 1.17344 3.36792 2.12402l4.63 4.36">
</path>
</g>
</svg> This fiddle has previously unsaved changes. <span class="flashActions">
<a id="apply-draft" href="#">Apply changes</a>
<a id="discard-draft" href="#">Discard</a>
</span>
</li>
</ul>
</main> <!-- #layout-container -->
<div id="loader">
<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 33">
<g stroke-width="1" fill="none" fill-rule="evenodd">
<path class="cloud"
d="M45,22.7331459 C45,19.1499462 42.7950446,16.079593 39.6628004,14.7835315 C39.6774469,14.5246474 39.7003932,14.2674038 39.7003932,14.0035978 C39.7003932,6.82243304 33.8412885,1 26.611593,1 C21.3985635,1 16.9102123,4.03409627 14.8051788,8.41527616 C13.7828502,7.62878013 12.503719,7.15547161 11.1134367,7.15547161 C7.77825654,7.15547161 5.07450503,9.84159999 5.07450503,13.1544315 C5.07450503,13.7760488 5.16938207,14.3779791 5.3477444,14.9418479 C2.74863428,16.4787471 1,19.2867709 1,22.5105187 C1,27.3287502 4.89630545,31.2367856 9.72803666,31.31094 L36.3341301,31.3109406 C41.1201312,31.3406346 45,27.4870665 45,22.7331459 L45,22.7331459 Z"
stroke-linejoin="round"></path>
<path class="loop" d="M25.3570852,17.8208603
C26.0154526,17.1207706 27.1652748,15.6666667 29.5167986,15.6666667
C32.1278053,15.6666667 34.2444444,17.6366138 34.2444444,20.0666667
C34.2444444,22.4967196 32.1278053,24.4666667 29.5167986,24.4666667
C26.9249697,24.4666667 24.5595344,21.7145959 23.4888889,20.543316
C21.4404656,18.4187374 19.0750303,15.6666667 16.4832014,15.6666667
C13.8721947,15.6666667 11.7555556,17.6366138 11.7555556,20.0666667
C11.7555556,22.4967196 13.8721947,24.4666667 16.4832014,24.4666667
C18.8347252,24.4666667 19.9845474,23.0125628 20.6429148,22.312473
L25.3570852,17.8208603" stroke-linecap="round"></path>
</g>
</svg>
<span class="shadow"></span>
</div>
</form>Text Content
Close
START WITH A BOILERPLATE:
* jQuery
* Vue
* React
* React + JSX
* Preact
* TypeScript
* CoffeeScript
* SCSS
* CSS Grid
* Bootstrap
* PostCSS
Show boilerplate bar less often?
LINKS:
* 👍🏻 Roadmap (vote for features)
* 🐞 Bug tracker
* 📙 Docs
* 🎛 Service status
Support JSFiddle and get extra features Groups, Private fiddles, Ad-free & more
JSFIDDLE IS FOR:
* Demos for docs
* Bug reporting (test-case) for Github Issues
* Presenting code answers on Stack Overflow
* Live code collaboration
* Code snippets hosting
* ... or just your humble code playground ✌🏻
JSFIDDLE
Run
Save
Fork
Set as base
Collaborate
Embed
* Vote for features
* Settings
* Sign in
EDITOR LAYOUT
Classic Columns Bottom results Right results Tabs (columns) Tabs (rows)
CONSOLE
Console in the editor (beta)
Clear console on run
GENERAL
Line numbers
Wrap lines
Indent with tabs
Code hinting (autocomplete) (beta)
Indent size:
2 spaces 3 spaces 4 spaces
Key map:
Default Sublime Text EMACS
Font size:
Default Big Bigger Jabba
BEHAVIOR
Auto-run code
Only auto-run code that validates
Auto-save code (bumps the version)
Auto-close HTML tags
Auto-close brackets
Live code validation
Highlight matching tags
BOILERPLATES
Show boilerplates bar less often
Loading ...
PLANNED FEATURES BY VOTES
* Publish fiddles as mini-websites
* Save fiddles as templates
* Download a zipped fiddle
Save anonymous (public) fiddle?
- Be sure not to include personal data
- Do not include copyrighted material
Log in if you'd like to delete this fiddle in the future.
Save
Fork anonymous (public) fiddle?
- Be sure not to include personal data
- Do not include copyrighted material
Log in if you'd like to delete this fiddle in the future.
Fork
TABS:
JavaScript HTML CSS Result
VISUAL:
Light Dark
EMBED SNIPPET PREFER IFRAME?:
<script async src="{embedSrc}"></script>
<iframe width="100%" height="300" src="{embedSrc}" allowfullscreen
allowpaymentrequest frameborder="0"></iframe>
No autoresizing to fit the code
Render blocking of the parent page
jun88mxcom
*
FIDDLE META
Private fiddle Extra
GROUPS EXTRA
You have no groups
RESOURCES URL CDNJS 0
* Paste a direct CSS/JS URL
* Type a library name to fetch from CDNJS
ASYNC REQUESTS
/echo simulates Async calls:
JSON: /echo/json/
JSONP: //jsfiddle.net/echo/jsonp/
HTML: /echo/html/
XML: /echo/xml/
See docs for more info.
OTHER (LINKS, LICENSE)
Created and maintained by Piotr and Oskar.
Hosted on DigitalOcean
All code belongs to the poster and no license is enforced. JSFiddle or its
authors are not responsible or liable for any loss or damage of any kind during
the usage of provided code.
Links
Bug tracker
About
Docs
Service status
SUPPORT THE DEVELOPMENT OF JSFIDDLE AND GET EXTRA FEATURES ✌🏻
Become a supporter
EXIF DATA VIEWER: TURN JPG FILES INTO LIGHTROOM PRESETS.
HTML Tidy
xxxxxxxxxx
25
1
<a href="https://jun88mx.com/">Jun88</a> đang dẫn đầu trong làng giải trí cá cược tại Việt Nam và châu Á. Nhà cái Jun88 không ngừng đổi mới hình ảnh, diện mạo, đặc biệt là kho tàng game cực kỳ chất lượng có thể kể đến như cá cược bóng đá, casino, xổ số, đá gà,.. kèm theo nhiều khuyến mãi siêu khủng. Jun 88 cam kết mang đến cho người chơi trãi nghiệm mượt mà, giao diện hiện đại, nạp rút nhanh chóng. Đăng ký ngay hôm nay nhận 88k.
2
Thông tin liên hệ:
3
Địa chỉ: 2 Đ. Số 2, Thảo Điền, Quận 2, Thành phố Hồ Chí Minh
4
Phone: 098319299
5
Email: jun88mxcom@gmail.com
6
Website: <a href="https://jun88mx.com/">https://jun88mx.com/</a>
7
#jun88 #bóng đá jun88 #nhà cái jun88 #trang chủ jun88 #jun88mx #jun88com #jun88mxcom #đăng ký jun88 #đăng nhập jun88 #jun 88
8
Social:
9
<a href="https://twitter.com/jun88mxcom">https://twitter.com/jun88mxcom</a>
10
<a href="https://www.youtube.com/@jun88mxcom">https://www.youtube.com/@jun88mxcom</a>
11
<a href="https://www.linkedin.com/in/jun88mxcom/">https://www.linkedin.com/in/jun88mxcom/</a>
12
<a href="https://glose.com/u/jun88mxcom">https://glose.com/u/jun88mxcom</a>
13
<a href="https://rapidapi.com/jun88mxcom/api/jun88mx">https://rapidapi.com/jun88mxcom/api/jun88mx</a>
14
<a href="https://www.diigo.com/profile/jun88mxcom">https://www.diigo.com/profile/jun88mxcom</a>
15
<a href="https://www.pearltrees.com/jun88mxcom/item572592192">https://www.pearltrees.com/jun88mxcom/item572592192</a>
16
<a href="https://www.deviantart.com/jun88mxcom">https://www.deviantart.com/jun88mxcom</a>
17
<a href="https://www.flickr.com/people/jun88mxcom/">https://www.flickr.com/people/jun88mxcom/</a>
18
<a href="https://www.reddit.com/user/jun88mxcom/">https://www.reddit.com/user/jun88mxcom/</a>
19
<a href="https://www.pinterest.com/jun88mxcom/">https://www.pinterest.com/jun88mxcom/</a>
20
<a href="https://www.gta5-mods.com/users/jun88mxcom">https://www.gta5-mods.com/users/jun88mxcom</a>
21
<a href="https://www.plurk.com/jun88mxcom">https://www.plurk.com/jun88mxcom</a>
22
<a href="https://www.instapaper.com/p/jun88mxcom">https://www.instapaper.com/p/jun88mxcom</a>
23
<a href="https://band.us/band/93710326/intro">https://band.us/band/93710326/intro</a>
24
<a href="https://wakelet.com/@jun88mxcom">https://wakelet.com/@jun88mxcom</a>
25
JavaScript + No-Library (pure JS) Tidy
xxxxxxxxxx
1
1
CSS Tidy
xxxxxxxxxx
1
1
Result 695px
CONSOLE (BETA)
Clear console Minimize
0 0 0 0
* JSFiddle Console (beta). Turn on/off in Editor settings.
* ☁️ "Running fiddle"
LANGUAGE
HTML HAML
DOCTYPE
XHTML 1.0 Strict XHTML 1.0 Transitional HTML 5 HTML 4.01 Strict HTML 4.01
Transitional HTML 4.01 Frameset
BODY TAG
LANGUAGE
JavaScript CoffeeScript JavaScript 1.7 Babel + JSX TypeScript CoffeeScript 2 Vue
React Preact
FRAMEWORKS & EXTENSIONS
Alpine.js 2.1.2 AngularJS 1.1.1 AngularJS 1.2.1 AngularJS 1.4.8 AngularJS
2.0.0-alpha.47 Bonsai 0.4.1 Brick edge CreateJS 2013.09.25 CreateJS 2015.05.21
D3 3.x D3 4.13.0 D3 5.9.2 Dojo (nightly) Dojo 1.4.8 Dojo 1.5.6 Dojo 1.6.5 Dojo
1.7.12 Dojo 1.8.14 Dojo 1.9.11 Dojo 1.10.8 Dojo 1.11.4 Dojo 1.12.2 Ember
(latest) Enyo (nightly) Enyo 2.0.1 Enyo 2.1 Enyo 2.2.0 Enyo 2.4.0 Enyo 2.5.1
Enyo 2.7.0 ExtJS 3.1.0 ExtJS 3.4.0 ExtJS 4.1.0 ExtJS 4.1.1 ExtJS 4.2.0 ExtJS
5.0.0 ExtJS 5.1.0 ExtJS 6.2.0 FabricJS 1.5.0 FabricJS 1.7.7 FabricJS 1.7.15
FabricJS 1.7.20 Inferno 1.0.0-beta9 JSBlocks (edge) KineticJS 4.0.5 KineticJS
4.3.1 Knockout.js 2.0.0 Knockout.js 2.1.0 Knockout.js 2.2.1 Knockout.js 2.3.0
Knockout.js 3.0.0 Knockout.js 3.4.2 Lo-Dash 2.2.1 Minified 1.0 beta1 MithrilJS
0.2.0 MithrilJS 1.1.6 Mootools (nightly) Mootools 1.3.2 Mootools 1.3.2 (compat)
Mootools 1.4.5 Mootools 1.4.5 (compat) Mootools 1.5.1 Mootools 1.5.2 Mootools
1.5.2 (compat) Mootools 1.6.0 Mootools 1.6.0 (compat) No-Library (pure JS)
OpenUI5 (latest, mobile) Paper.js 0.22 Pixi 3.0.11 Pixi 4.0.0 Processing.js
1.2.3 Processing.js 1.3.6 Processing.js 1.4.1 Processing.js 1.4.7 Prototype
1.6.1.0 Prototype 1.7.3 RactiveJS 0.7.3 Raphael 1.4 Raphael 1.5.2 Raphael 2.1.0
React 0.3.2 React 0.4.0 React 0.8.0 React 0.9.0 React 0.14.3 RightJS 2.1.1
RightJS 2.3.1 Riot 3.7.4 Shipyard (nightly) Shipyard 0.2 Thorax 2.0.0rc3 Thorax
2.0.0rc6 Three.js r54 Three.js 105 Underscore 1.3.3 Underscore 1.4.3 Underscore
1.4.4 Underscore 1.8.3 Vue (edge) Vue 1.0.12 Vue 2.2.1 WebApp Install 0.1 XTK
edge YUI 2.8.0r4 YUI 3.5.0 YUI 3.6.0 YUI 3.7.3 YUI 3.8.0 YUI 3.10.1 YUI 3.14.0
YUI 3.16.0 YUI 3.17.2 Zepto 1.0rc1 jQuery (edge) jQuery 1.9.1 jQuery 2.1.3
jQuery 2.2.4 jQuery 3.2.1 jQuery 3.3.1 jQuery 3.4.1 jQuery Slim 3.2.1 jQuery
Slim 3.3.1 jQuery Slim 3.4.1 jTypes 2.1.0 qooxdoo 2.0.3 qooxdoo 2.1 svg.js 2.6.5
svg.js 2.7.1 svg.js 3.0.5
FRAMEWORK <SCRIPT> ATTRIBUTE
LANGUAGE
CSS SCSS SASS PostCSS (Stage 0+) PostCSS (Stage 3+)
OPTIONS
Normalized CSS
* This fiddle has previously unsaved changes. Apply changes Discard