CodePlayer: An HTML, CSS, Javascript and JQuery Project

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

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 and jQuery
Application Code






<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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">








<script>

var windowHeight=$(window).height();
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(''+$("#htmlCode").val());

document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val());

});







Screen Captures

Figure 1: The initial Code Player Screen at Open

Figure 2: The CodePlayer with some HTML Code and the Results Window

Figure 3: The CodePlayer with some HTML and CSS Styling

Figure 4: The Result Screen of the CodePlayer Demonstrating Proof of Concept

PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 10





PLANET STEW CODEPLAYER: A PROJECT IN JAVASCRIPT AN 3