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