dev-resources.site

for different kinds of informations.

Creating a live HTML, CSS and JS displayer

Published at

1/15/2025

What is HTML?

First, HTML stands for HyperText Markup Language. Think of it as the skeleton of a website. It's what defines the structure and content of the page (text, images, buttons, etc.). It's written using special "tags," which are like instructions for the browser (the software you use to view websites).

HTML Marking Process with explanation

If you are not a complete newbie, you can skip this section directly to the next section. But if you have never placed hand on an HTML document, or even seen it, this is for you:

<!DOCTYPE html> First we start with this declaration, this is like saying, "Hey browser, this is an HTML5 document!" It tells the browser what kind of document to expect so it can render it correctly.
<html lang="en"> This is the main container for everything on the page. It's like the foundation of the house. lang="en" tells the browser that the language of the content is English(United States).
<head> This part of the code contains information about the webpage, not what you see on the page itself. It's like the blueprints' notes and specifications. Mostly, web devs (Abbr.: Web Developers) add it for SEO purposes, and it is generally advised to add one.
<meta charset="UTF-8">This line specifies what character set the page uses. UTF-8 is a standard one that allows the page to display most characters and symbols correctly. It's like ensuring the letters and numbers in your blueprints can be understood by everyone.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> This is important for websites to work well on different devices (phones, tablets, computers). It tells the browser how to scale and fit the page to the screen.
<title>Sleek HTML/CSS/JS Displayer</title> This is what appears in the browser tab or window title bar. It's like adding a nameplate in front of your house.
<link rel="stylesheet" href="style.css"> This line is saying "Hey! Go find a file called style.css and use it to make the page look pretty." style.css is a separate file that contains CSS (Cascading Style Sheets), which is responsible for the visual appearance of the page (colors, fonts, spacing, layout). It's like painting the walls and furnishing the house. For those, experienced web devs, who are seeing this, this seems out of a VSC boiler plate, because it is. For new developers, in VSC, one can use ! to generate a boilerplate fast. One can also set custom boiler plates, I do that a lot.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../all.min.css"> This line also links to a CSS file, but this one is hosted on a website (cdnjs.cloudflare.com). It contains definitions for icons used in the page, from a library called Font Awesome. It's like getting a pre-built PC.
</head> This closes the head tag.

Now, we move to the body, the main part of your html, that the users will see.

<body> This is where the content of your webpage goes—what users see in the browser window. It's like the rooms of the house, which the guests see.
<div class="app-container">
- <div> is a generic container that groups other elements. It's like dividing your house into sections.
- class="app-container" is a label for this container so you can style it with CSS or work with it using JavaScript.
<header class="app-header"> is where the header content goes (title, logo, buttons, etc.). This is like the front door and entryway of your house.
<div class="logo">HTML, CSS and JS Editor</div> This is another div container, but this one contains the name of the editor.
<div class="controls"> ... </div> This div contains elements that control the app, including a link and a couple of buttons.
<a href="/blog/" style="...; transition: opacity 0.3s; ...">Learn HTML, CSS and JS for free</a>
- <a> is an anchor tag that creates a link. When clicked, it takes you to the address written in href (in this case to /blog/).
- style is an attribute that lets you apply custom styles, instead of always changing the html code.
- The other styles specified here affect how the link looks and how it changes when it's hovered over. It will be discussed later, in CSS section :D
<button id="theme-toggle"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> This creates a button. id="theme-toggle" is a unique identifier for this button so you can style it with CSS or work with it using JavaScript. <i> tags contain icons from the font awesome library. It renders the moon icon, used to indicate Dark Mode.
<button id="full-screen-toggle"><i class="fas fa-expand"></i></button> Another button with an icon inside it, that is used to toggle fullscreen.

Now, we can close the header tag using </header>

