Skip to content

Instantly share code, notes, and snippets.

@esironal

esironal/filddle.html

Created October 2, 2018 18:18
Show Gist options
  • Save esironal/cd047127a2c307ac0ab530ef852c76e6 to your computer and use it in GitHub Desktop.
Save esironal/cd047127a2c307ac0ab530ef852c76e6 to your computer and use it in GitHub Desktop.
Download ZIP
jsfidle source from browser copy
Raw
filddle.html
<html class="gr__jsfiddle_net" slick-uniqueid="3"><head>
<meta charset="utf-8">
<meta name="description" content="Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.">
<meta name="keywords" content="online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor">
<meta name="author" content="JSFiddle">
<meta name="copyright" content="share alike">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0084ff">
<script src="/js/codemirror/mode/xml/xml.js"></script><script src="/js/codemirror/mode/css/css.js"></script><script src="/js/codemirror/mode/htmlmixed/htmlmixed.js"></script><script src="/js/codemirror/mode/javascript/javascript.js"></script><script async="" src="//jsfiddle.usesfathom.com/tracker.js" id="fathom-script"></script><script>
window.NEXT_APP = true;
var EditorConfig = {
shell: false,
paths: {
favorite: "/_make_favourite/",
media: "/mooshellmedia/",
addResource: "/_add_external_resource/",
render: "//fiddle.jshell.net/lquixada/3ypqgacp/show/"
},
values: {
html: "<h3>cross-fetch playground<\/h3>\n\n<p>\nThis playground is only useful if you\'re accessing this page with a browser with no native fetch support. If that\'s the case, play with different settings like wrong urls, cross-domain and text requests. Check out the <a href=\"https://github.github.io/fetch/\" target=\"_blank\">Github\'s fetch<\/a> api page for more options.\n<\/p>\n\n<p>\n Is the fetch polyfill being used right now?\n <strong>\n <script>\n document.write(fetch.polyfill? \'Yes.\':\'No.\');\n <\/script>\n <\/strong>\n<\/p>\n\n<p>\n<small>\nNote: <a href=\"https://github.com/stefanpenner/es6-promise\" target=\"_blank\">es6-promise<\/a> polyfill has been added in order to proper work in Internet Explorer.\n<\/small>\n<\/p>\n\n\n<span>response<\/span>\n<pre id=\"content\">\n loading..\n<\/pre>",
js: "var content = document.getElementById(\'content\');\n\nfetch(\'//api.github.com/users/lquixada\')\n .then(function (res) {\n if (res.status >= 400) {\n throw new Error(\"Bad response from server\");\n }\n return res.json();\n })\n .then(function (user) {\n content.innerHTML = JSON.stringify(user, null, \' \');\n })\n .catch(function (err) {\n content.innerHTML = err.message;\n });",
css: "body {\n font-family: Helvetica, Arial, sans-serif;\n font-size: 14px;\n}\n\nspan {\n display: inline-block;\n padding: 5px 10px;\n color: #fff;\n font-size: 12px;\n background-color: #5389d6;\n border-radius: 4px 4px 0 0;\n}\n\npre {\n margin: 0;\n padding: 10px;\n font-size: 12px;\n background-color: #c7deff;\n border: 2px solid #5389d6;\n border-radius: 0 3px 3px 3px;\n overflow-x: scroll;\n}"
},
fiddle: {
id: "334673606",
slug: "3ypqgacp",
boilerplate: false,
// TODO: Missing
// {% if preload_resources %}
// resources: {{ preload_resources|safe }}
// {% else %}
// resources: []
// {% endif %}
},
panels: {
html: "html",
js: "javascript",
css: "css"
},
user: {
id: "None",
username: ""
},
showHelloBar: false,
currentUser: false
}
</script>
<script async="" src="//www.google-analytics.com/analytics.js"></script>
<style id="skeleton-theme-inline">*,body,button,html,input,select,textarea{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:#39464e;text-decoration:none}a:hover{text-decoration:underline}input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}select{cursor:pointer}blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}abbr,acronym{border:0}::-webkit-input-placeholder{color:#62666c}:-moz-placeholder,::-moz-placeholder{color:#62666c}:-ms-input-placeholder{color:#62666c}.icon{stroke:inherit}a:active,a:focus,button::-moz-focus-inner,button:focus,input[type=button]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,select::-moz-focus-inner{outline:none!important}select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}a{outline:none}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background:#20262e;padding:0;margin:0;position:relative;font-size:14px;color:#39464e}#progressbar{height:3px;position:absolute;top:55px;left:0;right:0}header{height:60px;background:#1c2128;box-shadow:0 0 5px rgba(28,33,40,0);position:relative;z-index:100;width:100vw}header .title{position:absolute;top:-9000em}header h1{position:absolute;top:14px;left:10px;z-index:800;transition:all .15s}header h1 a{display:block}header h1 svg{transition:all .15s;position:relative;height:33px;width:46px;stroke:#0084ff}#app-updates{float:left;position:relative;width:20px}#app-updates .bodyCont{opacity:1;transition:all .1s;transform:translateY(0);margin-left:10px;overflow:hidden;height:60px;width:300px}#app-updates .body{color:#fbfbfb;transition:all .1s;background:transparent;padding:14px;border-radius:3px;line-height:1.45em;font-size:13px;position:relative;top:6px;width:300px}#app-updates strong{font-weight:700}#app-updates h3{text-overflow:ellipsis;width:100%;white-space:nowrap;overflow:hidden}#app-updates p{margin-top:10px}#app-updates .updateActions,#app-updates p{pointer-events:none;opacity:0}#app-updates .updateActions{margin-top:12px;text-align:right}#app-updates .updateActions a{color:#8e9195;font-size:12px;padding:3px 6px;border:1px solid transparent;border-radius:4px}#app-updates .updateActions a:hover{border:1px solid hsla(214,3%,57%,.2);text-decoration:none}#app-updates .badge{background:#64b448;color:#fff;font-size:11px;padding:3px 6px;border-radius:3px;margin-right:5px;font-weight:400}#app-updates.hidden .bodyCont,#app-updates:hover .bodyCont{overflow:visible}#app-updates.hidden .body,#app-updates:hover .body{background:#fff;color:#20262e;box-shadow:0 0 1px rgba(57,70,78,.15),0 20px 55px -8px rgba(57,70,78,.25)}#app-updates.hidden h3,#app-updates:hover h3{text-overflow:inherit;white-space:normal;overflow:auto;font-weight:700}#app-updates.hidden .updateActions,#app-updates.hidden p,#app-updates:hover .updateActions,#app-updates:hover p{pointer-events:auto;opacity:1}#app-updates.hidden{transform:translateY(20px)}#app-updates-highlighter,#app-updates.hidden,#app-updates.hidden .updateActions,#app-updates.hidden p{pointer-events:none;opacity:0}#app-updates-highlighter{position:absolute;border:3px solid #64b448;border-radius:5px;transition:all .1s;transform:scale(1.05);z-index:1000}#app-updates-highlighter.show{opacity:1;transform:scale(1)}#content{position:relative;margin-left:210px}#sidebar{padding:0;margin:0;font-size:12px;width:210px;position:absolute;top:60px;bottom:0;left:0;border-right:1px solid #2d333b;background:#20262e;display:flex;flex-direction:column;z-index:20;color:#cfd0d2;box-shadow:0 0 0 rgba(0,0,0,.5)}#sidebar #s-cont{flex-grow:1;overflow:auto;opacity:0}#sidebar .userSidebar .avatar{font-size:14px;font-weight:bold;text-align:center}#sidebar .userSidebar .avatar a{color:#fbfbfb;display:block}#sidebar .userSidebar .avatar img{margin-bottom:10px;overflow:hidden;border-radius:100px}#sidebar .userSidebar .avatar .company{font-weight:normal;margin-top:6px;color:#8e9195;font-size:12px}#sidebar .userSidebar .userDetails{clear:both;padding-top:6px;color:#fbfbfb}#sidebar .userSidebar .userDetails a{color:#fbfbfb}#sidebar .userSidebar .userDetails li{margin-top:3px}#actions{height:60px;font-size:14px;position:relative;z-index:300;margin-left:70px;opacity:0}#actions svg{vertical-align:middle;position:relative;top:-1px;height:16px}#actions svg.rightIcon{margin-right:0;margin-left:6px}#actions .actionCont{float:left}#actions .right{float:right;margin-right:10px}#actions .actionItem{float:left;position:relative;margin-right:1px}#actions .actionItem.visible{display:block}#actions .actionItem.hidden{display:none}#actions .actionItem .aiButton,#actions .actionItem .aiButton span,#actions .dropdown .actionItem a.aiButton{height:59px}#actions .actionItem a.aiButton{display:block;outline:none;text-decoration:none;padding:0 8px;line-height:60px;color:#fbfbfb}#actions .actionItem a.aiButton.selected,#actions .actionItem a.aiButton:hover{border-bottom:1px solid #0084ff}#actions .actionItem a.aiButton.applyDraft{color:#f36e65}#actions #usermenu{position:relative;padding-left:52px}#actions #usermenu img{position:absolute;top:12px;left:10px;overflow:hidden;border-radius:100%}#actions .actionItem a.aiButton span{line-height:60px;margin-right:6px!important;font-size:.9em}#actions .noIcon a.aiButton span{padding:0 0 0 6px;margin-right:0}#actions .actionItem #mobile.aiButton span{margin-right:0}#actions .actionItem a.aiButton span.selected{color:#555;background:#fff}#actions .dropdown .dropdownCont li{line-height:26px}.dropdownCont{position:absolute;z-index:9000;opacity:1;transform:translateY(0);transition:opacity .12s,transform .12s;will-change:opacity,transform}.dropdownCont .dcWrapper{background-color:#fff;width:300px;padding:15px;margin:0;font-size:13px;box-shadow:0 0 1px rgba(57,70,78,.15),0 20px 55px -8px rgba(57,70,78,.25);border-radius:5px;max-height:calc(100vh - 100px);overflow:auto}.dropdownCont .dcWrapper.menu{width:200px;padding:12px 0}.dropdownCont .dcWrapper.menu li{line-height:22px;padding:0 15px 6px}.dropdownCont .dcWrapper.menu li a{color:#39464e;position:relative}.dropdownCont .dcWrapper.menu li.other{border-top:1px solid #ebeef0;padding:6px 15px 0}.dropdownCont .dcWrapper.menu li.other+.other{border-top:none}.dropdownCont .dcWrapper.menu li.other a{color:#abb9c2}.dropdownCont .dcWrapper:before{top:-11px;border-bottom:10px solid rgba(57,70,78,.15)}.dropdownCont .dcWrapper:after,.dropdownCont .dcWrapper:before{display:block;position:absolute;right:20px;vertical-align:middle;content:"";border-left:8px solid transparent;border-right:8px solid transparent;border-style:none double solid;width:0;height:0}.dropdownCont .dcWrapper:after{top:-10px;border-bottom:10px solid #fff}.dropdownCont.center .dcWrapper:after,.dropdownCont.center .dcWrapper:before{left:50%;margin-left:-4px}.dropdownCont.hidden{opacity:0;transform:translateY(10px);pointer-events:none}.twitterCont{padding:10px;display:block;border-top:1px solid #2d333b}#keep-us-running{color:#fff;padding:15px 10px;position:absolute;bottom:-100px;left:0;cursor:pointer;pointer-events:none;opacity:0;transition:all .3s}#keep-us-running.color_1{background:#0084ff}#keep-us-running.color_2{background:#9f78d7}#keep-us-running.color_3{background:#deae51}#keep-us-running.color_4{background:#64b448}#keep-us-running.color_5{background:#de7373}#keep-us-running p{font-size:13px;line-height:18px;margin-bottom:8px}#keep-us-running.show{pointer-events:auto;opacity:1;bottom:0}#sidebar #carbonads{text-align:center}#sidebar #carbonads .carbon-text{clear:both;display:block;padding:10px 0 0;color:#cfd0d2;font-size:12px;line-height:1.5em}#sidebar #carbonads .carbon-poweredby{display:block;color:#8e9195;font-size:.9em;padding:10px 0 0}#info-bar{background:#debf51;padding:12px;color:rgba(0,0,0,.7);position:relative}#info-bar a{text-decoration:underline;color:rgba(0,0,0,.7);font-weight:600}#info-bar .dismiss{color:rgba(0,0,0,.4);font-weight:400;font-size:13px;position:absolute;right:12px;text-decoration:none}#info-bar.hidden{display:none}#hello-bar{height:0;background:#0084ff;transition:height .15s;overflow:hidden;position:relative;will-change:height}#hello-bar .hbBody{box-sizing:border-box;height:100%;padding:20px 0 20px 150px;color:#fbfbfb;display:grid;grid-template-columns:minmax(200px,1.5fr) minmax(200px,1fr) minmax(200px,1fr);grid-gap:10px}#hello-bar .closeHb{position:absolute;top:65px;left:15px;font-size:13px}#hello-bar .closeHb svg{height:16px;vertical-align:middle}#hello-bar a{color:#fbfbfb}#hello-bar h3{font-weight:600;margin-bottom:15px}#hello-bar li{font-size:13px;line-height:1.42em}#hello-bar ul.boilerplates li{margin:0 10px 10px 0;float:left}#hello-bar ul.boilerplates a{display:block;padding:7px 9px;border-radius:4px;transition:all .15s;background:#fff;color:#20262e;box-shadow:0 4px 4px rgba(0,0,0,.1)}#hello-bar ul.boilerplates a:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 6px -2px rgba(0,0,0,.2)}body.fullyLoaded #actions,body.fullyLoaded #sidebar #s-cont{opacity:1}body.fullyLoaded #loader{display:none}body.fullyLoaded #loader .loader,body.fullyLoaded #loader .shadow{animation:none}#hello-bar{display:none}.windowSettings{pointer-events:none;opacity:0;will-change:opacity,transform}#loader{position:absolute;top:calc(50vh - 30px);left:calc(50% - 60px)}#loader .loader{width:120px;height:120px;z-index:100;animation:jump .8s ease-in infinite}#loader .loader path{stroke:#fff}#loader .loader .cloud{fill:#0084ff}#loader .shadow{position:absolute;z-index:-1;top:80px;left:0;display:block;border-radius:100%;height:20px;width:120px;background:#000;opacity:.3;animation:scale-shadow .8s ease-in infinite}@keyframes jump{0%{transform:translateY(0) scale(1.15,.8)}20%{transform:translateY(-35px) scaleY(1.1)}50%{transform:translateY(-50px) scale(1)}80%{transform:translateY(-35px) scale(1)}to{transform:translateY(0) scale(1.15,.8)}}@keyframes scale-shadow{0%{opacity:.3;transform:scale(1)}50%{opacity:.2;transform:scale(.5)}to{opacity:.3;transform:scale(1)}}</style>
<!-- <link id="skeleton-theme" rel="stylesheet" type="text/css" href="/css/dist-skeleton-dark.css?update_29_09_2018_1"> -->
<!--
<link rel="stylesheet" type="text/css" href="/css/light.css?update_29_09_2018_1">
-->
<!-- <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
var GA_LOCAL_STORAGE_KEY = 'ga:clientId';
if (window.localStorage) {
ga('create', 'UA-366077-13', {
'storage': 'none',
'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
});
ga(function(tracker) {
localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
});
ga('send', 'pageview', '/[user]/[fiddle]/'); // where `url_structure` is for example `/[user]/[fiddle]/[revision]/embedded/js,css/`
}
</script> -->
<!-- Fathom - simple website analytics -->
<script>
(function(f, a, t, h, o, m){
a[h]=a[h]||function(){
(a[h].q=a[h].q||[]).push(arguments)
};
o=f.createElement('script'),
m=f.getElementsByTagName('script')[0];
o.async=1; o.src=t; o.id='fathom-script';
m.parentNode.insertBefore(o,m)
})(document, window, '//jsfiddle.usesfathom.com/tracker.js', 'fathom');
fathom('trackPageview');
</script>
<!-- / Fathom -->
<link rel="icon" href="/img/favicon.png">
<title>cross-fetch playground - JSFiddle</title>
<script id="_carbonads_projs" type="text/javascript" src="//crbsrv.jsfiddle.net/ads/CKYIEKQ7.json?segment=placement:jsfiddlenet&amp;callback=_carbonads_go"></script></head>
<body data-skeleton-url="/css/dist-skeleton-dark.css?update_29_09_2018_1" data-gr-c-s-loaded="true" style="zoom: 1;" class="gridMode_grid_1 fullyLoaded">
<div id="hello-bar">
<a class="closeHb" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>Close
</a>
<div class="hbBody">
<section>
<h3>Start with a boilerplate:</h3>
<ul class="boilerplates">
<li><a href="/">Empty</a></li>
<li><a href="/boilerplate/jquery">jQuery</a></li>
<li><a href="/boilerplate/vue">Vue</a></li>
<li><a href="/boilerplate/react-jsx">React</a></li>
<li><a href="/boilerplate/react-jsx">React + JSX</a></li>
<li><a href="/boilerplate/preact">Preact</a></li>
<li><a href="/boilerplate/typescript">TypeScript</a></li>
<li><a href="/boilerplate/coffeescript">CoffeeScript</a></li>
<li><a href="/boilerplate/scss">SCSS</a></li>
<li><a href="/boilerplate/responsive-css-grid">CSS Grid (responsive)</a></li>
<li><a href="/boilerplate/bootstrap">Bootstrap</a></li>
</ul>
</section>
<section>
<h3>Links:</h3>
<ul>
<li>👍🏻 <a href="https://trello.com/b/LakLkQBW/jsfiddle-roadmap" target="_blank" rel="noopener">Roadmap</a> (vote for features)</li>
<li>🐞 <a href="https://github.com/jsfiddle/jsfiddle-issues/issues" target="_blank" rel="noopener">Bug tracker</a></li>
<li>☁️ <a href="https://jsfiddle.net/about" target="_blank" rel="noopener">About</a></li>
<li>🎛 <a href="http://status.jsfiddle.net" target="_blank" rel="noopener">Service status</a></li>
</ul>
</section>
<!-- <section>
<h3>Worth checking out:</h3>
<ul class="articles">
<li><a href="https://julian.is/article/css-grid-at-scale/?utm_source=jsfiddle&amp;utm_medium=editor" target="_blank">Adopting CSS Grid at scale</a> <span>via julian.is</span></li>
<li><a href="https://changelog.com/news/show-mdn-browser-compatibility-data-on-the-command-line-NRR2/?utm_source=jsfiddle&amp;utm_medium=editor" target="_blank">Show MDN browser compatibility data on the command line</a> <span>via changelog.com</span></li>
<li>🙋 <a href="https://trello.com/b/VVZC5uQY/jsfiddle-links-inbox" target="_blank">Suggest a link</a></li>
<li><a href="" target="_blank">Demos for docs</a></li>
<li><a href="" target="_blank">Bug reporting (test-case) for Github Issues</a></li>
<li><a href="" target="_blank">Presenting code answers on Stack Overflow</a></li>
<li><a href="" target="_blank">Live code collaboration</a></li>
<li><a href="" target="_blank">Code snippets hosting</a></li>
<li>... or just a code playground</li>
</ul>
</section> -->
</div>
</div>
<!-- <h1>Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.</h1> -->
<!-- <h2>online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor</h2> -->
<form method="post" id="show-result" target="result" action="https://fiddle.jshell.net/_display/">
<input type="hidden" name="csrfmiddlewaretoken" value="ZkaSN+poV5xoYeriSX9tO4leWBSAFodSub8Z7HvLG2S0Yd7ck1RUtj45IDP6ISjugPxH07xnAnd8sBwB2Xgfdw==">
<input type="hidden" name="authenticity_token" value="ZkaSN+poV5xoYeriSX9tO4leWBSAFodSub8Z7HvLG2S0Yd7ck1RUtj45IDP6ISjugPxH07xnAnd8sBwB2Xgfdw==">
<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">
<g class="asd" stroke-width="1.6" 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 collapsed">
<div class="actionItem">
<a class="aiButton" id="run" title="Shortcut: 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>
<!-- TODO: Missing
{# send to MDN #}
{% if postBack %}
<div class="actionItem">
<a class="aiButton" id="sendCallback" title="Send to {{ source_type }}" href="#sendTo{{ callback_type }}">
<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>
{{ source_type }}</a>
</div>
{% endif %}
-->
<div class="actionItem dropdown hidden ">
<a class="aiButton dropdownTrigger" title="Shortcut: 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" href="#update" data-popover-trigger="updateInfo">
<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>
Update</a>
</div>
<div class="actionItem dropdown visible">
<a class="aiButton dropdownTrigger" title="Fork into a new fiddle" 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 " style="display: block;">
<a class="aiButton" id="tidy" title="Tidy messy code" href="#tidy">
<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-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="actionItem ">
<a class="aiButton" id="collaborate" title="Collaborate on code" 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 this fiddle" 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>
<script type="text/javascript">
window.defaultCmOptions = {
tabSize: 2,
indentUnit: 2,
matchBrackets: true,
lineNumbers: true,
lineWrapping: true,
keyMap: "default",
autoCloseTags: true,
indentWithTabs: false,
smartIndent: false,
viewportMargin: Infinity,
styleActiveLine: true,
codeLinting: true,
autoRun: false,
autoRunValid: true,
autoSave: true,
clearConsole: false,
fontSize: 1,
matchTags: false,
foldGutter: true,
reduceHelloBar: false,
foldGutter: true,
foldCode: true,
codeHints: false,
hintOptions: {
completeSingle: false
},
extraKeys: {
"Ctrl-Q": function(cm){
cm.foldCode(cm.getCursor())
},
"Cmd-S": function(){
Actions.save()
},
"Ctrl-S": function(){
Actions.save()
},
"Cmd-Enter": function(){
Actions.run()
},
"Ctrl-Enter": function(){
Actions.run()
},
"Ctrl-Space": "autocomplete",
"Ctrl-Shift-Enter": "autocomplete"
},
}
</script>
<div id="app-updates" class=""><div class="bodyCont"><div class="body"><strong class="badge">New</strong> Code hinting (autocomplete) in Beta<p>Code hinting will suggest some common CSS prop and value names, same for JavaScript. This feature is off by default while in beta.</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: 11,
badge: "New",
title: "Code hinting (autocomplete) in Beta",
body: "Code hinting will suggest some common CSS prop and value names, same for JavaScript. This feature is off by default while in beta.",
highlight: {
target: "[data-popover-trigger='editor-settings']"
}
},
{
id: 10,
badge: "New",
title: "Code folding",
body: "Brackets and HTML elements can now be folded - toggler is next to the line numbers in the editor gutter."
},
{
id: 9,
badge: "Update",
title: "Reordering tabs",
body: "You can now reorder tabs by dragging them when using the new tabbed layout.",
highlight: {
target: "[data-popover-trigger='editor-settings']"
}
},
{
id: 8,
badge: "New",
title: "Tabbed layout",
body: "In addition to our 4 existing layouts, you can now also choose a Tabbed one – screen split in two: picked tab on the left and results on the right.",
highlight: {
target: "[data-popover-trigger='editor-settings']"
}
},
{
id: 7,
badge: "New",
title: "Highlighting matching tags",
body: "Setting option allows you to highlight the closing of the currently selected HTML tag and vice versa.",
highlight: {
target: "[data-popover-trigger='editor-settings']"
}
},
{
id: 6,
badge: "New",
title: "Change font size",
body: "Sitting four meters away from the screen? No probs, you can now change the editor font size!",
highlight: {
target: "[data-popover-trigger='editor-settings']"
}
},
{
id: 5,
badge: "Update",
title: "Exporting to Github Gist",
body: "One-click-export to Github Gist has 🚀. Just click, wait a moment and get the Gist link back.",
highlight: {
target: "[data-popover-trigger='export']"
}
},
{
id: 4,
badge: "New",
title: "Added CoffeeScript 2",
body: "CofffeScript has come a long way, we've been using the 1.x branch forever, now added 2.x branch as the new default.",
highlight: {
target: ".windowLabel[data-popover-trigger='js']"
}
},
{
id: 3,
badge: "Update",
title: "Option to auto-run valid code",
body: "When <strong>Only auto-run validating code</strong> option and code validation is enabled JSFiddle will not try to auto-run code that doesn't validate.",
highlight: {
target: "[data-popover-trigger='editor-settings']"
}
},
{
id: 2,
badge: "Update",
title: "Redesigned settings",
body: "The old Layout and Editor Settings menus have been redesigned and merged together."
},
{
id: 1,
badge: "New stuff",
title: "Auto-run (beta) and auto-save",
body: "Small but a highly requested update – Auto-run and Auto-save are now available.<br> Auto-run is in beta, and off by default (enable in Editor Settings - sliders icon in the top right)."
}
]
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>
<ul class="actionCont dropdown right">
<li class="actionItem hidden draftTriggerCont">
<a class="aiButton dropdownTrigger applyDraft" href="#" data-popover-trigger="draft">Unsaved draft</a>
</li> <!-- /actionItem -->
<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" id="login" href="/user/login/">Sign in</a></li>
</ul>
<div class="dropdownCont hidden" data-popover-ref="draft" data-popover-position="left">
<div class="dcWrapper diffCont">
<h4>Diff between the <strong>saved</strong> and <strong>locally drafted</strong> fiddle:</h4>
<div class="diffPanels">
<div class="diffWrap" id="diff-html"></div>
<div class="diffWrap" id="diff-js"></div>
<div class="diffWrap" id="diff-css"></div>
</div> <!-- /diffCont -->
<p><a class="apply" href="#" id="apply-draft">Apply local draft version</a> or <a href="#" id="discard-draft">discard it</a></p>
</div> <!-- /dcWrapper -->
</div> <!-- /dropdownCont -->
<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="editor_mode" type="radio" value="grid_invisible_hack">
<label>
<input name="editor_mode" type="radio" value="grid_1" checked="">
<span class="gridMode grid_1"></span>
Classic
</label>
<label>
<input name="editor_mode" type="radio" value="grid_2">
<span class="gridMode grid_2"></span>
Columns
</label>
<label>
<input name="editor_mode" type="radio" value="grid_3">
<span class="gridMode grid_3"></span>
Bottom results
</label>
<label>
<input name="editor_mode" type="radio" value="grid_4">
<span class="gridMode grid_4"></span>
Right results
</label>
<label>
<input name="editor_mode" type="radio" value="grid_5">
<span class="gridMode grid_5"></span>
Tabs
</label>
</div>
<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="showHints">
<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="clearConsole">
<span class="checkbox"></span>
Clear console on run
</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>Log in if you'd like to delete this fiddle in the future</p>
<button id="savenew">Save fiddle</button>
</div>
</div>
<div class="dropdownCont center hidden" data-popover-ref="updateInfo">
<div class="dcWrapper info">
<p><strong>Update 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>Log in if you'd like to delete this fiddle in the future</p>
<button id="update">Update fiddle</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>Log in if you'd like to delete this fiddle in the future</p>
<button id="fork">Fork fiddle</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=&quot;{embedSrc}&quot;></script>">&lt;script async src="{embedSrc}"&gt;&lt;/script&gt;
</textarea>
</div> <!-- /embedCodeWrap -->
<div class="embedCodeWrap hidden">
<textarea class="embedCode" data-view="embedded" data-pattern-value="<iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;{embedSrc}&quot; allowfullscreen=&quot;allowfullscreen&quot; allowpaymentrequest frameborder=&quot;0&quot;></iframe>">&lt;iframe width="100%" height="300" src="{embedSrc}" allowfullscreen allowpaymentrequest frameborder="0"&gt;&lt;/iframe&gt;
</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>
<div id="sidebar">
<section id="s-cont">
<div class="sidebarItem">
<h3 class="toggler">Author</h3>
<div class="body userSidebar">
<div class="avatar">
<img src="https://www.gravatar.com/avatar/a0ac79788f87ca12cda519b3a1bb2a7c?s=80" height="60" width="60">
<a title="See public fiddles" href="/user/lquixada/fiddles/">
lquixada
</a>
<div class="company">
</div>
</div> <!-- /avatar -->
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<!-- -->
<div class="sidebarItem">
<h3 class="toggler" title="Posted on 03 03 2018">
Fiddle meta
</h3>
<div class="body">
<p>
<label>
<input type="text" name="title" maxlength="255" value="cross-fetch playground" placeholder="Untitled fiddle">
</label>
</p>
<p>
<label>
<textarea rows="10" cols="40" name="description" placeholder="No description"></textarea>
</label>
</p>
<p class="metaInfo">Add title to make the fiddle public</p>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<script type="text/javascript">
var resources = []
resources.push(2253128)
resources.push(2612094)
</script>
<div class="sidebarItem opened">
<h3 class="toggler filled">
Resources <strong class="resourcesLabel">URL</strong> <strong class="resourcesLabel">cdnjs</strong>
<em id="resource-counter" class="">2</em>
</h3>
<div class="body">
<ul id="external_resources_list">
<li id="external_resource_2253128">
<a class="filename" target="_blank" href="https://unpkg.com/es6-promise/dist/es6-promise.auto.min.js" title="https://unpkg.com/es6-promise/dist/es6-promise.auto.min.js" rel="noopener">
es6-promise.auto.min.js
</a>
<a href="#" data-id="2253128" class="remove">Remove</a>
</li>
<li id="external_resource_2612094">
<a class="filename" target="_blank" href="https://unpkg.com/cross-fetch/dist/cross-fetch.js" title="https://unpkg.com/cross-fetch/dist/cross-fetch.js" rel="noopener">
cross-fetch.js
</a>
<a href="#" data-id="2612094" class="remove">Remove</a>
</li>
</ul>
<div id="external-resources-form">
<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>
</div>
<input type="hidden" value="2253128,2612094" 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="http://doc.jsfiddle.net/use/echo.html" 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="http://doc.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 async="" type="text/javascript" src="//crbcdn.jsfiddle.net/carbon.js?serve=CKYIEKQ7&amp;placement=jsfiddlenet&amp;cd=crbsrv.jsfiddle.net" id="_carbonads_js"></script><div id="carbonads"><span><span class="carbon-wrap"><a href="//srv.carbonads.net/ads/click/x/GTND42QIFTBI4KJ7FTSLYKQMCKADV2QECK7DTZ3JCW7IEK7ICTADL2QKC6BIC53WF6AIKK3EHJNCLSIZ?segment=placement:jsfiddlenet;" class="carbon-img" target="_blank" rel="noopener"><img src="https://cdn4.buysellads.net/uu/1/21673/1538007875-Monday-laptop_purple_graph.png" alt="" border="0" height="100" width="130" style="max-width: 130px;"></a><a href="//srv.carbonads.net/ads/click/x/GTND42QIFTBI4KJ7FTSLYKQMCKADV2QECK7DTZ3JCW7IEK7ICTADL2QKC6BIC53WF6AIKK3EHJNCLSIZ?segment=placement:jsfiddlenet;" class="carbon-text" target="_blank" rel="noopener">Project tracking, teamwork &amp; client reporting like you've never seen before.</a></span><a href="http://carbonads.net/?utm_source=jsfiddlenet&amp;utm_medium=ad_via_link&amp;utm_campaign=in_unit&amp;utm_term=carbon" class="carbon-poweredby" target="_blank" rel="noopener">ads via Carbon</a><img src="https://ad.doubleclick.net/ddm/trackimp/N728909.734586CARBONADS.NET/B20652854.212994643;dc_trk_aid=414577743;dc_trk_cid=104372716;ord=153850296;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=?" border="0" height="1" width="1" style="display: none;"></span></div>
</div>
<div id="keep-us-running">
<p>Like JSFiddle?</p>
<p>If you don't mind tech-related ads (not tracked), and want to keep us running, whitelist JSFiddle in your blocker.</p>
<p>Thank you! ❤️</p>
</div>
<!-- <script type="text/javascript">
window.onload = function(){
setTimeout(function(){
var info = document.getElementById("keep-us-running")
var ads = document.getElementById("carbonads")
var randomColor = Math.floor(Math.random() * 5) + 1
if (ads === null){
info.className = "show " + "color_" + randomColor
info.addEvent("click", function(){
info.className = ""
});
}
}, 2000)
}
</script> -->
</section>
</div>
<div id="content">
<input type="hidden" id="id_version" name="version" value="58">
<input type="hidden" id="id_slug" name="slug" value="3ypqgacp">
<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>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 137px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px;"><div style="min-width: 1px; height: 520px;"></div></div><div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true"><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: -15px; border-right-width: 15px; min-height: 520px; padding-right: 15px; 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><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>26</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: 416px; height: 16px;">&nbsp;</div></div><div class="CodeMirror-code" role="presentation" style=""><div class="" style="position: relative;"><div class="CodeMirror-gutter-wrapper" 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">&lt;</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">&gt;</span>cross-fetch playground<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">&gt;</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="">&#8203;</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">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</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;">This playground is only useful if you're accessing this page with a browser with no native fetch support. If that's the case, play with different settings like wrong urls, cross-domain and text requests. Check out the <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://github.github.io/fetch/"</span> <span class="cm-attribute">target</span>=<span class="cm-string">"_blank"</span><span class="cm-tag cm-bracket">&gt;</span>Github's fetch<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">&gt;</span> api page for more options.</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">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</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="">&#8203;</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">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</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;"> Is the fetch polyfill being used right now?</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;"> &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">&gt;</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;"> &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">&gt;</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-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">document</span>.<span class="cm-property">write</span>(<span class="cm-variable">fetch</span>.<span class="cm-property">polyfill</span><span class="cm-operator">?</span> <span class="cm-string">'Yes.'</span>:<span class="cm-string">'No.'</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;"> &nbsp;<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">&gt;</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;"> &nbsp;<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">&gt;</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 class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</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 cm-text="">&#8203;</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 class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</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">&lt;</span><span class="cm-tag">small</span><span class="cm-tag cm-bracket">&gt;</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;">Note: <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://github.com/stefanpenner/es6-promise"</span> <span class="cm-attribute">target</span>=<span class="cm-string">"_blank"</span><span class="cm-tag cm-bracket">&gt;</span>es6-promise<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">&gt;</span> polyfill has been added in order to proper work in Internet Explorer.</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">&lt;/</span><span class="cm-tag">small</span><span class="cm-tag cm-bracket">&gt;</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 class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><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;">21</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">&#8203;</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="">&#8203;</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">&lt;</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">&gt;</span>response<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">&gt;</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 class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">pre</span> <span class="cm-attribute">id</span>=<span class="cm-string">"content"</span><span class="cm-tag cm-bracket">&gt;</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;"> loading..</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 class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">pre</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 520px;"></div><div class="CodeMirror-gutters" style="height: 535px; 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>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 212px; left: 242px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px;"><div style="min-width: 1px; height: 248px;"></div></div><div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true"><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" draggable="false"><div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: -15px; border-right-width: 15px; min-height: 248px; padding-right: 15px; 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>x</pre></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: 184px; top: 208px; height: 16px;">&nbsp;</div></div><div class="CodeMirror-code" role="presentation" style=""><div class="" style="position: relative;"><div class="CodeMirror-gutter-wrapper" 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-keyword">var</span> <span class="cm-def">content</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">'content'</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="">&#8203;</span></span></pre></div><div class="" 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-variable">fetch</span>(<span class="cm-string">'//api.github.com/users/esironal'</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 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-property">then</span>(<span class="cm-keyword">function</span> (<span class="cm-def">res</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 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;"> &nbsp; &nbsp;<span class="cm-keyword">if</span> (<span class="cm-variable-2">res</span>.<span class="cm-property">status</span> <span class="cm-operator">&gt;=</span> <span class="cm-number">400</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;"> &nbsp; &nbsp; &nbsp;<span class="cm-keyword">throw</span> <span class="cm-keyword">new</span> <span class="cm-variable">Error</span>(<span class="cm-string">"Bad response from server"</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;"> &nbsp; }</span></pre></div><div class="" 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;"> &nbsp; &nbsp;<span class="cm-keyword">return</span> <span class="cm-variable-2">res</span>.<span class="cm-property">json</span>();</span></pre></div><div class="" 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></pre></div><div class="" 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 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-property">then</span>(<span class="cm-keyword">function</span> (<span class="cm-def">user</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;"> &nbsp; &nbsp;<span class="cm-variable">content</span>.<span class="cm-property">innerHTML</span> <span class="cm-operator">=</span> <span class="cm-variable">JSON</span>.<span class="cm-property">stringify</span>(<span class="cm-variable-2">user</span>, <span class="cm-atom">null</span>, <span class="cm-string">' '</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></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 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-property">catch</span>(<span class="cm-keyword">function</span> (<span class="cm-def">err</span>) {</span></pre></div><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;">14</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-variable">content</span>.<span class="cm-property">innerHTML</span> <span class="cm-operator">=</span> <span class="cm-variable-2">err</span>.<span class="cm-property">message</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></pre></div></div></div></div></div></div><div style="position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 248px;"></div><div class="CodeMirror-gutters" style="height: 263px; 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>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px;"><div style="min-width: 1px; height: 376px;"></div></div><div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true"><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: -15px; border-right-width: 15px; min-height: 376px; padding-right: 15px; 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><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>23</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: 16px;">&nbsp;</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">body</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;"> &nbsp;<span class="cm-property">font-family</span>: <span class="cm-variable">Helvetica</span>, <span class="cm-variable">Arial</span>, <span class="cm-atom">sans-serif</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;"> &nbsp;<span class="cm-property">font-size</span>: <span class="cm-number">14px</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></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 cm-text="">&#8203;</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 class="cm-tag">span</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;"> &nbsp;<span class="cm-property">display</span>: <span class="cm-atom">inline-block</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;"> &nbsp;<span class="cm-property">padding</span>: <span class="cm-number">5px</span> <span class="cm-number">10px</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;"> &nbsp;<span class="cm-property">color</span>: <span class="cm-atom">#fff</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;"> &nbsp;<span class="cm-property">font-size</span>: <span class="cm-number">12px</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;"> &nbsp;<span class="cm-property">background-color</span>: <span class="cm-atom">#5389d6</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;"> &nbsp;<span class="cm-property">border-radius</span>: <span class="cm-number">4px</span> <span class="cm-number">4px</span> <span class="cm-number">0</span> <span class="cm-number">0</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></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="">&#8203;</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">pre</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;"> &nbsp;<span class="cm-property">margin</span>: <span class="cm-number">0</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;"> &nbsp;<span class="cm-property">padding</span>: <span class="cm-number">10px</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;"> &nbsp;<span class="cm-property">font-size</span>: <span class="cm-number">12px</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;"> &nbsp;<span class="cm-property">background-color</span>: <span class="cm-atom">#c7deff</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;"> &nbsp;<span class="cm-property">border</span>: <span class="cm-number">2px</span> <span class="cm-atom">solid</span> <span class="cm-atom">#5389d6</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;"> &nbsp;<span class="cm-property">border-radius</span>: <span class="cm-number">0</span> <span class="cm-number">3px</span> <span class="cm-number">3px</span> <span class="cm-number">3px</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;"> &nbsp;<span class="cm-property">overflow-x</span>: <span class="cm-atom">scroll</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></pre></div></div></div></div></div></div><div style="position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 376px;"></div><div class="CodeMirror-gutters" style="height: 391px; 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);">
<iframe name="result" allow="midi; geolocation; microphone; camera; encrypted-media;" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" allowfullscreen="" allowpaymentrequest="" frameborder="0" src="//fiddle.jshell.net/lquixada/3ypqgacp/show/">
</iframe>
<div class="windowLabelCont" style="display: none;">
<span class="windowLabel hidden">
Result
</span>
<em class="size hidden">563px</em>
</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" disabled="disabled" data-panel_id="id_code_html" data-panel="html">
<option data-mime-type="text/html" value="0">HTML</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 &amp; Extensions</h3>
<div class="panelExtrasChoice">
<div class="selectCont">
<select name="js_lib" id="js_lib">
<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>
</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="208">Mootools 1.5.0</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 (min)</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="The X Toolkit">
<option value="106">The X Toolkit edge</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>
</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="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="333">jQuery 3.1.1</option>
<option value="376">jQuery 3.2.1</option>
<option value="384">jQuery 3.3.1</option>
</optgroup><optgroup label="jQuery Slim">
<option value="313">jQuery Slim 3.0.0 Slim</option>
<option value="323">jQuery Slim 3.1.0 Slim</option>
<option value="335">jQuery Slim 3.1.1 Slim</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="354">svg.js 2.0.5</option>
<option value="269">svg.js 2.1.1</option>
<option value="352">svg.js 2.2.5</option>
<option value="350">svg.js 2.3.7</option>
<option value="348">svg.js 2.4.0</option>
<option value="346">svg.js 2.5.0</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>Load type</h3>
<div class="selectCont">
<select name="js_wrap" id="id_js_wrap">
<option value="l" selected="">On Load</option>
<option value="d">On DOM Ready</option>
<option value="h">No wrap - bottom of &lt;head&gt;</option>
<option value="b">No wrap - bottom of &lt;body&gt;</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>Framework &lt;script&gt; attribute</h3>
<p class="libraryTagAttributes">
<label>
<input id="id_js_lib_option" type="text" name="js_lib_option" maxlength="255" placeholder="ie. data-type=&quot;&quot;" 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>
</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>
<div id="loader">
<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 33">
<g class="asd" 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>
<script>
window.addEventListener("DOMContentLoaded", function(){
var loadEditor = function(){
var csrfToken = Cookie.read("csrftoken")
Layout.skin = "light"
$extend(Layout, new Events())
Actions = new EditorActions({
example_id: EditorConfig.fiddle.id,
exampleURL: "//jsfiddle.net/lquixada/3ypqgacp/",
exampleSaveUrl: "/_save/",
loadDependenciesURL: "/_get_dependencies/{lib_id}/",
})
Layout.render()
// all fully loaded
document.body.classList.add("fullyLoaded")
}
var themeHref = "/css/dist-editor-dark.css?update_29_09_2018_1"
var script = document.createElement("script")
script.src = "/js/_dist-editor.js?update_29_09_2018_1"
script.onload = loadEditor
var styleEditor = document.createElement("link")
styleEditor.rel = "stylesheet"
styleEditor.type = "text/css"
styleEditor.id = "editor-theme"
styleEditor.href = themeHref
styleEditor.onload = function(){
document.body.appendChild(script)
}
document.body.appendChild(styleEditor)
})
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Code",
"name": "cross-fetch playground",
"url": "//#{JSFIDDLE.force_server}/#{edit_fiddle_path(@shell)}",
"dateCreated": "",
"author": {
"@type": "Person",
"name": "lquixada",
"image": "https://www.gravatar.com/avatar/a0ac79788f87ca12cda519b3a1bb2a7c?s=80"
},
"codeSampleType": [
{
"@type": "SoftwareSourceCode",
"programmingLanguage": "javascript",
"text": "var content = document.getElementById(&#39;content&#39;);
fetch(&#39;//api.github.com/users/lquixada&#39;)
.then(function (res) {
if (res.status &gt;= 400) {
throw new Error(&quot;Bad response from server&quot;);
}
return res.json();
})
.then(function (user) {
content.innerHTML = JSON.stringify(user, null, &#39; &#39;);
})
.catch(function (err) {
content.innerHTML = err.message;
});"
},
{
"@type": "SoftwareSourceCode",
"programmingLanguage": "html",
"text": "&lt;h3&gt;cross-fetch playground&lt;/h3&gt;
&lt;p&gt;
This playground is only useful if you&#39;re accessing this page with a browser with no native fetch support. If that&#39;s the case, play with different settings like wrong urls, cross-domain and text requests. Check out the &lt;a href=&quot;https://github.github.io/fetch/&quot; target=&quot;_blank&quot;&gt;Github&#39;s fetch&lt;/a&gt; api page for more options.
&lt;/p&gt;
&lt;p&gt;
Is the fetch polyfill being used right now?
&lt;strong&gt;
&lt;script&gt;
document.write(fetch.polyfill? &#39;Yes.&#39;:&#39;No.&#39;);
&lt;/script&gt;
&lt;/strong&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;small&gt;
Note: &lt;a href=&quot;https://github.com/stefanpenner/es6-promise&quot; target=&quot;_blank&quot;&gt;es6-promise&lt;/a&gt; polyfill has been added in order to proper work in Internet Explorer.
&lt;/small&gt;
&lt;/p&gt;
&lt;span&gt;response&lt;/span&gt;
&lt;pre id=&quot;content&quot;&gt;
loading..
&lt;/pre&gt;"
},
{
"@type": "SoftwareSourceCode",
"programmingLanguage": "css",
"text": "body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
span {
display: inline-block;
padding: 5px 10px;
color: #fff;
font-size: 12px;
background-color: #5389d6;
border-radius: 4px 4px 0 0;
}
pre {
margin: 0;
padding: 10px;
font-size: 12px;
background-color: #c7deff;
border: 2px solid #5389d6;
border-radius: 0 3px 3px 3px;
overflow-x: scroll;
}"
}
]
}
</script>
<div id="app-updates-highlighter" class="" style="top: 0px; left: 1171.59px; width: 94.5312px; height: 59px;"></div><link rel="stylesheet" type="text/css" id="editor-theme" href="/css/dist-editor-dark.css?update_29_09_2018_1"><script src="/js/_dist-editor.js?update_29_09_2018_1"></script><div class="autocomplete-suggestions "></div></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment