Creating your own jsfiddle part 2

Hello to all readers of Habr. In this article, we will continue to write your online code editor.

In this article we will make the function of saving the code in localStorage and after updating the page this code will be inserted into these 3 fields, and also we will make the function of downloading this code as a file.

Code changes from the first part

In the last part of the comments one user asked to make a delay before playing the code.

New code:

var htmlEditor = ace.edit("html-editor"); htmlEditor.setTheme("ace/theme/monokai"); htmlEditor.session.setMode("ace/mode/html"); var cssEditor = ace.edit("css-editor"); cssEditor.setTheme("ace/theme/monokai"); cssEditor.session.setMode("ace/mode/css"); var jsEditor = ace.edit("js-editor"); jsEditor.setTheme("ace/theme/monokai"); jsEditor.session.setMode("ace/mode/javascript"); function playCode() { htmlEditor.getSession().on('change', function() { update(); }) cssEditor.getSession().on('change', function() { update(); }) jsEditor.getSession().on('change', function() { update(); }) function update() { var res = document.getElementById('result').contentWindow.document; res.open(); res.write('<style>' + cssEditor.getValue() + '</style>'); res.write('<script>' + jsEditor.getValue() + '</script>'); res.write(htmlEditor.getValue()); res.close(); } } setTimeout(playCode, 2000); 

Now we proceed to the new code.

Store code in localStorage

Before js code, we will create a button that, when pressed, will save the code.

 <ul> <li class="save" id="save_code"> Сохранить</li> </ul> 

Now we will add the code that will send the data to localStorage, and then take it.

 var saveBtn = document.getElementById('save_code'); saveBtn.addEventListener("click", () => { var htmlSave = htmlEditor.getValue(); var cssSave = cssEditor.getValue(); var jsSave = jsEditor.getValue(); localStorage.setItem('htmlSave', htmlSave); localStorage.setItem('cssSave', cssSave); localStorage.setItem('jsSave', jsSave); alert('Код сохранен!'); }); window.onload = () => { var htmlSave = (localStorage.getItem("htmlSave")); var cssSave = (localStorage.getItem("cssSave")); var jsSave = (localStorage.getItem("jsSave")); htmlEditor.session.replace(new ace.Range(0, 0, 1, 1), htmlSave); cssEditor.session.replace(new ace.Range(0, 0, 1, 1), cssSave); jsEditor.session.replace(new ace.Range(0, 0, 1, 1), jsSave); } 

Functions of each line:

localStorage.setItem ('htmlSave', htmlSave); - this code sends the html code to localStorage, where 'htmlSave' is the variable name in localStorage, and htmlSave is a variable that takes the code from the field (we called it here: var htmlSave = htmlEditor.getValue ();)

localStorage.getItem ("htmlSave") - this code retrieves the htmlSave variable from localStorage.

htmlEditor.session.replace (new ace.Range (0, 0, 1, 1), htmlSave); - changes the code from the field from replaces it with the code from localStorage.

Code downloads

Now we will create a function that will download the html, css, js code as a file, but before that we need to do html markup.

 <ul> <li id="save_code"> Сохранить</li> <li id="download_html"> Скачать Html файл</li> <li id="download_css"> Скачать Css файл</li> <li id="download_js"> Скачать Js файл</li> </li> </ul> 

Now we need to make a function that will download the file. In order not to prescribe the same code several times we will make one function and call it 3 times with different data.

  var htmlDownload = document.getElementById('download_html'); var cssDownload = document.getElementById('download_css'); var jsDownload = document.getElementById('download_js'); function download(clickElm, variable, fileType, fileName) { this.clickElm = clickElm; this.variable = variable; this.fileType = fileType; this.fileName = fileName; clickElm.addEventListener("click", () => { var code = ace.edit(variable); var textToWrite = code.getValue(); var textFileAsBlob = new Blob([textToWrite], {type:fileType}); var fileNameToSaveAs = fileName; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; if (window.webkitURL != null) { downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); } else { downloadLink.href = window.URL.createObjectURL(textFileAsBlob); downloadLink.onclick = destroyClickedElement; document.body.appendChild(downloadLink); } downloadLink.click(); }); } function destroyClickedElement(event) { document.body.removeChild(event.target); } 

In the download function, we have specified the arguments that will be called for non-repeating elements, of which:

• clickElm - the element on which the click will occur.
  
• variable - a variable that takes data from the field.
  
• fileType - file type when downloading
  
• fileName- file name
  

Now we need to call the function 3 times to download the html, css and js file.

 download(htmlDownload, "html-editor", "text/plain", "index.html"); download(cssDownload, "css-editor", "text/plain", "style.css"); download(jsDownload, "js-editor", "text/js", "app.js"); 

That's all.

The editor we can get is the online code editor .