Wie hier auf den Seiten zu sehen, gibt es ein Button, um den Quelltext bei Codepen zu testen. Dieses Tool erzeugt einen Button, den sie in ihrer Webseite einbinden können, um ihren Code bei Codepen zu zeigen und zu testen
Code
<style>
*{
margin:0;
padding:0;
}
h1,body{
width:100%;
text-align:center;
}
textarea{
width: 100%;
min-height:200px;
background:#222;
color:white;
border:2px solid white;
}
input,select{
background:#222;
color:white;
float: right;
border:2px solid white;
}
table,td{
border:1px solid black;
}
table{
width:80%;
margin:60px auto;
}
#codepen-button {
background:black;
color:white;
font-size:23px;
cursor:pointer;
}
table input, table select ,table label{
width: 100%;
background:#222;
color:white;
border:2px solid white;
}
#build-api-button,.ueber {
font-size:22px;
width: 100%;
text-align: center;
}
</style>
<body>
<h1>CodePen New Pen Generator</h1>
<p>Erstelle ein Button womit der Code direkt in Codepen angezeigt wird.</p>
<table>
<tr>
<td>Title </td>
<td><input type="text" data-type="title"></td>
</tr>
<tr>
<td>Description </td>
<td><input type="text" data-type="description"></td>
</tr>
<tr></tr>
<tr>
<td class="ueber" colspan="2">HTML einstellungen</td>
</tr>
<tr></tr>
<tr>
<td>HTML PreProcessor</td>
<td>
<select data-type="html_pre_processor">
<option></option>
<option>haml</option>
<option>markdown</option>
<option>slim</option>
<option>jade</option>
</select>
</td>
</tr>
<tr><td colspan="2">
<textarea data-type="html"></textarea></td></tr>
<tr>
<td class="ueber" colspan="2">
CSS Einstellungen</td></tr>
<tr><td>
CSS Pre Processor</td>
<td>
<select data-type="css_pre_processor">
<option></option>
<option>sass</option>
<option>scss</option>
<option>less</option>
<option>stylus</option>
</select>
</td></tr>
<tr><td>
CSS Reset</td>
<td>
<select data-type="css_starter">
<option></option>
<option>normalize</option>
<option>reset</option>
</select>
</td></tr>
<tr><td>
CSS Prefix</td>
<td>
<select data-type="css_prefix">
<option></option>
<option>autoprefixer</option>
<option>prefixfree</option>
</select>
</td></tr>
<tr>
<td>CSS External Link</td>
<td>
<input type="text" data-type="css_external">
</td></tr>
<tr><td colspan="2">
<textarea data-type="css"></textarea>
</td></tr>
<tr>
<td class="ueber" colspan="2">
Js Einstellungen</td></tr>
<tr><td>
JS Library</td>
<td>
<select data-type="js_library">
<option></option>
<option>jquery</option>
<option>jquery_and_jqueryui</option>
<option>angular</option>
<option>zepto</option>
<option>mootools</option>
<option>prototype</option>
<option>yui</option>
<option>extjs</option>
<option>dojo</option>
</select>
</td>
</tr>
<tr>
<td>JS External Link</td>
<td>
<input type="text" data-type="js_external"></td>
</tr>
<tr><td colspan="2">
<textarea data-type="js"></textarea>
</td></tr>
<tr><td colspan="2">
<button id="build-api-button">Build New Pen Button</button></td></tr>
<tr><td class="ueber" colspan="2">
Test Link - or Copy HTML Below</td></tr>
<tr><td colspan="2">
<textarea onClick="this.setSelectionRange(0, this.value.length)" id="code-view-container"></textarea>
</td></tr>
<tr><td>
<div id="codepen-button">
<form action="https://codepen.io/pen/define" method="POST" target="_blank">
<input id="data-input" type="hidden" name="data" value="{&quot;title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;css_external&quot;:&quot;&quot;,&quot;js_external&quot;:&quot;&quot;,&quot;html&quot;:&quot;&quot;,&quot;css&quot;:&quot;&quot;,&quot;js&quot;:&quot;&quot;}">
<input type="image" src="https://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" value="Create Pen" class="codepen-mover-button">
</form>
</div></td><td> Try it on CodePen </td>
</div>
</td></tr>
</table>
<script>
var BuildCodePenNewPen = (function () {
var CodePen_Data = {};
var CodePen_Data_string;
var stringReplace = function (obj){
var string = JSON.stringify(obj);
string = string.replace(/"/g, """);
string = string.replace(/'/g, "'");
return string;
};
var loopSelectsCreateProperty = function(selects){
for ( var i = 0, len = selects.length; i < len; i++ ){
var property_name = selects[i].getAttribute('data-type');
var property_value = selects[i].value;
CodePen_Data[property_name] = property_value;
}
};
var loopInputsCreateProperty = function(elements){
for ( var i = 0, len = elements.length; i < len; i++ ){
var property_name = elements[i].getAttribute('data-type');
var property_value = elements[i].value;
console.log(CodePen_Data[property_name] = property_value)
CodePen_Data[property_name] = property_value;
}
};
var showCode = function(){
var code_view_container = document.getElementById('code-view-container');
var codepen_button = document.getElementById('codepen-button');
var form = codepen_button.childNodes[1];
var form_clone = form.cloneNode(true);
code_view_container.value = codepen_button.innerHTML;
};
var buildAPI = function(){
var data_input = document.getElementById('data-input');
//var form = event.target.parentNode;
var selects = document.getElementsByTagName('select');
var inputs = document.getElementsByTagName('input');
var textareas = document.getElementsByTagName('textarea');
loopInputsCreateProperty(inputs);
loopInputsCreateProperty(textareas);
loopSelectsCreateProperty(selects);
CodePen_Data_string = stringReplace(CodePen_Data);
data_input.value = CodePen_Data_string;
console.log(data_input.value);
showCode();
window.scrollTo(0, 2220);
};
var init = function () {
var build_api_button = document.getElementById('build-api-button');
build_api_button.addEventListener('click', buildAPI);
showCode();
};
return {
init: init
};
})();
BuildCodePenNewPen.init();
</script>
</body>