Kibekityo Juma Shafara
Kibekityo Juma Shafara's Blog

Follow

Kibekityo Juma Shafara's Blog

Follow
Create a simple code editor like for codepen with less than 10 lines of javascript

Photo by Valery Sysoev on Unsplash

Create a simple code editor like for codepen with less than 10 lines of javascript

Kibekityo Juma Shafara's photo
Kibekityo Juma Shafara
·Jun 2, 2022·

3 min read

Edoc Pen

  • In this article, we step by step, create a simple codepen-like code editor that allows us to write HTML and do many sorts of styling to it.
  • That's not all it renders the changes to your HTML or CSS immediately(live server 😀).
  • You can test it out at here

Step 1: Initialize project

We begin by creating a basic index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edoc Pen</title>
    <style></style>
</head>
<body>
</body>
</html>

Step 2 : Create necessary tags

  • Inside our body, we need to create two textareas, one where the HTML code will be written, and the other for CSS.
  • We also need a div with id= "output" where our output will be rendered.
<textarea name="" id="html-text-area" cols="30" rows="10"></textarea>
<textarea name="" id="css-text-area" cols="30" rows="10"></textarea>
<div id="output"></div>
  • Let's add an empty style tag inside the head tag, this is where our styles from the CSS text area will be sent
<style></style>

Our full HTML code should look like this now

<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Edoc Pen</title>
      <style></style>
  </head>
  <body>
      <textarea name="" id="html-text-area" cols="30" rows="10"></textarea>
      <textarea name="" id="css-text-area" cols="30" rows="10"></textarea>
      <div id="output"></div>
  </body>
</html>

If we open our HTML file in a browser, we should have two text areas.

output1.png

Step 3 : Add functionality

Now we need to connect the text areas to the style tag and output div so that we can have something functioning. We will do this with a few lines of javascript put in a script tag just above the closing body tag, simply explained below

<script>
       // Each variable in the first array will be assigned the 
       // corresponding value in the second array
       const [html_text_area, css_text_area, style, output] = 
                   [
                       document.querySelector('#html-text-area'),
                       document.querySelector('#css-text-area'),
                       document.querySelector('style'),
                       document.querySelector('#output')
                   ]

       html_text_area.addEventListener('keyup', e => {
           // lets first stop all natural outcomes related to this event
           e.preventDefault()

           // pass the value from the html text area to output div 
           output.innerHTML = html_text_area.value
       })

       css_text_area.addEventListener('keyup', e => {
           // lets first stop all natural outcomes related to this event
           e.preventDefault()

           // pass the value from the css text area to style tag
           style.innerHTML = css_text_area.value
       })
</script

With that, should now be having a working Edoc Pen

ouput2.png

The full code is as below


<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Edoc Pen</title>
        <style></style>
    </head>
    <body>
        <textarea name="" id="css-text-area" cols="30" rows="10"></textarea>  
        <textarea name="" id="html-text-area" cols="30" rows="10"></textarea>
        <div id="output"></div>

        <script>
            // Each variable in the first array will be assigned the 
            // corresponding value in the second array
            const [html_text_area, css_text_area, style, output] = 
                        [
                            document.querySelector('#html-text-area'),
                            document.querySelector('#css-text-area'),
                            document.querySelector('#output'),
                            document.querySelector('style')
                        ]

            html_text_area.addEventListener('keyup', e => {
                // lets first stop all natural outcomes related to this event
                e.preventDefault()

                // pass the value from the html text area to output div 
                output.innerHTML = html_text_area.value
            })

            css_text_area.addEventListener('keyup', e => {
                // lets first stop all natural outcomes related to this event
                e.preventDefault()

                // pass the value from the css text area to style tag
                style.innerHTML = css_text_area.value
            })
        </script>
    </body>
</html>

As simple as that, now we can write our code pens in our leisure time 😀. The next steps would include designing our text areas so that they look more code-like, you could add a font Consolas and a darker background I choose not to do that as I want this article shorter, thanks if you read it down here.

Follow me if you like this so that you don't miss out on the next exciting stuff

 
Share this