<div class="code-editor-container"> ... </div> This div container holds the parts that make up the code editor.
Now, within the .code-editor-container (Abbr.: div with class = code-editor-container) we can add <div class="code-pane"> ... </div> This contains the "code" part of the application.
<div class="editor-header"> ... </div> This holds the elements on top of the code area (HTML, CSS, JS)
<span class="tab active" data-code="html">HTML</span> <span> is a simple container for text. class="tab active" gives it styling and indicates this tab is active. data-code="html" is data associated with the element.
<span class="tab" data-code="css">CSS</span> and <span class="tab" data-code="js">JS</span> These are span tags for the CSS and Javascript tabs.
<div class="code-area"> ... </div> This div container holds the area for the different editors.
<div class="line-numbers">1</div> This div contains the line numbers. In this case only the "1" is there.
<textarea id="html-code" class="code-input active" placeholder="HTML Code"></textarea>
- <textarea> is a multiline text input box where users can write code.
- id="html-code" is an identifier to work with it using JavaScript or style it with CSS.
- class="code-input active" allows you to style the textarea.
- placeholder="HTML Code" adds a message that is displayed in the textarea until the user types in it.
<textarea id="css-code" class="code-input" placeholder="CSS Code"></textarea> and <textarea id="js-code" class="code-input" placeholder="JavaScript Code"></textarea> These are similar to the HTML textarea, but used for CSS and JavaScript code respectively.

Now, we can close both the div tags using </div>

<div class="preview-pane"> ... </div> This is where the website preview will be.
<iframe id="preview"></iframe> is used to embed another webpage (in this case, the code written in the textareas) into the current page.

Now close .preview-pane using </div>

I had also added a footer in the final version, but, it is not required.

Now, we can close the body and html tags also.

Explained till now

HTML uses tags (e.g., <div>, <p>, <button>) to structure content, and their roles.
The <head> section contains metadata (information about the page).
The <body> section contains the visible content.
External CSS files (linked with <link>) handle the visual appearance.
External JavaScript files (linked with <script>) handle interactivity.

Actual code:

I presume, for intermediates, who know these basic principles, they want the code directly and can learn from it only.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sleek HTML/CSS/JS Displayer</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="app-container">
      <header class="app-header">
          <div class="logo">HTML, CSS and JS Editor</div>
          <div class="controls">
            <a href="/blog/" style="text-decoration: none; color: inherit; transition: opacity 0.3s; opacity: 0.8; padding-right: 20px;">Learn HTML, CSS and JS for free</a>
            <button id="theme-toggle"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
            <button id="full-screen-toggle"><i class="fas fa-expand"></i></button>
          </div>

      </header>
        <div class="code-editor-container">
            <div class="code-pane">
              <div class="editor-header">
                  <span class="tab active" data-code="html">HTML</span>
                  <span class="tab" data-code="css">CSS</span>
                  <span class="tab" data-code="js">JS</span>
              </div>
                <div class="code-area">
                   <div class="line-numbers">1</div>
                   <textarea id="html-code" class="code-input active" placeholder="HTML Code"></textarea>
                    <textarea id="css-code" class="code-input" placeholder="CSS Code"></textarea>
                    <textarea id="js-code" class="code-input" placeholder="JavaScript Code"></textarea>
                </div>
            </div>
            <div class="preview-pane">
                <iframe id="preview"></iframe>
            </div>
        </div>
        <footer>
            <p>Made with ❤️ by Kavya Sahai</p>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>

What is CSS?

CSS (Cascading Style Sheets) is used to style and layout web pages. It controls things like colors, fonts, spacing, and the overall visual appearance of your website. Think of it as the decorator of your house, that dictates how the walls look, where the furniture is placed, and generally it makes it beautiful.

Selectors

CSS uses selectors to target HTML elements you want to style. For example, body selects the entire body of your HTML document, and .app-header selects all elements with the class "app-header". We've discussed the classes in the past HTML section.

Properties & Values

After the selector, in the curly braces { }, you have properties and values. For example, color: #333; sets the text color to a dark grey.

Code Explanation

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

