Javascript project for Students

Code Player (a JavaScript project for students) – In this JavaScript tutorial, we will make a code player, a project for beginner students for practice of JavaScript programming.

Using this code player, we can easily write HTML, CSS, and JavaScript and get the desired output, as you see in the image given below.

(Javascript project for students) make an code player — Make Code Player

Introduction to the Code Player

In this simple JavaScript code player project, we have four buttons on the top header: HTML, CSS, JavaScript, and Output. We can toggle using these buttons. And we have three text area sections.

And in the first text area, we can write the HTML code, in the second text area, we can write the CSS code, and in the third text area, we can write the JavaScript code. And in the iframe section, you will see the output of the code.

Key point – Before running this code you need to install the jquery module in your system and then add the path to the project in this head section of the script tag. if you will not do then you can’t run this project.

Code of the project

<!DOCTYPE html>
<html>
<head>
    <title>code player</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">
        body {

              font-family: sans-serif;
              padding: 0;
              margin: 0;
        }
        #header {

                width: 100%;
                background-color: #EEEEEE;
                padding-top: 5px;
                padding-bottom: 5px;
                height: 30px;
        }
        #logo {

             float: left;
             font-weight: bold;
             font-size: 120%;
             padding: 3px 5px;
        }
        #buttonContainer {

                width: 233px;
                margin: 0 auto;
        }
        .togglebutton {

              float: left;
              border: 1px solid grey;
              padding: 6px;
              border-right: none;
              font-size: 90%;
        }
        #html {

                border-top-left-radius: 4px;
                border-bottom-right-radius: 4px;

        }
        #output {

            border-top-left-radius: 4px;
                border-bottom-right-radius: 4px;
                border-right: 1px solid grey;  
        }
        .active {

              background-color: #E8F2FF;
        }
        .hbutton {

              background-color: grey; 
        }
        textarea {
              resize: none;
              border-top: none;
              border-color: grey;
        }
        .panel {

               float: left;
               width: 50%;
               border-left: none;
        }
        iframe {

              border: none;
        }
        .hidden {

             display: none;
        }
    </style>
</head>
<body>
    <div id="header">
          <div id="logo">
             CodePlayer
          </div>
          <div id="buttonContainer">
            <div class="togglebutton active" id="html">HTML</div>
            <div class="togglebutton active" id="css">CSS</div>
            <div class="togglebutton active" id="javascript">JavaScript</div>
            <div class="togglebutton active" id="output">Output</div>
          </div>
    </div>
    <div id="bodycontainer">
        <textarea id="htmlpanel" class="panel "> 
            <p id="paragraph"> Hello yash </p> </textarea>
        <textarea id="csspanel" class="panel hidden">p {color: green;}</textarea>
        <textarea id="javascriptpanel" class="panel hidden">
            document.getElementById("paragraph").innerHTML = "Welcome to code player";
        </textarea>
        <iframe id="outputpanel" class="panel"></iframe>
    </div>
    <script type="text/javascript">
        function updateout(){
               $("iframe").contents().find("html")
           .html( "<html><head><style type= 'text/css'>"
            + $("#csspanel").val() + 
            "</style></head><body>" + 
            $("#htmlpanel").val() + "</body></html>");
               document.getElementById('outputpanel')
            .contentWindow.eval($("#javascriptpanel").val());   
        }
      $(".togglebutton").hover( function(){
           $(this).addClass("hbutton")
      }, function(){
             $(this).removeClass("hbutton");
      });       
      $(".togglebutton").click(function(){
             $(this).toggleClass("active");
             $(this).removeClass("hbutton");
             var panelid = $(this).attr("id") + "panel";
             $("#" + panelid).toggleClass("hidden");
              var numberofactivepanels = 4 - $('.hidden').length;
             $(".panel").width(($(window).width() / numberofactivepanels) - 10); 
      });  
      $(".panel").height($(window).height() - $("#header").height() - 20); 
      $(".panel").width(($(window).width() / 2) - 10);    
      updateout();
      $("textarea").on('change keyup paste', function(){
        updateout();    
      }); 
    </script>
</body>
</html>

Other JavaScript projects

Javascript project for Students | Code Player

Introduction to the Code Player

Leave a Reply