HTML COMPILER
EXPLANATION:
This code creates an HTML live editor that allows the user to input HTML code and preview the output in real-time. Here is a step by step explanation of the code:
The first line specifies the document type as HTML.
The <html> tag denotes the start of an HTML document.
The <head> tag contains meta information about the document, such as the title which is "Redeem_Tech-Editor"
Inside the head tag a style tag is used and .container{display: flex;flex-direction: row;} is used to define a class for the parent container. It sets the display to flex and flex-direction to row, this is used to split the display for html-input and html-preview into two equal parts.
#html-input, #html-preview {width: 55%;} is used to define classes for the input and preview elements, it sets the width of both the elements to 55%.
The <body> tag contains the visible content of the document.
Inside the body, <h1>HTML Live Editor</h1> is used to create a heading with text "HTML Live Editor"
<div class="container"> is used to define a container with class 'container' which is defined in the stylesheet
Inside the container, a <textarea> element is created with an id "html-input" and some attributes like size, rows, cols, and font-size.
A <div> element is created with an id "html-preview" and some attributes like font-size which is used to hold the live preview of the HTML code.
<legend> is used to create a caption for the html-preview div, it also contains a button with text "Run" which will run the code and update the preview.
In the script section, const htmlInput = document.getElementById('html-input'); is used to get the reference of the textarea element and store it in a variable htmlInput
const htmlPreview = document.getElementById('html-preview'); is used to get the reference of the preview div and store it in a variable htmlPreview
function updatePreview() is used to define a function that updates the
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Redeem_Tech-Editor</title>
<style>
/* Define a class for the parent container */
.container {
display: flex;
flex-direction: row;
}
/* Define classes for the input and preview elements */
#html-input, #html-preview {
width: 55%;
}
</style>
</head>
<body align = "left">
<h1>HTML Live Editor</h1>
<div class="container">
<!-- Create a textarea element for the user to input HTML code -->
<textarea id="html-input" size = "200" rows="30" cols="80" style="font-size: 18px;"></textarea>
<!-- Create a div to hold the live preview of the HTML code -->
<legend><div id="html-preview" style="font-size: 18px;"></div><legend><big>OUTPUT</big></legend></legend>
</div>
<br><button onclick="updatePreview()"><big>Run</big></button></br>
<script>
// Get references to the textarea and preview div
const htmlInput = document.getElementById('html-input');
const htmlPreview = document.getElementById('html-preview');
// Define a function to update the live preview
function updatePreview() {
// Set the innerHTML of the preview div to the value of the textarea
htmlPreview.innerHTML = htmlInput.value;
}
</script>
</body>
</html>
TEXT EDITOR
USE OF TEXT-EDITORS IN TERMS OF CODING NOR PROGRAMMING:
0 Comments