*: This is a universal selector, which applies to all the elements on your page.
margin: 0;: Sets the outer space around elements to zero, meaning no space is provided to the element.
padding: 0;: Sets the inner space (between an element's border and its content) to zero.
box-sizing: border-box; makes the size of the box to account for border and padding

This is like a "reset," to remove default spacing to ensure consistency.

  body {
      font-family: 'Arial', sans-serif;
      background-color: #f4f4f4;
      color: #333;
      transition: background-color 0.3s, color 0.3s; /*Theme Transition */
  }

font-family: 'Arial', sans-serif;: Sets the default font to Arial, or any generic sans-serif font if Arial is not available.
background-color: #f4f4f4;: Sets a very light gray background.
color: #333;: Sets the default text color to dark gray.
transition: background-color 0.3s, color 0.3s;: creates smooth transitions of 0.3 seconds, when the color/background color changes.

  body.dark-theme {
    background-color: #1a1a1a;
    color: #fff;
  }

body.dark-theme: This selects the body element, when the class .dark-theme is added.
background-color: #1a1a1a;: sets a dark background.
color:#fff;: sets a white text.

This styles the webpage for dark mode.

  .app-container {
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* Ensure full height */
      overflow-x: hidden;
  }

display: flex;: Turns the container into a flexbox, which allows you to control the layout of its children.
flex-direction: column;: Arranges the content inside the app-container in a vertical column.
min-height: 100vh;: Sets the minimum height of the container to the entire viewport height.
overflow-x:hidden; : hides the elements that overflow horizontally.

This makes the app fill the full page.

/* Header Style */
  .app-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: #f0f0f0;
      border-bottom: 1px solid #ddd;
      transition: background-color 0.3s;
  }

justify-content: space-between;: Pushes the elements within the header (logo and controls) to the opposite ends, spreading them out.
align-items: center;: Vertically aligns the elements in the center of the header.
padding: 20px;: adds 20px inner spacing to the element.
border-bottom: 1px solid #ddd;: Adds a 1px thin gray border at the bottom.
transition: background-color 0.3s;: adds a smooth background color change effect for 0.3 seconds

  .app-header.dark-theme{
      background-color:#2a2a2a
  }

This sets a darker background for the header in dark mode.

  .logo {
      font-size: 1.5em;
      font-weight: bold;
      text-decoration: none; /*Remove Link Decoration*/
      color: #222; /* Text Colour */
      transition: color 0.3s;
  }
  .app-header.dark-theme .logo {
      color: #fff;
  }

font-size: 1.5em;: Em Units makes the text's size 1.5 times the parent text size.
font-weight: bold;: Makes the text bold.
text-decoration: none;: Removes the default underline from links.
color: #222;: sets the text color to a dark color.

The second part styles the logo's color for the dark mode header.

  .controls button{
      background:none;
      border:none;
      cursor:pointer;
      color: #555;
      transition: color 0.3s;
  }
  .controls button:hover{
      color: #222;
  }
  .app-header.dark-theme .controls button {
      color: #fff;
  }

background: none;: Makes the button's background transparent.
border: none;: Removes the default border around the button.
cursor: pointer: changes cursor to pointer when hovered on the button.
color: #555;: Sets an initial text color for the buttons.
transition: color 0.3s;: makes a smooth color change of the text on hover.
color: #222; when the button is hovered, change color to another dark tone.
The last part defines the text color for dark mode buttons.

  /*Hide default sun icon and display default moon icon*/
  .controls button i.fa-sun {
      display:none;
  }
  .app-header.dark-theme .controls button i.fa-moon{
      display: none;
  }
  .app-header.dark-theme .controls button i.fa-sun {
      display: inline-block;
  }

display:none;: makes the element hidden.
display:inline-block;: makes the element visible.

This hides the sun icon and shows the moon icon, initially. When in Dark Mode, it hides moon, and shows the sun.

  /* Code Editor Area */
  .code-editor-container {
      display: flex;
      flex: 1; /* Take remaining space */
      height:calc(100vh - 130px); /* account for header and footer height */
      margin: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden; /* Avoid overflow */
  }

flex: 1; makes the element grow, and occupy remaining space.
height:calc(100vh - 130px); Sets the height of the element to 100% of the screen height minus 130 pixels.
border-radius: 5px;: Gives the container rounded corners.
overflow: hidden; : prevents elements from overflowing on the container.

This creates a layout for code editor with some spacing around it.

  /* Editor Header*/
  .editor-header {
      display: flex;
      background-color: #f8f8f8;
      border-bottom: 1px solid #ddd;
  }

This adds a thin bottom border and very light background color to the editor header.

  .editor-header .tab {
      padding: 10px 15px;
      cursor: pointer;
      color: #555;
      transition: background-color 0.3s, color 0.3s;
      border-bottom: 2px solid transparent;
  }

This styles the editor tabs, which allow us to switch between HTML, CSS, and JS.

  .editor-header .tab:hover {
     background-color:#eee;
  }

