Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
169 views

CodePlayer An HTML CSS Javascript and JQ

This document outlines a software development project called Planet Stew CodePlayer, which allows developers to work on code offline in separate HTML, CSS, and JavaScript windows. When the "run" button is clicked, the code from each window is combined and displayed in the "Result" window. The CodePlayer is intended to be used offline for security, and the code can then be copied to live websites. Screenshots demonstrate the initial view with separate code windows and a results window displaying combined code.

Uploaded by

sfleandro_67
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
169 views

CodePlayer An HTML CSS Javascript and JQ

This document outlines a software development project called Planet Stew CodePlayer, which allows developers to work on code offline in separate HTML, CSS, and JavaScript windows. When the "run" button is clicked, the code from each window is combined and displayed in the "Result" window. The CodePlayer is intended to be used offline for security, and the code can then be copied to live websites. Screenshots demonstrate the initial view with separate code windows and a results window displaying combined code.

Uploaded by

sfleandro_67
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

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

You might also like