User:Shivain Dabas/sandbox

<!DOCTYPE html>  Tryit Editor v3.5          (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'); ga('create', 'UA-3855518-1', 'auto'); ga('require', 'displayfeatures'); ga('send', 'pageview');

  (function { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; gads.src = 'https://www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); }); var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; var snhb = snhb || {}; snhb.queue = snhb.queue || []; snhb.options = { logOutputEnabled : false, autoStartAuction: false, gdpr: { mainGeo: "us", reconsiderationAppealIntervalSeconds: 0 }              }; // GPT slots var gptAdSlots = []; googletag.cmd.push(function { googletag.pubads.disableInitialLoad;              googletag.pubads.enableSingleRequest;  var leaderMapping = googletag.sizeMapping.  // Mobile ad  addSize([0, 0], [320, 50]).   // Vertical Tablet ad  addSize([468, 0], [468, 60]).   // Horizontal Tablet  addSize([728, 0], [728, 90]).  // Desktop and bigger ad  addSize([970, 0], 728, 90], [970, 90).build;  // addSize([970, 0], [728, 90]).build;  gptAdSlots[0] = googletag.defineSlot('/16833175/TryitLeaderboard', 728, 90], [970, 90, 'div-gpt-ad-1428407818244-0').  // gptAdSlots[0] = googletag.defineSlot('/16833175/TryitLeaderboard', [728, 90], 'div-gpt-ad-1428407818244-0').  defineSizeMapping(leaderMapping).addService(googletag.pubads);  googletag.pubads.setTargeting("content","try" + (function  {    var folder = location.pathname;    folder = folder.replace("/", "");    folder = folder.substr(0, folder.indexOf("/")); return folder; }) );  snhb.queue.push(function{    snhb.startAuction(["try_it_leaderboard"]);  }); googletag.enableServices; });  if (window.addEventListener) {                 window.addEventListener("resize", browserResize); } else if (window.attachEvent) {                     window.attachEvent("onresize", browserResize); } var xbeforeResize = window.innerWidth;

function browserResize { var afterResize = window.innerWidth; if ((xbeforeResize < (970) && afterResize >= (970)) || (xbeforeResize >= (970) && afterResize < (970)) ||       (xbeforeResize < (728) && afterResize >= (728)) || (xbeforeResize >= (728) && afterResize < (728)) ||        (xbeforeResize < (468) && afterResize >= (468)) ||(xbeforeResize >= (468) && afterResize < (468))) { xbeforeResize = afterResize; snhb.queue.push(function{ snhb.startAuction(["try_it_leaderboard"]); }); }   if (window.screen.availWidth <= 768) { restack(window.innerHeight > window.innerWidth); }   fixDragBtn; showFrameSize; } var fileID = ""; var loadSave = false; function getSavedFile { loadSave = true; var htmlCode; var paramObj = {}; paramObj.fileid = ""; fileID = paramObj.fileid; var paramA = JSON.stringify(paramObj); var httpA = new XMLHttpRequest; httpA.open("POST", globalURL, true); httpA.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); httpA.onreadystatechange = function { if(httpA.readyState == 4 && httpA.status == 200) { document.getElementById("textareaCode").value = httpA.responseText; window.editor.getDoc.setValue(httpA.responseText); loadSave = false; }   }    httpA.send(paramA); }

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { color:#000000; margin:0px; font-size:100%; } .trytopnav { height:40px; overflow:hidden; min-width:380px; position:absolute; width:100%; top:99px; } .w3-bar .w3-bar-item:hover { color:#757575 !important; } a.w3schoolslink { padding:0 !important; display:inline !important; } a.w3schoolslink:hover,a.w3schoolslink:active { text-decoration:underline !important; background-color:transparent !important; } position:absolute; cursor: col-resize; z-index:3; padding:5px; } display:none; top:0; left:0; width:100%; position:absolute; height:100%; z-index:4; } font-family:Consolas, monospace; } background-color:#f1f1f1; width:100%; overflow:auto; position:absolute; top:138px; bottom:0; height:auto; } float:left; height:100%; width:50%; } height:100%; width:100%; padding-bottom:10px; padding-top:1px; } padding-left:10px; padding-right:5px; } padding-left:5px; padding-right:10px; } width:100%; height:100%; background-color: #ffffff; position:relative; box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } width:100%; height:100%; -webkit-overflow-scrolling: touch; background-color: #ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } background-color: #ffffff; font-family: consolas,"courier new",monospace; font-size:15px; height:100%; width:100%; padding:8px; resize: none; border:none; line-height:normal; } .CodeMirror.cm-s-default { line-height:normal; padding: 4px; height:100%; width:100%; } background-color: #ffffff; height:100%; width:100%; } height:50%; float:none; width:100%; } height:100%; padding-left:10px; padding-right:10px; } height:100%; padding-right:10px; padding-bottom:10px; padding-left:10px; } min-height:200px; margin-left:0; } overflow:hidden; text-align:center; margin-top:5px; height:90px; } .w3-dropdown-content {width:350px} @media screen and (max-width: 727px) { .trytopnav {top:70px;} #container {top:108px;}
 * 1) dragbar{
 * 1) shield {
 * 1) framesize span {
 * 1) container {
 * 1) textareacontainer, #iframecontainer {
 * 1) textarea, #iframe {
 * 1) textarea {
 * 1) iframe {
 * 1) textareawrapper {
 * 1) iframewrapper {
 * 1) textareaCode {
 * 1) iframeResult, #iframeSource {
 * 1) stackV {background-color:#999999;}
 * 2) stackV:hover {background-color:#BBBBBB !important;}
 * 3) stackV.horizontal {background-color:transparent;}
 * 4) stackV.horizontal:hover {background-color:#BBBBBB !important;}
 * 5) stackH.horizontal {background-color:#999999;}
 * 6) stackH.horizontal:hover {background-color:#999999 !important;}
 * 7) textareacontainer.horizontal,#iframecontainer.horizontal{
 * 1) textarea.horizontal{
 * 1) iframe.horizontal{
 * 1) container.horizontal{
 * 1) tryitLeaderboard {

} @media screen and (max-width: 467px) { .trytopnav {top:60px;} #container {top:98px;} .w3-dropdown-content {width:100%} } @media only screen and (max-device-width: 768px) { #iframewrapper {overflow: auto;} #container    {min-width:320px;} .stack        {display:none;} #tryhome      {display:block;} }

@font-face { font-family: 'fontawesome'; src:url('../lib/fonts/fontawesome.eot?14663396'); src:url('../lib/fonts/fontawesome.eot?14663396#iefix') format('embedded-opentype'), url('../lib/fonts/fontawesome.woff?14663396') format('woff'), url('../lib/fonts/fontawesome.ttf?14663396') format('truetype'), url('../lib/fonts/fontawesome.svg?14663396#fontawesome') format('svg'); font-weight:normal; font-style:normal; } .fa { display:inline-block; font:normal normal normal 14px/1 FontAwesome; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transform:translate(0,0); } .fa-2x { font-size:2em; } .fa-home:before {content: '\e800'; } .fa-save:before {content: '\e804'; } .fa-rotate:before {content: '\e813'; } .fa-menu:before { content: '\f0c9'; } .loader { border: 6px solid #f3f3f3; /* Light grey */ border-top: 6px solid #3498db; /* Blue */ border-radius: 50%; width: 60px; height: 60px; animation: spin 2s linear infinite; }   margin:20px; }
 * 1) saveLoader {

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } }
 * 1) iframewrapper {

 globalURL = 'https://tryit.w3schools.com/code_datas.php'; &times; Save Your Code If you click the save button, your code will be saved, and you get an URL you can share with others. Save <button class="w3-btn w3-red" title="Cancel" style="margin-right:15px" onclick="hideAndResetModal;">Cancel By clicking the "Save" button you agree to our <a href="javascript:void(0);" class="w3-hover-text-green" onclick="document.getElementById('saveDisclaimer').style.display='block';">terms and conditions</a>. <a href="/default.asp" class="w3-button w3-light-grey" onclick="event.preventDefault;displayError">Report Error</a> All code in shared files are supplied by users, and belongs to the poster. All shared files are made public. No license is enforced. Any code can be removed without warning (if it is deemed offensive, damaging or for any other reason). w3schools.com are not responsible or liable for any loss or damage of any kind during the usage of provided code. Your Code Could Not be Saved The code has too many characters. Your Code has Been Saved File has been saved to: <a id="shareLink" class="w3-hover-text-green" href="javascript:void(0);" target="_blank"> </a> <span onclick="resetDriveSaveModal" class="w3-button w3-display-topright" style="font-weight:bold;">&times; Save to Google Drive If you have a Google account, you can save this code to your Google Drive. Google will ask you to confirm Google Drive access. <label class="w3-text-black">Save file as: <input class="w3-input w3-border" type="text" id="googleFileName" value="tryhtml_default"> <button class="w3-button w3-light-grey w3-hover-grey w3-hover-text-white w3-margin-top" title="Save file to Google Drive" onclick="handleAuthClick(event,'save')"><img style="margin-right:5px" alt="Save file to Google Drive" title="Save file to Google Drive" src="/images/driveicon.png">Save file <p id="driveSavedText">

<span onclick="resetDriveLoadModal" class="w3-button w3-display-topright" style="font-weight:bold;">&times; Open from Google Drive If you have saved a file to Google Drive, you can open it here: <button class="w3-button w3-light-grey w3-hover-grey w3-hover-text-white" title="Open file from Google Drive" onclick="handleAuthClick(event,'open')"><img style="margin-right:5px" alt="Open file from Google Drive" title="Open file from Google Drive" src="/images/driveicon.png">Open file

<a id="tryhome" href="https://www.w3schools.com" target="_blank" title="w3schools.com Home" class="w3-button w3-bar-item topnav-icons fa fa-home" style="font-size:28px;color:#999999;margin-top:-2px"></a> <a href="javascript:void(0);" onclick="openMenu" id="menuButton" title="Open Menu"class="w3-dropdown-click w3-button w3-bar-item topnav-icons fa fa-menu" style="font-size:28px;color:#999999;margin-top:-2px"></a> <a href="javascript:void(0);" onclick="click_savebtn" title="Save" class="w3-button w3-bar-item topnav-icons fa fa-save" style="font-size:28px;color:#999999;margin-top:-2px"></a> <a href="javascript:void(0);" onclick="restack(currentStack)" title="Change Orientation" class="w3-button w3-bar-item topnav-icons fa fa-rotate" style="font-size:28px;color:#999999;margin-top:-2px"></a> <button class="w3-button w3-bar-item w3-green w3-hover-white w3-hover-text-green" onclick="submitTryit(1);snhb.startAuction(['try_it_leaderboard']);">Run &raquo;

<a href="javascript:void(0)" id="dragbar"></a> <span onclick="openMenu" class="w3-button w3-display-topright w3-transparent w3-hover-dark-grey" title="Close Menu" style="font-weight:bold;padding-top:10px;padding-bottom:11px;">&times; <a class="w3-bar-item w3-button" href='javascript:void(0);' title="Change Orientaton" onclick="openMenu;restack(currentStack)"><i class="fa fa-rotate" style="font-size:26px;margin-left:-4px;margin-right:8px"></i> Change Orientation </a> <a class="w3-bar-item w3-button" href="javascript:void(0);" title="Save" onclick="openMenu;click_savebtn"><i class="fa fa-save" style="font-size:26px;margin-right:10px;"></i> Save Code </a> <a class="w3-bar-item w3-button" href='javascript:void(0);' id="saveGDriveBtn" title="Save to Google Drive" onclick="openMenu;click_google_savebtn"><img src="/images/driveicon_32.png" alt="Save to Google Drive" title="Save to Google Drive" style="margin-right:10px;width:24px;"> Save to Google Drive </a> <a class="w3-bar-item w3-button" href='javascript:void(0);' id="loadGDriveBtn" title="Load from Google Drive" onclick="openMenu;click_google_loadbtn"><img src="/images/driveicon_32.png" alt="Load from Google Drive" title="Load from Google Drive" style="margin-right:10px;width:24px;"> Load from Google Drive </a> <footer class="w3-container w3-small w3-light-gray"> <a style="display:inline;padding:0;" href="/about/about_privacy.asp" target="_blank" onclick="openMenu;" class="w3-hover-none w3-hover-text-green">Privacy policy</a> and <a style="display:inline;padding:0;" href="/about/about_copyright.asp" target="_blank" onclick="openMenu;" class="w3-hover-none w3-hover-text-green">Copyright 1999-2018</a> <textarea autocomplete="off" id="textareaCode" wrap="logical" spellcheck="false"><!DOCTYPE html> Page Title

This is a Heading This is a paragraph.

<form id="codeForm" autocomplete="off" style="margin:0px;display:none;"> <input type="hidden" name="code" id="code" /> <div id="err_form" class="w3-modal" style="z-index:4"> <span onclick="document.getElementById('err_form').style.display='none'" class="w3-button w3-display-topright w3-text-white w3-padding w3-green" style="font-weight:bold;">&times; Report a Problem: <form class="w3-container"> <label for="err_email">Your E-mail: <input class="w3-input w3-border" type="text" style="width:100%" id="err_email" name="err_email"> <label for="err_email">Page address: <input class="w3-input w3-border" type="text" style="width:100%" id="err_url" name="err_url" disabled="disabled"> <label for="err_email">Description: <textarea rows="10" class="w3-input w3-border" id="err_desc" name="err_desc" style="width:100%;resize:vertical"> <button class="w3-btn w3-right w3-green w3-margin-bottom" type="button" onclick="sendErr">Submit

submitTryit

function submitTryit(n) { if (window.editor) { window.editor.save; } var text = document.getElementById("textareaCode").value; var ifr = document.createElement("iframe"); ifr.setAttribute("frameborder", "0"); ifr.setAttribute("id", "iframeResult"); ifr.setAttribute("name", "iframeResult"); document.getElementById("iframewrapper").innerHTML = ""; document.getElementById("iframewrapper").appendChild(ifr); if (loadSave == true ) { ifr.setAttribute("src", "/code/opentext.htm"); } else if (fileID != "" && loadSave == false) { var t=text; t=t.replace(/=/gi,"w3equalsign"); t=t.replace(/\+/gi,"w3plussign"); var pos=t.search(/script/i) while (pos>0) { t=t.substring(0,pos) + "w3" + t.substr(pos,3) + "w3" + t.substr(pos+3,3) + "tag" + t.substr(pos+6); pos=t.search(/script/i); }   document.getElementById("code").value=t; document.getElementById("codeForm").action = "https://tryit.w3schools.com/tryit_view.php?x=" + Math.random; document.getElementById('codeForm').method = "post"; document.getElementById('codeForm').acceptCharset = "utf-8"; document.getElementById('codeForm').target = "iframeResult"; document.getElementById("codeForm").submit; } else { var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument; ifrw.document.open; ifrw.document.write(text); ifrw.document.close; //23.02.2016: contentEditable is set to true, to fix text-selection (bug) in firefox. //(and back to false to prevent the content from being editable) //(To reproduce the error: Select text in the result window with, and without, the contentEditable statements below.) if (ifrw.document.body && !ifrw.document.body.isContentEditable) { ifrw.document.body.contentEditable = true; ifrw.document.body.contentEditable = false; } } } var currentStack=true; if ((window.screen.availWidth <= 768 && window.innerHeight > window.innerWidth) || "" == " horizontal") {restack(true);} function restack(horizontal) { var tc, ic, t, i, c, f, sv, sh, d, height, flt, width; tc = document.getElementById("textareacontainer"); ic = document.getElementById("iframecontainer"); t = document.getElementById("textarea"); i = document.getElementById("iframe"); c = document.getElementById("container"); sv = document.getElementById("stackV"); sh = document.getElementById("stackH"); tc.className = tc.className.replace("horizontal", ""); ic.className = ic.className.replace("horizontal", ""); t.className = t.className.replace("horizontal", ""); i.className = i.className.replace("horizontal", ""); c.className = c.className.replace("horizontal", ""); if (sv) {sv.className = sv.className.replace("horizontal", "")}; if (sv) {sh.className = sh.className.replace("horizontal", "")}; stack = ""; if (horizontal) { tc.className = tc.className + " horizontal"; ic.className = ic.className + " horizontal"; t.className = t.className + " horizontal"; i.className = i.className + " horizontal"; c.className = c.className + " horizontal"; if (sv) {sv.className = sv.className + " horizontal"}; if (sv) {sh.className = sh.className + " horizontal"}; stack = " horizontal"; document.getElementById("textareacontainer").style.height = "50%"; document.getElementById("iframecontainer").style.height = "50%"; document.getElementById("textareacontainer").style.width = "100%"; document.getElementById("iframecontainer").style.width = "100%"; currentStack=false; } else { document.getElementById("textareacontainer").style.height = "100%"; document.getElementById("iframecontainer").style.height = "100%"; document.getElementById("textareacontainer").style.width = "50%"; document.getElementById("iframecontainer").style.width = "50%"; currentStack=true; }   fixDragBtn; showFrameSize; } function showFrameSize { var t; var width, height; width = Number(w3_getStyleValue(document.getElementById("iframeResult"), "width").replace("px", "")).toFixed; height = Number(w3_getStyleValue(document.getElementById("iframeResult"), "height").replace("px", "")).toFixed; document.getElementById("framesize").innerHTML = "Result Size: " + width + " x " + height + " "; } var dragging = false; var stack; function fixDragBtn { var textareawidth, leftpadding, dragleft, containertop, buttonwidth var containertop = Number(w3_getStyleValue(document.getElementById("container"), "top").replace("px", "")); if (stack != " horizontal") { document.getElementById("dragbar").style.width = "5px"; textareasize = Number(w3_getStyleValue(document.getElementById("textareawrapper"), "width").replace("px", "")); leftpadding = Number(w3_getStyleValue(document.getElementById("textarea"), "padding-left").replace("px", "")); buttonwidth = Number(w3_getStyleValue(document.getElementById("dragbar"), "width").replace("px", "")); textareaheight = w3_getStyleValue(document.getElementById("textareawrapper"), "height"); dragleft = textareasize + leftpadding + (leftpadding / 2) - (buttonwidth / 2); document.getElementById("dragbar").style.top = containertop + "px"; document.getElementById("dragbar").style.left = dragleft + "px"; document.getElementById("dragbar").style.height = textareaheight; document.getElementById("dragbar").style.cursor = "col-resize"; } else { document.getElementById("dragbar").style.height = "5px"; if (window.getComputedStyle) { textareawidth = window.getComputedStyle(document.getElementById("textareawrapper"),null).getPropertyValue("height"); textareaheight = window.getComputedStyle(document.getElementById("textareawrapper"),null).getPropertyValue("width"); leftpadding = window.getComputedStyle(document.getElementById("textarea"),null).getPropertyValue("padding-top"); buttonwidth = window.getComputedStyle(document.getElementById("dragbar"),null).getPropertyValue("height"); } else { dragleft = document.getElementById("textareawrapper").currentStyle["width"]; }   textareawidth = Number(textareawidth.replace("px", "")); leftpadding = Number(leftpadding .replace("px", "")); buttonwidth = Number(buttonwidth .replace("px", "")); dragleft = containertop + textareawidth + leftpadding + (leftpadding / 2); document.getElementById("dragbar").style.top = dragleft + "px"; document.getElementById("dragbar").style.left = "5px"; document.getElementById("dragbar").style.width = textareaheight; document.getElementById("dragbar").style.cursor = "row-resize"; } } function dragstart(e) { e.preventDefault; dragging = true; var main = document.getElementById("iframecontainer"); } function dragmove(e) { if (dragging) {   document.getElementById("shield").style.display = "block"; if (stack != " horizontal") { var percentage = (e.pageX / window.innerWidth) * 100; if (percentage > 5 && percentage < 98) { var mainPercentage = 100-percentage; document.getElementById("textareacontainer").style.width = percentage + "%"; document.getElementById("iframecontainer").style.width = mainPercentage + "%"; fixDragBtn; }   } else { var containertop = Number(w3_getStyleValue(document.getElementById("container"), "top").replace("px", "")); var percentage = ((e.pageY - containertop + 20) / (window.innerHeight - containertop + 20)) * 100; if (percentage > 5 && percentage < 98) { var mainPercentage = 100-percentage; document.getElementById("textareacontainer").style.height = percentage + "%"; document.getElementById("iframecontainer").style.height = mainPercentage + "%"; fixDragBtn; }   }    showFrameSize; } } function dragend { document.getElementById("shield").style.display = "none"; dragging = false; if (window.editor) { window.editor.refresh; } } if (window.addEventListener) { document.getElementById("dragbar").addEventListener("mousedown", function(e) {dragstart(e);}); document.getElementById("dragbar").addEventListener("touchstart", function(e) {dragstart(e);}); window.addEventListener("mousemove", function(e) {dragmove(e);}); window.addEventListener("touchmove", function(e) {dragmove(e);}); window.addEventListener("mouseup", dragend); window.addEventListener("touchend", dragend); window.addEventListener("load", fixDragBtn); window.addEventListener("load", showFrameSize); } function click_savebtn { if (window.editor) { window.editor.save; } document.getElementById('saveModal').style.display = 'block'; } function click_google_savebtn { if (window.editor) { window.editor.save; } document.getElementById('driveSaveModal').style.display='block' }

function click_google_loadbtn { document.getElementById('driveLoadModal').style.display='block' }

function colorcoding { var ua = navigator.userAgent; //Opera Mini refreshes the page when trying to edit the textarea. if (ua && ua.toUpperCase.indexOf("OPERA MINI") > -1) { return false; } window.editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {   mode: "text/html",    htmlMode: true,    lineWrapping: true,    smartIndent: false,    addModeClass: true  }); // window.editor.on("change", function  {window.editor.save;}); } colorcoding;

function w3_getStyleValue(elmnt,style) { if (window.getComputedStyle) { return window.getComputedStyle(elmnt,null).getPropertyValue(style); } else { return elmnt.currentStyle[style]; } } //SAVE AND OPEN SCRIPT var oauthToken; var userAction; var pickerApiLoaded; var developerKey = 'AIzaSyAMZDPXiGcCNWs1UCWG9LS6kkW5YiABfJ0'; var CLIENT_ID = '451843133508-ckbr5r6ch1ofqbmh87oll4u6ltinqv2t.apps.googleusercontent.com'; var SCOPES = ['https://www.googleapis.com/auth/drive.file'];

//Check if current user has authorized this application function checkAuth { gapi.auth.authorize(   {        'client_id': CLIENT_ID,        'scope': SCOPES.join(' '),        'immediate': true    }, handleAuthResult); }

//Handle response from authorization server function handleAuthResult(authResult) { if (authResult && !authResult.error) { oauthToken = authResult.access_token; loadApi; } }

// Initiate auth flow in response to user clicking authorize button function handleAuthClick(event,userClick) { userAction = userClick; gapi.auth.authorize(       {client_id: CLIENT_ID, scope: SCOPES, immediate: false},        handleAuthResult); return false; }

// Load API library function loadApi { gapi.client.load('drive', 'v3'); gapi.load('picker', {'callback': onPickerApiLoad}); } function onPickerApiLoad { pickerApiLoaded = true; if (userAction=="save") { userAction=""; document.getElementById('driveText').style.display='none'; document.getElementById('driveSavedPanel').style.display='block'; createFileWithHTMLContent(document.getElementById('googleFileName').value,document.getElementById('textareaCode').value) }   if (userAction=="open") { userAction=""; createPicker; } }

// Create and render a Picker object for picking HTML file function createPicker { if (pickerApiLoaded) { var view = new google.picker.View(google.picker.ViewId.DOCS); view.setMimeTypes("text/html"); var picker = new google.picker.PickerBuilder. addView(view). setOAuthToken(oauthToken). setDeveloperKey(developerKey). setCallback(pickerCallback). build; picker.setVisible(true); } } // Put content of file in tryit editor function pickerCallback(data) { var docID = ''; if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) { var doc = data[google.picker.Response.DOCUMENTS][0]; docID = doc[google.picker.Document.ID]; getContentOfFile(docID); } }

//Get contents function getContentOfFile(theID){ gapi.client.request({'path': '/drive/v2/files/'+theID,'method': 'GET',callback: function ( theResponseJS, theResponseTXT ) {       var myToken = gapi.auth.getToken;        var myXHR   = new XMLHttpRequest;        myXHR.open('GET', theResponseJS.downloadUrl, true );        myXHR.setRequestHeader('Authorization', 'Bearer ' + myToken.access_token );        myXHR.onreadystatechange = function( theProgressEvent ) {            if (myXHR.readyState == 4) {                if ( myXHR.status == 200 ) {                    var code = myXHR.response;                    document.getElementById("textareaCode").value=code;                    window.editor.getDoc.setValue(code);                    submitTryit(1);                    resetDriveLoadModal;                }            }        }        myXHR.send;        }    }); }

var createFileWithHTMLContent = function(name,data,callback) { const boundary = '---314159265358979323846'; const delimiter = "\r\n--" + boundary + "\r\n"; const close_delim = "\r\n--" + boundary + "--"; const contentType = 'text/html';

var metadata = { 'name': name, 'mimeType': contentType };

var multipartRequestBody = delimiter + 'Content-Type: application/json\r\n\r\n' + JSON.stringify(metadata) + delimiter + 'Content-Type: ' + contentType + '\r\n\r\n' + data + close_delim;

var request = gapi.client.request({       'path': '/upload/drive/v3/files',        'method': 'POST',        'params': {'uploadType': 'multipart'},        'headers': {            'Content-Type': 'multipart/related; boundary="' + boundary + '"'        },        'body': multipartRequestBody}); if (!callback) { callback = function(file) { console.log(file); document.getElementById("driveSavedText").innerHTML = file.name + " saved in Google Drive"; document.getElementById("driveSavedPanel").className = "w3-panel w3-large"; };   }    request.execute(callback); }

if (navigator.userAgent.indexOf("MSIE") > 0 || navigator.userAgent.indexOf("Edge") > 0) { document.getElementById("saveGDriveBtn").style.display = "none"; document.getElementById("loadGDriveBtn").style.display = "none"; }

function resetDriveSaveModal { document.getElementById('driveSavedText').innerHTML=''; document.getElementById('driveSaveModal').style.display='none' document.getElementById('driveSavedPanel').style.display='none' document.getElementById('driveText').style.display='block' document.getElementById("driveSavedPanel").className = "w3-panel w3-large loader"; } function resetDriveLoadModal { document.getElementById('driveLoadModal').style.display='none' }

function saveFile(code) { document.getElementById('preSave').style.display='none'; if (code.length>20000) { document.getElementById('errorSave').style.display='block'; return; }   document.getElementById('postSave').style.display='block'; var paramObj = {}; paramObj.code = code; var paramB = JSON.stringify(paramObj); var httpB = new XMLHttpRequest; httpB.open("POST", globalURL, true);

httpB.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

httpB.onreadystatechange = function { if(httpB.readyState == 4 && httpB.status == 200) { if(httpB.responseText.substr(0,2) == "OK" ) { var getId = httpB.responseText.substr(2); document.getElementById("shareLink").href = "/code/tryit.asp?filename=" + getId; document.getElementById("shareLinkText").innerHTML = "https://www.w3schools.com/code/tryit.asp?filename=" + getId; document.getElementById('saveLoader').style.display = "none"; document.getElementById("saveModalSaved").style.display = "block"; }   }    }    httpB.send(paramB); } function hideAndResetModal { document.getElementById("saveModal").style.display = "none"; document.getElementById('preSave').style.display = "block"; document.getElementById('errorSave').style.display = "none"; document.getElementById('postSave').style.display = "none"; document.getElementById("saveModalSaved").style.display = "none"; document.getElementById('saveDisclaimer').style.display= "none"; document.getElementById('saveLoader').style.display = "block"; }

var addr = document.location.href; function displayError { document.getElementById("err_url").value = addr; document.getElementById("err_form").style.display = "block"; document.getElementById("err_email").focus; hideSent; } function hideError { document.getElementById("err_form").style.display = "none"; } function hideSent { document.getElementById("err_sent").style.display = "none"; } function sendErr { var xmlhttp; var err_url = document.getElementById("err_url").value; var err_email = document.getElementById("err_email").value; var err_desc = document.getElementById("err_desc").value; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest; } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST", "/err_sup.asp", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("err_url=" + err_url + "&err_email=" + err_email + "&err_desc=" + escape(err_desc)); document.getElementById("err_desc").value = ""; hideError; document.getElementById("err_sent").style.display = "block"; } function openMenu { var x = document.getElementById("navbarDropMenu"); var y = document.getElementById("menuOverlay"); var z = document.getElementById("menuButton"); if (z.className.indexOf("w3-text-gray") == -1) { z.className += " w3-text-gray"; } else { z.className = z.className.replace(" w3-text-gray", ""); }   if (z.className.indexOf("w3-gray") == -1) { z.className += " w3-gray"; } else { z.className = z.className.replace(" w3-gray", ""); }   if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); }   if (y.className.indexOf("w3-show") == -1) { y.className += " w3-show"; } else { y.className = y.className.replace(" w3-show", ""); }

} // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == document.getElementById("saveModal")) { hideAndResetModal; }   if (event.target == document.getElementById("driveSaveModal")) { resetDriveSaveModal; }   if (event.target == document.getElementById("driveLoadModal")) { resetDriveLoadModal; }   if (event.target == document.getElementById("menuOverlay")) { openMenu; } }

<script src="https://apis.google.com/js/client.js?onload=checkAuth">