This gives the tab a light gray background when hovered on.

  .editor-header .tab.active {
      background-color: #fff;
      border-bottom: 2px solid #4a90e2; /* Highlight active tab */
      color: #222;
      font-weight: bold;
  }
  .editor-header .tab.active.dark-theme{
      color:#fff;
      background-color: #2a2a2a;
  }

This styles the currently active tab, with a background and a bottom border highlight. The second block of code is for dark mode.

  .code-pane, .preview-pane {
      flex: 1;
      padding: 10px;
      box-sizing: border-box;
      overflow: hidden; /* prevent code overflow */
  }

This sets up the basic shared styles for code pane and preview pane.

  .code-area {
      display: flex;
      height: 100%;
      position: relative;
  }

This sets up the code area, to have a flexible height and to hold absolute positioned elements.

  .code-area .line-numbers {
      width: 30px;
      padding: 10px;
      text-align: right;
      border-right: 1px solid #ddd;
      background-color: #f8f8f8;
      color: #999;
      white-space: pre-line;
      line-height: 1.4;
      overflow: hidden;
      user-select: none;
      transition:background-color 0.3s;
  }
  .code-area .line-numbers.dark-theme{
      background-color: #2a2a2a;
      border-right: 1px solid #4a4a4a;
      color:#666;
  }

white-space: pre-line;: Makes line numbers to break correctly
user-select: none;: Makes the line numbers non-selectable

This styles the line numbers with background, border and text properties, and the second block of code is for dark mode.

  .code-input {
      flex: 1;
      font-family: monospace;
      padding: 10px;
      border: none;
      outline: none;
      resize: none; /*Remove Resize Handle*/
      background-color: #fff;
      line-height: 1.4;
      height: 100%;
      display:none; /* Hide Default*/
      transition: background-color 0.3s;
  }
  .code-input.active {
      display:block;
  }
  .code-input.dark-theme{
      background-color:#2a2a2a;
      color: #eee;
  }

font-family: monospace;: Sets the code font to a monospaced font, where all letters occupy same space.
outline: none;: Removes the default outline that appears when an element is focused.
resize: none;: removes the resize handler.
display: none;: Hide the element by default.
display:block;: show the element, when the class active is added.

This styles the text area for the code input and adds a dark mode theme to it.

  .preview-pane {
      border-left: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center; /* Center iframe in container*/
      background-color: #fff;
      transition: border-left 0.3s, background-color 0.3s;
  }
  .preview-pane.dark-theme{
      background-color: #1a1a1a;
      border-left: 1px solid #3a3a3a;
  }

This styles the preview pane with a white background, left border and the dark mode styling.

  #preview {
      width: 100%;
      height: 100%;
      border: none;
      transition: opacity 0.3s; /* Smooth animation */
  }

This styles the iframe which holds the preview.

transition: opacity 0.3s;: Smoothly transitions the opacity

  /* Footer Styles */
  footer{
      text-align: center;
      padding: 10px;
      border-top: 1px solid #ddd;
      background-color: #f0f0f0;
      transition: background-color 0.3s;
  }
  footer.dark-theme {
      background-color:#2a2a2a;
      border-top: 1px solid #3a3a3a;
  }

Styles for the footer at the bottom with a thin line and some padding.

  /* Full Screen Styles */
  .full-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 1000; /* Ensure it overlays everything */
  }
  .full-screen .code-editor-container {
    height:100%;
    margin: 0;
    border: none;
  }
  .full-screen .preview-pane {
      border:none;
  }
  .full-screen .controls button i.fa-expand{
    display: none;
  }
  .full-screen .controls button i.fa-compress{
      display:inline-block;
  }

position: fixed;: makes an element stick to a position in viewport and not move with the scroll.
z-index:1000; makes the element to go above other elements, and appear on top.

This is responsible for making the code editor to take full screen. It hides the expand icon and shows the compress icon.

  /*Hide default compress icon, show only on fullscreen*/
  .controls button i.fa-compress{
      display: none;
  }

This hides the compress icon by default.

Key Concepts

Flexbox: A powerful layout tool to arrange elements in a container.
Transitions: Used to create smooth animations when properties change.
Dark Mode: Styles for when the page is in dark mode (darker backgrounds, lighter text, etc.).
Specific Selectors .class selects all elements with the class specified.

And now for the final boss, the JS💀

What is JavaScript?

JavaScript is a programming language that adds interactivity to websites. It allows you to make your webpage dynamic, such as responding to user actions, updating content without reloading the page, and more. In the analogy of house, Javascript is the electrical wiring that controls the lights, the doors, and other interactive elements.

