Scribd
Upload
2 views2 pages

vscodel= like=app

The document is an HTML code for an 'Advanced Coding App' that features a CodeMirror text editor for coding in JavaScript. It includes functionalities to save and open files, with a user interface styled using CSS. The app allows users to write code, save it as a text file, and load existing code files.

Uploaded by

Kaze Playz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views2 pages

vscodel= like=app

The document is an HTML code for an 'Advanced Coding App' that features a CodeMirror text editor for coding in JavaScript. It includes functionalities to save and open files, with a user interface styled using CSS. The app allows users to write code, save it as a text file, and load existing code files.

Uploaded by

Kaze Playz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Coding App</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/
dracula.min.css">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
#editor {
height: 60vh;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.2em;
background-color: #1e1e1e;
color: #d4d4d4;
}
#toolbar {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Advanced Coding App</h1>
<div id="toolbar">
<button onclick="saveFile()">Save</button>
<button onclick="openFile()">Open</button>
</div>
<textarea id="editor">// Start coding here...</textarea>
<input type="file" id="fileInput" style="display:none;"
onchange="loadFile(event)">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></
script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/
javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/addon/
edit/closetag.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/addon/
edit/closebrackets.min.js"></script>
<script>
// Initialize CodeMirror editor
const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
lineNumbers: true,
mode: "javascript",
theme: "dracula",
autoCloseTags: true,
autoCloseBrackets: true
});

// Save file function


function saveFile() {
const text = editor.getValue();
const blob = new Blob([text], { type: 'text/plain' });
const anchor = document.createElement('a');
anchor.download = 'code.txt';
anchor.href = window.URL.createObjectURL(blob);
anchor.target = '_blank';
anchor.style.display = 'none';
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}

// Open file function


function openFile() {
document.getElementById('fileInput').click();
}

// Load file function


function loadFile(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
editor.setValue(e.target.result);
}
reader.readAsText(file);
}
}
</script>
</body>
</html>

You might also like