Teste deinem HTML, JS und CSS Code oder Code dein Ergebnisse wie gewünscht anzeigt.
Dieses Tool ist sowas wie Codepen und jsfiddle und co es auch machen
Code
<style>
html.Live-Editor,body.Live-Editor,main.Live-Editor{
margin: 0;
padding: 0;
}
main.Live-Editor{
padding: 20px;
background-color: #666;
}
.Live-Editor#input{
position:relative;
height: 300px;
overflow: hidden;
resize: vertical;
}
.Live-Editor#input label.textarea{
display: inline-block;
position: relative;
width: 33%;
height: 100%;
}
.Live-Editor#input label.textarea.head{
position:absolute;
top:35px;
}
.Live-Editor#input fieldset{
position:absolute;
top:40px;
margin:0;
padding:5px;
border:none;
border-radius:20px;
background-color:#333;
}
.Live-Editor#input label.checkbox{
padding:10px;
color:#ccc;
}
.Live-Editor h2{
width: 100%;
text-align: center;
margin:0;
border-radius: 20px 20px 0 0;
background-color: #333;
border-bottom: 1px solid #666;
color: #999;
}
.settings{
box-sizing: border-box;
width: 100%;
height:40px;
padding: 10px;
resize: none;
margin:0 0 10px 0;
text-align:center;
border:none;
border-radius:10px;
background-color: #333;
color: #ccc;
}
.Live-Editor#input textarea{
box-sizing: border-box;
width: 100%;
height: calc(100% - 80px);
padding: 10px;
resize: none;
border:none;
border-radius: 0 0 20px 20px;
background-color: #333;
color: #ccc;
}
.Live-Editor#result{
border:1px black solid;
width: 100%;
min-height: 300px;
background-color: white;
}
.Live-Editor#reset,.Live-Editor#save{
display:inline-block;
margin:10px 0 20px;
padding:10px 20px;
background-color:#ddd;
color:black;
border:none;
font-family:initial;
font-size:initial;
line-height:initial;
text-decoration:none;
cursor:pointer;
}
.Live-Editor#reset:hover,.Live-Editor#save:hover{
background-color:#eee;
}
.Live-Editor#console{
max-height: 200px;
overflow-y: scroll;
background-color: #333;
color: #ccc;
padding: 10px;
border-radius: 0 0 20px 20px;
}
.Live-Editor#console p{
margin: 0;
}
</style>
<body class="Live-Editor">
<main class="Live-Editor">
<fieldset class="settings">
<label class="checkbox"> <input id="webconsole" type="checkbox" checked/>activate Web console</label>
<label class="checkbox"> <input id="jquery" type="checkbox"/>activate Jquery</label>
<label class="checkbox"> <input id="showhead" type="checkbox"/>toggle HTML head input</label>
</fieldset>
<form class="Live-Editor" id="input">
<br><br>
<label class="textarea head"><h2>HTML head</h2>
<textarea class="head"><meta charset="utf-8"/></textarea>
</label>
<label class="textarea"><h2>HTML</h2>
<textarea class="html"><h1>On-the-fly HTML / CSS / JavaScript Editor</h1></textarea>
</label>
<label class="textarea"><h2>CSS</h2>
<textarea class="css" placeholder="Your CSS here">
body{
background-color:gold
}
h1{
text-align:center;
}
</textarea>
</label>
<label class="textarea"><h2>JavaScript</h2>
<textarea class="js" placeholder="Your JavaScript here">console.log(new Date());
$('h1').css({color:'red'}); //test jquery toggle</textarea>
</label>
</form>
<iframe class="Live-Editor" id="result" srcdoc="">
</iframe>
<a class="Live-Editor" id="reset">Reset</a>
<a class="Live-Editor" id="save">Save</a>
<h2 class="Live-Editor">Console</h2>
<div class="Live-Editor" id="console"></div>
</main>
<script>
var headArea=document.getElementsByClassName('head')[1];
var htmlArea=document.getElementsByClassName('html')[0];
var cssArea=document.getElementsByClassName('css')[0];
var jsArea=document.getElementsByClassName('js')[0];
var resultHtml=document.getElementById('result').attributes.getNamedItem('srcdoc');
var consDiv=document.getElementById("console");
var closeTag='<\/';
var webconsole='';
var jq='';
var befHead='<!DOCTYPE html><html><head>';
var befCss='<style type="text/css">';
var aftCss=closeTag+'style>';
var befHtml='<title>result title'+closeTag+'title>'+closeTag+'head><body>';
var befJs='<script>';
var aftJs=closeTag+'script>'+closeTag+'body>'+closeTag+'html>';
resultHtml.value='test'
if (navigator.userAgent.match('Trident|Edge')){
alert(' This pen does not work with Microsoft Internet Explorer / Edge');
throw'';
};
//MAIN function
function run(){
resultHtml.value=befHead+webconsole+headArea.value+befCss+cssArea.value+aftCss+befHtml+htmlArea.value+jq+befJs+jsArea.value+aftJs;
//console.log(headArea.value);
};
function reset(){
htmlArea.value=htmlArea.textContent;
cssArea.value=cssArea.textContent;
jsArea.value=jsArea.textContent;
consDiv.textContent="";
run();
}
function save(){
var fullpage = new Blob([resultHtml.value], {type : 'text/html'});
var pageUrl= URL.createObjectURL(fullpage);
document.getElementById('save').href=pageUrl;
document.getElementById('save').download='index.html';
};
function wcons(){
webconsole=(this.checked?'<script>console.log=function(text){var cons=window.parent.document.getElementById("console");cons.innerHTML="<p></p>"+cons.innerHTML;cons.firstElementChild.textContent=text;}'+closeTag+'script>':'');
run()
};
function jquer(){
jq=(this.checked?'<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">'+closeTag+'script>':'');
run()
};
function showhead(){
document.getElementsByClassName('textarea')[1].style.cssText=(this.checked?'z-index:-1':'z-index:0');
run()
};
//Event Handlers
htmlArea.addEventListener("input",run);
cssArea.addEventListener("input",run);
jsArea.addEventListener("input",run);
document.getElementById('reset').addEventListener('click',reset);
document.getElementById('save').addEventListener('click',save);
document.getElementById("webconsole").addEventListener('change',wcons);
document.getElementById("jquery").addEventListener('change',jquer);
document.getElementById("showhead").addEventListener('change',showhead);
//Initialize
wcons.call(document.getElementById("webconsole")); //includes call to run()
</script>
</body>