Skip to content

Instantly share code, notes, and snippets.

@istockmarket

istockmarket/codein-4b.markdown

Created October 13, 2025 19:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save istockmarket/47c06e5a643d7f5bc4dfd8c929c4c5da to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save istockmarket/47c06e5a643d7f5bc4dfd8c929c4c5da to your computer and use it in GitHub Desktop.
Download ZIP
Codein 4b
Raw
index.html
 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4b HTML Live Editor</title> <style> body { font-family: Arial, sans-serif; margin: 0; } #editor { width: 50%; height: 300px; float: left; } #preview { width: 50%; height: 300px; float: left; border-left: 1px solid #ccc; background: #fafafa; } #profile { padding: 10px; background: #eee; } #github { margin: 10px 0; } </style> </head> <body> <div id="profile"> <strong>Profile</strong> <form id="profileForm"> Name: <input type="text" id="userName" value="Your Name"> <button type="submit">Update</button> </form> <div id="profileDisplay">Welcome, <span id="displayName">Your Name</span>!</div> </div> <div id="github"> <strong>GitHub Repository:</strong> <input type="text" id="repoInput" placeholder="Enter repo URL"> <button onclick="alert('GitHub integration coming soon!')">Connect</button> </div> <div> <textarea id="editor" placeholder="Write your HTML code here...">&lt;!-- 4b HTML Coding --&gt; &lt;h1&gt;Four B H Team&lt;/h1&gt; &lt;p&gt;This is a live HTML editor!&lt;/p&gt;</textarea> <iframe id="preview"></iframe> </div> <script> const editor = document.getElementById('editor'); const preview = document.getElementById('preview'); function updatePreview() { preview.srcdoc = editor.value; } editor.addEventListener('input', updatePreview); updatePreview(); document.getElementById('profileForm').addEventListener('submit', function(e) { e.preventDefault(); document.getElementById('displayName').textContent = document.getElementById('userName').value;
Raw
script.js
var runner = document.getElementById('runner'),
editor = document.getElementById('editor'),
downloader = document.getElementById('downloader'),
fileChooser = document.getElementById('fileChooser');
function preview() {
if (runner.checked) {
document.getElementById('viewer').srcdoc = editor.value;
}
}
editor.addEventListener('input', preview);
runner.addEventListener('change', preview);
['click', 'contextmenu'].forEach(event => downloader.addEventListener(event, function() {
var blob = new Blob([editor.value], {type: 'text/html'});
this.href = URL.createObjectURL(blob);
}));
document.getElementById('fontSizer').addEventListener('change', function() {
editor.style.fontSize = this.value + 'px';
});
document.getElementById('resetter').addEventListener('click', function() {
function resetFileChooserAndDownload() {
fileChooser.value = '';
downloader.download = 'template.html';
}
if (!editor.value || editor.value != editor.defaultValue && confirm('Your input will be lost.\nAre you sure you want to reset?')) {
resetFileChooserAndDownload();
editor.value = editor.defaultValue;
preview();
} else if (editor.value == editor.defaultValue) {
resetFileChooserAndDownload();
}
});
document.getElementById('selector').addEventListener('click', function() {
editor.select();
});
fileChooser.addEventListener('change', async function() {
var file = this.files[0];
if (file) {
downloader.download = file.name;
editor.value = await file.text();
preview();
}
});
document.getElementById('resizer').addEventListener('input', function() {
var resizerVal = this.value;
document.getElementById('editorWrapper').style.flexGrow = resizerVal;
document.getElementById('viewerWrapper').style.flexGrow = 100 - resizerVal;
document.getElementById('indicator').value = (resizerVal / 100).toFixed(2);
});
document.getElementById('viewsToggler').addEventListener('change', function() {
document.getElementById('main').classList.toggle('horizontal');
});
document.getElementById('themesToggler').addEventListener('change', function() {
editor.classList.toggle('dark');
});
document.getElementById('footerToggler').addEventListener('click', function() {
this.classList.toggle('on');
document.getElementById('footer').toggleAttribute('hidden');
});
document.getElementById('copier').addEventListener('click', function() {
navigator.clipboard.writeText('https://htmleditor.gitlab.io');
function toggleNotification() {
document.getElementById('notification').toggleAttribute('hidden');
}
toggleNotification();
setTimeout(toggleNotification, 1500);
});
window.addEventListener('beforeunload', function(event) {
if (editor.value && editor.value != editor.defaultValue) {
event.preventDefault();
event.returnValue = '';
}
});
preview();
Raw
scripts
<script src="https://github.com/mathjax/MathJax/issues/3094"></script>
<script src="https://htmleditor.gitlab.io"></script>
Raw
style.css
<!DOCTYPE html>
<html>
<head>
<style>
.profile-integration {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="profile-integration">
<!-- Profile integration content goes here -->
<p>This is styled with the .profile-integration class.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment