Try It editor like W3School source code
I Hope, you are finding an editor for your website where your user can practice the code of HTML, CSS, JavaScript code. You came to the right place here I will provide the source of the W3School's like try it editor with the bonus you will get a copy code box source code that will glow your website's view.
In this Try It editor you will see the two-button for copying the code and for running the code. You can only type HTML, CSS, JavaScript code in this editor because these are not server-side languages that need a server to compile and execute. These languages are compiled and run in the browser.
Source code of Try It editor
<div style="border: 3px solid #4CAF50; margin: auto; padding: inherit; height: 660px; width: 629px inherit; background-color: #ADB2AB;">
<center>
<button onclick="copy()" style="padding: 8px 15px; background-color: #4CAF50; border: none; display: inline-block; font-size: 15px; text-align: center; color: white; margin: 5px;">Copy Code</button><button onclick="run()" style="padding: 8px 15px; background-color: #4CAF50; border: none; display: inline-block; font-size: 15px; text-align: center; color: white; margin: 5px;">Run Code</button></center>
<center>
<textarea id="code" style="overflow: auto; margin: 0; padding: 10px; border: none; display: inline-block; text-align: left; font-size: 16px; height: 305; width: 98.9%;">
<script>
defining the JSON
var jsonObject = {"name" : "Aditya", "website_name" : "Computerpry", "created_at" : "5/07/2018"};
//display the json data
document.write(jsonObject.name+"<br>");//first way to get the value
//display the json value using the for-in loop
for(data in jsonObject)
{
document.write(jsonObject[data]+"<br>");
}
</script>
</textarea>
<iframe name="codearea" id="codearea" style="border: none; margin-top: 5px; height: 305px; width: 98.9%; overflow: scroll; background-color: white; color: black;">
</iframe></center>
</div>
<script>
function run() {
var content = document.getElementById('code').value;
var iframe = document.getElementById('codearea');
iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document:
iframe.contentDocument;
iframe.document.open();
iframe.document.write(content);
iframe.document.close();
return false;
}
run();
function copy()
{
/* Get the text field */
var copyText = document.getElementById("codearea");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied successfully ");
}
</script>
Copy button with JavaScript
<div style="width: 629px inherit; height: 600px; padding: inherit; border: 2px solid #4CAF50; background-color: white;">
<h3 style="text-align: center;">Try It editor Source Code</h3>
<hr>
<center>
<button onclick="copy()" style="display: inline-block; border: none; background-color: #4CAF50; padding: 8px 15px; color: white;">Click to Copy</button></center>
<center>
<textarea readonly id="codearea" style="border: none; margin: 6px; padding: 5px; height: 400px; width: 98%; font-size: 16px; border: 2px solid #4CAF50; text-align: left;">
</textarea>
</center>
<script type="text/javascript">
function copy()
{
/* Get the text field */
var copyText = document.getElementById("codearea");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied successfully ");
}
</script>
</div>
Here is the code you can use on your site or anything you want. The design is responsive for mobile apps, tablets and laptops.
Share my work with all your friends and family who is interested in programming.
You can support me with little money. My payment UPI id is 8839898858@paytm or you can bank transfer Ac. no. 919993153038 IFSC PYTM0123456 Name Aditya Narayan Soni
#programming #JavaScript #HTML #CSS
No comments