jsfiddle.net
Open in
urlscan Pro
45.55.126.88
Public Scan
URL:
https://jsfiddle.net/jzkr40d1/
Submission Tags: falconsandbox
Submission: On December 16 via api from US — Scanned from DE
Submission Tags: falconsandbox
Submission: On December 16 via api from US — Scanned from DE
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="DD8h45JY5n8J8RypxLyT671h5IKoSSGOmCJr5lrB4SheoPqdzD1ar6ack23tDxZTu+fDJla0slm1SunfOG03fg==">
<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 -->
<div id="app-updates" class="">
<div class="bodyCont">
<div class="body"><strong class="badge">Change</strong> Fiddle listing shows latest version<p>The fiddle listings (Public, Private, Titled, etc) will now display latest versions instead of the ones saved as Base versions - this was
causing more confusion than good, so we decided to change this long-standing behavior.</p>
<div class="updateActions"><a href="" class="previous">Previous update</a><a href="" class="dismiss">Got it</a></div>
</div>
</div>
</div>
<script>
var updates = [{
id: 24,
badge: "Change",
title: "Fiddle listing shows latest version",
body: "The fiddle listings (Public, Private, Titled, etc) will now display latest versions instead of the ones saved as Base versions - this was causing more confusion than good, so we decided to change this long-standing behavior."
}, {
id: 23,
badge: "Update",
title: "Evaluate code into the console",
body: "Custom Console beta is getting more stable and feature-rich. Just added the ability to evaluate code in the console.",
highlight: {
target: "#console"
}
}, {
id: 22,
badge: "New",
title: "Console in the editor",
body: "Introducing the first beta of the editor console - it's going to show you logs, warnings, errors without the need of opening full devtools.<br><br> Console is avaialble for all users during beta, after that it'll be available for JSFiddle supporters.",
highlight: {
target: "*[data-popover-trigger='editor-settings']"
}
}, {
id: 21,
badge: "New",
title: "More user's social links (Dev.to, SO...)",
body: "You can add more of your social links `Settings / Social Media`, for Dev.to, Stack Overflow and Medium. These will be displayed on the profile section in Editor's sidebar and your public profile.",
}, {
id: 20,
badge: "Update",
title: "Refactored Unsaved Drafts feature",
body: "Unsaved drafts feature is completely rewritten with 100% fewer bugs and 10x more maintainable codebase – as the author of the previous one, I had hard times figuring out what it does 🥴",
}]
var UpdatesWidget = function(options) {
if (updates.length <= 0) return false
var selectedItem = 0
var currentUpdate = updates[selectedItem]
var lastSeenId = window.localStorage.getItem("last_seen_update")
var template = {}
var element = {
updates: document.querySelector("#app-updates"),
highlighter: document.createElement("div")
}
// generic template for the widget
template.title = "<strong class='badge'>#{badge}</strong> #{title}"
template.body = "<p>#{body}</p>"
template.actions = "<div class='updateActions'><a href='' class='previous'>Previous update</a><a href='' class='dismiss'>Got it</a></div>"
template.full = template.title + template.body + template.actions
template.body = "<div class='body'>" + template.full + "</div>"
template.update = "<div class='bodyCont'>" + template.body + "</div>"
// inject the highlighter
element.highlighter.id = "app-updates-highlighter"
document.body.appendChild(element.highlighter)
var dismissUpdate = function(event) {
event.preventDefault()
event.stopPropagation()
window.localStorage.setItem("last_seen_update", currentUpdate.id)
element.updates.classList.add("hidden")
Track.ui("Update dismissed")
}
var showHighlighter = function(event) {
event.preventDefault()
event.stopPropagation()
var target = document.querySelector(currentUpdate.highlight.target)
var rect = target.getBoundingClientRect()
var visible = !element.updates.classList.contains("hidden")
element.highlighter.style.top = rect.top + "px"
element.highlighter.style.left = rect.left + "px"
element.highlighter.style.width = rect.width + "px"
element.highlighter.style.height = rect.height + "px"
// only highlight before updater is dismissed
if (visible) {
element.highlighter.classList.add("show")
}
}
var hideHighlighter = function(event) {
element.highlighter.classList.remove("show")
}
var setUpdate = function(event) {
if (event) {
event.preventDefault()
event.stopPropagation()
selectedItem = selectedItem + 1
} else {
selectedItem = 0
}
currentUpdate = updates[selectedItem]
// update the title
var update = template.update.replace("#{badge}", currentUpdate.badge).replace("#{title}", currentUpdate.title).replace("#{body}", currentUpdate.body)
element.updates.innerHTML = update
// dismiss update and save ID for future reference
var dismiss = document.querySelector(".updateActions .dismiss")
dismiss.addEventListener("click", dismissUpdate)
var previous = document.querySelector(".updateActions .previous")
previous.addEventListener("click", setUpdate)
}
setUpdate()
// manage highlighter
if (currentUpdate.highlight) {
element.updates.addEventListener("mouseover", showHighlighter)
element.updates.addEventListener("mouseout", hideHighlighter)
}
// remove hidden class if user hasn't seen the latest update
if (parseInt(lastSeenId) !== currentUpdate.id) {
element.updates.classList.remove("hidden")
}
}
window.addEventListener("DOMContentLoaded", UpdatesWidget)
</script>
</nav>
<ul class="actionCont dropdown right">
<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>
<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="hidden">
</div>
<div class="sidebarItem opened">
<h3 class="toggler" title="Posted on 08 11 2022"> Fiddle meta </h3>
<div class="body">
<p>
<input type="text" name="title" maxlength="255" value="Bournemouth v Everton" placeholder="Untitled fiddle">
</p>
<p>
<textarea rows="10" cols="40" name="description" placeholder="No description">Bournemouth v Everton</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-m7-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?9c307ec363c36b1d0dfbf2ee64220cc5ab9c45f2"></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="http://twitter.com/zalun" target="_blank" rel="noopener">Piotr</a> and
<a title="UX and UI Designer" href="http://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://trello.com/b/LakLkQBW/jsfiddle-roadmap" target="_blank" rel="noopener">Roadmap</a> (vote for features)<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>
<div class="sidebarItem">
<h3 class="toggler"> Removal request </h3>
<div class="body">
<ul id="manage-fiddle">
<li>
<a class="delete" href="https://airtable.com/shrm1ACZfg5PsTaUa?prefill_URL=https://jsfiddle.net/jzkr40d1/" target="_blank">
<svg xmlns="http://www.w3.org/2000/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-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line>
</svg>Submit a removal request
</a>
</li>
</ul>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
</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 async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIEKQ7&placement=jsfiddlenet" id="_carbonads_js"></script>
<div id="carbonads"><span><span
class="carbon-wrap"><a href="https://srv.carbonads.net/ads/click/x/GTND42JUC67D4K7MCAALYKQNCAYI4K7MCWSDEZ3JCYSIT2JYCVBI55QKC6BIK2JYFT7DP53WC6BIL5QMC6AIV5QMHEYIK27JCV7DT53ECTNCYBZ52K?segment=placement:jsfiddlenet;" class="carbon-img" target="_blank" rel="noopener sponsored"><img src="https://cdn4.buysellads.net/uu/1/122503/1662684299-MC_Carbon_Logo_260x200.png" alt="ads via Carbon" border="0" height="100" width="130" style="max-width: 130px;"></a><a href="https://srv.carbonads.net/ads/click/x/GTND42JUC67D4K7MCAALYKQNCAYI4K7MCWSDEZ3JCYSIT2JYCVBI55QKC6BIK2JYFT7DP53WC6BIL5QMC6AIV5QMHEYIK27JCV7DT53ECTNCYBZ52K?segment=placement:jsfiddlenet;" class="carbon-text" target="_blank" rel="noopener sponsored">Start targeting valuable customers today.</a></span><a href="http://carbonads.net/?utm_source=jsfiddlenet&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon" class="carbon-poweredby" target="_blank" rel="noopener sponsored">ads via Carbon</a><img
src="https://ad.doubleclick.net/ddm/trackimp/N1224323.3091281BUYSELLADS/B28192607.344931076;dc_trk_aid=536381175;dc_trk_cid=177016733;ord=167122260;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd=?" border="0" height="1"
width="1" alt="ads via Carbon" style="display: none;"><img src="https://pixel.adsafeprotected.com/rfw/st/1106181/65489744/skeleton.gif?gdpr=$&gdpr_consent=$&gdpr_pd=$&network=BUYSELLADS" border="0" height="1" width="1"
alt="ads via Carbon" style="display: none;"></span></div>
</div>
<div id="support-jsfiddle">
<h3>Support the development of JSFiddle and get extra features ✌🏻</h3>
<!-- <p>We'll always be free, but for our loyal users we also have some additional stuff:</p> -->
<a href="/extra/">Become a supporter</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">
<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; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px; width: 18px; pointer-events: none;">
<div style="min-width: 1px; height: 700px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; pointer-events: none;">
<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: 680px; 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>40</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" 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" 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 class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" 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;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" 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;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" 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;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" 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;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">6</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" 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;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" 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;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">9</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">10</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">11</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">12</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">13</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">14</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">15</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">16</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">17</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">18</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">19</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">20</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">21</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">22</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">23</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">24</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" 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 class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">26</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">27</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">28</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">29</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">30</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">31</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">32</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">33</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">34</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">35</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">36</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">37</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">38</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">39</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">40</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">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 680px;"></div>
<div class="CodeMirror-gutters" style="height: 730px; 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">
<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; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; pointer-events: none;">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; pointer-events: none;">
<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="">
<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" 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">
<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; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; pointer-events: none;">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; pointer-events: none;">
<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" 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/jzkr40d1/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>
<div id="no-support">IE is no longer supported 📠</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
Change Fiddle listing shows latest version
The fiddle listings (Public, Private, Titled, etc) will now display latest
versions instead of the ones saved as Base versions - this was causing more
confusion than good, so we decided to change this long-standing behavior.
Previous updateGot it
* 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
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
FIDDLE META
Bournemouth v Everton
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
Roadmap (vote for features)
About
Docs
Service status
REMOVAL REQUEST
* Submit a removal request
Start targeting valuable customers today.ads via Carbon
SUPPORT THE DEVELOPMENT OF JSFIDDLE AND GET EXTRA FEATURES ✌🏻
Become a supporter
HTML Tidy
xxxxxxxxxx
40
1
<br>
2
3
<br>
4
5
<br>
6
7
<br>
8
9
<br>
10
11
<br>
12
13
<br>
14
15
<br>
16
17
<br>
18
19
<br>
20
21
<br>
22
23
<br>
24
25
<br>
26
27
<br>
28
29
<br>
30
31
<br>
32
33
<br>
34
35
<br>
36
37
<br>
38
39
<br>
40
<br>
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
IE is no longer supported 📠