Skip to content
  • Home
  • Contact Us
  • About Us
  • Privacy Policy
  • DMCA
  • Linkedin
  • Pinterest
  • Facebook
thecscience

TheCScience

TheCScience is a blog that publishes daily tutorials and guides on engineering subjects and everything that related to computer science and technology

  • Home
  • Human values
  • Microprocessor
  • Digital communication
  • Linux
  • outsystems guide
  • Toggle search form

Code Player | Javascript project for Students

Posted on May 2, 2021November 19, 2022 By YASH PAL No Comments on Code Player | Javascript project for Students

In this javascript tutorial, we are going to make a code player, a simple javascript project for students. using this code player we can easily write HTML, CSS, and Javascript and get the desired output as you see in the given below image.

Make an Code Player in javascript programming | Javascript project

Table of Contents

  • Introduction to Javascript [Code Player] project.
    • Code of Project

Introduction to Javascript [Code Player] project.


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 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>

Also, read

  • Stopwatch in Javascript
  • Javascript project for practice – Github user information
  • Form validation using Jquery in HTML
javascript, project, solutions Tags:html, javascript, projects

Post navigation

Previous Post: Stop Watch in Javascript programming language.
Next Post: Form Validation using Jquery in HTML

Related Posts

Form Validation using Jquery in HTML javascript
Javascript project for practice | Github User Information javascript
Stop Watch in Javascript programming language. javascript
Add an Custom Snippet for Javascript in Visual Studio Code developer guide

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Pick Your Subject
Human Values

Copyright © 2023 TheCScience.

Powered by PressBook Grid Blogs theme