Code Explanation

1. Selecting Elements

const htmlCode = document.getElementById('html-code');
const cssCode = document.getElementById('css-code');
const jsCode = document.getElementById('js-code');
const preview = document.getElementById('preview');
const codePanes = document.querySelectorAll('.code-input');
const tabBtns = document.querySelectorAll('.tab');
const lineNumbers = document.querySelector('.line-numbers');
const themeToggle = document.getElementById('theme-toggle');
const appContainer = document.querySelector('.app-container');
const body = document.querySelector('body');
const fullScreenToggle = document.getElementById('full-screen-toggle');
const container = document.querySelector('.app-container');

const: This declares a constant variable, that cannot be reassigned.
document.getElementById('id'): This selects a single HTML element, from the document, using its unique ID. It's like picking a specific object from your house, based on its special label.
document.querySelectorAll('.class'): selects all the elements that have the given class.
document.querySelector('.class') : selects the first element from the document, with a given class.

These lines are selecting various HTML elements from your page using their IDs or classes, so we can later work with them using JavaScript. For instance, it selects all the text boxes for HTML, CSS and JS using respective id, and saves it to a variable named htmlCode, cssCode, jsCode.

2. Setting up a Full Screen toggle

let isFullScreen = false;

This declares a new variable isFullScreen which checks if the editor is in full screen.

3. `updatePreview` Function

const updatePreview = () => {
    const html = htmlCode.value;
    const css = `<style>${cssCode.value}</style>`;
    const js = `<script>${jsCode.value}</script>`;
    const combined = `<!DOCTYPE html><html><head>${css}</head><body>${html}${js}</body></html>`;

    preview.srcdoc = combined;
};

const updatePreview = () => { ... }: This defines a function named updatePreview. A function is like a mini-program that performs a specific task.
htmlCode.value: This gets the content that the user has typed into the HTML text box.
Similar to above, cssCode.value and jsCode.value gets the values of their respective text areas.
Then the function creates strings (pieces of text) from the code user input, which wrap around in html style tags and script tags.
Then the function combines these strings in a complete HTML document string.
preview.srcdoc = combined;: This puts the combined HTML document into the iframe (preview window), which renders the webpage.

This function takes the code in the editor and shows the result in the preview. It essentially creates the user interface.

4. Debouncing Function

const debounce = (func, delay) => {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
};

const debounce = (func, delay) => { ... }: This defines a function named debounce.
This function takes another function (func) and a delay (delay) as parameters.
clearTimeout(timeout);: If the function is called again before delay, it cancels any ongoing timer.
setTimeout(() => { ... }, delay);: A timer is started to call the function, once the delay is over.

This debounce function prevents the preview from updating too frequently, making it more efficient. It's like waiting a few seconds before answering the phone, to ensure you get all the message. This is really useful when you type and the code rerenders for each keystroke.

5. Applying Debounce

const debouncedUpdate = debounce(updatePreview, 200);

This creates a new function called debouncedUpdate by using the previously defined debounce function, which makes updatePreview update at most once every 200 milliseconds.

6. `updateLineNumbers` Function

const updateLineNumbers = () => {
    let lines = htmlCode.value.split('\n').length;
    lineNumbers.innerText = Array.from({length:lines}, (_,i)=> i+1).join("\n");
}

This selects the HTML element with the class "line-numbers", that shows line numbers in the text area.
htmlCode.value.split('\n'): It splits the HTML code string into an array of strings, on each new line ("\n").
length on the array gives the number of lines.
Array.from({length:lines}, (_,i)=> i+1).join("\n") This code generates an array of numbers, starting from 1, to the number of lines. Then joins them in a single string, separated by newlines.
lineNumbers.innerText = ...: It puts this new string into the inner text of lineNumbers element.

This function updates the line numbers in the code editor. It's like adding a counter on the side of your house.

7. Event Listeners

codePanes.forEach(codePane => {
  codePane.addEventListener('input', () => {
    updateLineNumbers();
    debouncedUpdate();
});
});

codePanes.forEach(codePane => { ... });: This runs the following block of code for every element in the list called codePanes (all the code input text boxes).
codePane.addEventListener('input', () => { ... });: Whenever the user types anything into any of the code input text boxes, the arrow function, in {} is executed.
The function calls updateLineNumbers() and debouncedUpdate(), so when users type, the preview and line numbers are updated.

