Running head: PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 1
Planet Stew CodePlayer: A Project in Javascript and jQuery
Daniel LeBlanc
planetstew.com
Personal Website Development Project
June 01, 2015
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 2
Abstract
This paper outlines a software development project written in HTML, CSS, Javascript and
jQuery. Developing code for the Internet requires extensive development time and testing.
Working directly on an existing website can interrupt or slow server response time for clients or
other users. The Planet Stew CodePlayer allows a developer to work in an offline development
environment to create code in HTML with CSS and Javascript in separate windows. When a
user wants to test their application development they can click the ‘run’ button and the results of
their combined code; HTML, CSS and Javascript code are combined together in the ‘Result’
window. A user can toggle between all 4 windows of the code player or view all 4 windows at
once. Toggle buttons along the top of the menu bar allow a user to choose which windows they
want to work with at any given time. Each windows represents a difference development file.
There is a window for HTML code, a window for CSS code and a window for Javascript code.
Although this application can be uploaded and run from a website, it is recommended that this is
utilized in an offline environment since the ability to use it to edit Javascript could put file
security at risk on a live website. You can however, disable the Javascript and use the other
functions without risk. When the application is working as intended then the code can be copied
into separate documents and instantiated on a web server.
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 3
Planet Stew CodePlayer: A Project in Javascript and jQuery
Application Code
<!doctype html>
<html>
<head>
<title>Planet Stew Code Player</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"
/>
<meta name="viewport" content="width=device-width, initial-
scale=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smo
othness/jquery-ui.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-
ui.min.js"></script>
<style>
body {
margin:0;
padding:0;
}
#menuBar {
width:100%;
Height:40px;
background-color:#7ca5cc;
border-bottom:1px solid grey;
z-index:1;
}
#logo {
float:left;
position:absolute;
margin:0;
padding:0;
margin-left:10px;
z-index:5;
}
#appName {
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 4
font-family: "HelveticaNeue-Light", "Helvetica Neue
Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-
serif;
font-size:.7em;
font-weight:bold;
padding:5px 0 0 20px;
margin-left:65px;
}
#buttonDiv {
float:right;
padding:0 10px 0 0;
}
#toggles {
width:189px;
margin:0 auto;
list-style:none;
border:1px solid grey;
padding:0;
border-radius:3px;
height:19px;
}
#toggles li {
float:left;
border-right:1px solid grey;
padding-right:7px;
padding-left:7px;
}
.clear {
clear:both;
}
.codeContainer {
top:-2px;
margin:0;
float:top;
border:none;
position:relative;
height:100%;
width:50%;
float:left;
z-index:2;
}
.codeContainer textarea {
width:99%;
height:100%;
border:none;
border-right:1px solid grey;
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 5
border-top:2px solid grey;
font-family:monotype;
font-size:90%;
box-sizing:border-box;
padding:15px 5px 5px 5px;
z-index:3;
}
.codeLabel {
position:absolute;
right:10px;
top:10px;
z-index:4;
}
#CSSContainer, #JSContainer {
display:none;
}
iframe {
height:100%;
position:relative;
left:20px;
border:none;
}
.selected {
background-color:grey;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menuBar">
<div id="logo">
<img src="images/weeLogo.png" />
</div>
<div id="appName">
Planet Stew CodePlayer
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
<ul id="toggles">
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 6
<li class="toggle selected">HTML</li>
<li class="toggle">CSS</li>
<li class="toggle">JS</li>
<li style="border:none" class="toggle
selected">Result</li>
</ul>
</div>
<div class="clear"></div>
<div class="codeContainer" id="HTMLContainer">
<div class="codeLabel">HTML</div>
<textarea id="htmlCode"></textarea>
</div>
<div class="codeContainer" id="CSSContainer">
<div class="codeLabel">CSS</div>
<textarea id="cssCode"></textarea>
</div>
<div class="codeContainer" id="JSContainer">
<div class="codeLabel">JS</div>
<textarea id="jsCode"></textarea>
</div>
<div class="codeContainer" id="resultContainer">
<div class="codeLabel">Result</div>
<iframe id="resultFrame"></iframe>
</div>
</div>
<script>
var windowHeight=$(window).height();
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 7
var menuBarHeight=$("#menuBar").height();
var codeContainerHeight=windowHeight-menuBarHeight;
$(".codeContainer").height(codeContainerHeight+"px");
$(".toggle").click(function() {
$(this).toggleClass("selected");
var activeDiv=$(this).html();
$("#"+activeDiv+"Container").toggle();
var showingDivs=(".codeContainer").filter(function(){
return($(this).css("display")!="none");
}).length;
var width=100/showingDivs;
$(".codeContainer").css("width", width+"%");
});
$("#runButton").click(function(){
$("iframe").contents().find("html").html('<style>'+$
("#cssCode").val()+'</style>'+$("#htmlCode").val());
document.getElementById("resultFrame").contentWindow.eval($
("#jsCode").val());
});
</script>
</body>
</html>
Screen Captures
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 8
Figure 1: The initial Code Player Screen at Open
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 9
Figure 2: The CodePlayer with some HTML Code and the Results Window
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 10
Figure 3: The CodePlayer with some HTML and CSS Styling
PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 11
Figure 4: The Result Screen of the CodePlayer Demonstrating Proof of Concept