This sets up the editor to dynamically update whenever text input is detected. It's like the house reacting to your touch.

tabBtns.forEach(tab => {
    tab.addEventListener('click', function(){
    const codeType = this.getAttribute('data-code');
        tabBtns.forEach(btn => btn.classList.remove('active'));
        this.classList.add('active');
        codePanes.forEach(pane => {
          pane.classList.remove('active');
          if (pane.id === `${codeType}-code`){
              pane.classList.add('active');
          }
        });
        updateLineNumbers();
    });
});

This selects each of the tab elements (HTML, CSS, JS), using tabBtns.forEach(tab => { ... }).
addEventListener('click', function(){ ... }); If a user clicks on a tab, the following code will be executed.
const codeType = this.getAttribute('data-code');: Gets the attribute value for data-code for clicked tab. This gives 'html', 'css', 'js'.
tabBtns.forEach(btn => btn.classList.remove('active')); removes the active class from all of the tabs, and shows unselected.
this.classList.add('active'); adds the class active to the clicked tab.
codePanes.forEach(pane => { ... });: It iterates over each of the text areas.
pane.classList.remove('active'); removes the active class from the textarea
if (pane.id ===${codeType}-code){ pane.classList.add('active');} If the tab clicked and the text area correspond to each other, it adds the class active. For example, if HTML tab is selected, HTML code text area is made active.

This sets up the tabs to change the code view and update line numbers, when clicked. It's like changing the channel of TV.

themeToggle.addEventListener('click', function() {
    body.classList.toggle('dark-theme');
    appContainer.classList.toggle('dark-theme');
    document.querySelectorAll('.code-input').forEach(el => el.classList.toggle('dark-theme'));
    document.querySelector('.code-area .line-numbers').classList.toggle('dark-theme');
    document.querySelectorAll('.editor-header .tab.active').forEach(el => el.classList.toggle('dark-theme'));
    document.querySelector('.preview-pane').classList.toggle('dark-theme')
    document.querySelector('footer').classList.toggle('dark-theme');
    document.querySelector('.app-header').classList.toggle('dark-theme');
})

This addEventListener('click', function() { ... }); waits for the user to click the theme-toggle button.
element.classList.toggle('dark-theme'): This is a JS function, that adds a class name dark-theme to the element, if not present. If the class name is already there, it removes it.
document.querySelectorAll(...).forEach(el => el.classList.toggle(...));: It toggles the dark mode class for many elements.

This makes the theme toggle button work and change the styles of elements. This adds a functionality to the house.

fullScreenToggle.addEventListener('click', function(){
    isFullScreen = !isFullScreen;
    if(isFullScreen){
      container.classList.add('full-screen');
    } else {
      container.classList.remove('full-screen');
    }
    fullScreenToggle.innerHTML = isFullScreen ? '<i class="fas fa-compress"></i>' : '<i class="fas fa-expand"></i>';
})

This addEventListener('click', function() { ... }); waits for the user to click the full-screen-toggle button.
isFullScreen = !isFullScreen; If the editor is in full screen, it makes it false. Else, makes it true.
if(isFullScreen){ ... } else { ...}: If it is full screen, then add the class full-screen which applies the full screen styles. Else, it removes it, if already present.
fullScreenToggle.innerHTML = isFullScreen ? '<i class="fas fa-compress"></i>' : '<i class="fas fa-expand"></i>';: This changes the inner text of the fullScreenToggle element, and change the icons to compress or expand, based on if it is fullscreen.

This makes the fullscreen button to work, and toggles the full screen view.

8. Initial setup and first update

updateLineNumbers();
updatePreview();

These lines call the updateLineNumbers() and updatePreview() functions immediately when the page loads, which sets up the line numbers and renders the initial page.

Key Concepts

DOM Manipulation: JavaScript can modify HTML elements and their contents, after the page is loaded.
Event Listeners: They watch for user interactions and trigger code in response.
Functions: Reusable blocks of code that perform tasks.
Variables: Store data to be used and manipulated in the program.
Debouncing: Limiting the rate of execution of a particular function.

For, the final, want to see how our code editor looks? It looks pretty clean. Want to see it yourself? Why not? Modern HTML, CSS and JS Editor