htmlTester v0.05
Overview HTML Sample
CSS Sample JavaScript Sample
Try it Live Download
Conclusion

Overview

While I was writing the documentation on recaptcha, I wanted to show the code in action. What better way to show the code than to stop writing the doc for few hours and write a simple htmlTester, Hence this sub project came to life. It is in the most basic stage but allows one to include a simple html/css tester in an application. I will provide the existing codebase and opensource it, So other can contribute and make it better and use it in their own application.

design


 ᐱ 
HTML Sample

User is provided with simple html to start with in the left div which happens to be a textarea. They can write their own html and click Run button to see the result's in the right div.

sample image

 ᐱ 

CSS Sample

Also included a HTML/CSS drop down which demo's how one can use style sheets in their htmlTester.

css example

 ᐱ 
JavaScript Sample

Even though I provided a HTML/JS template code, It has issues, when I say issues the method calljs() shown in the code block actually calls the parent js code base and not the method in the textarea. That is due to textarea js method not being invoked. I just duplicated the calljs() in parent js script for the demo's sake. So in reality the JS call's in the textarea need's improvements to have a full functional JS call's.

js image

Clear

Clear's the html textarea. Now the user can write their own html and run to test. Or if the user clicks run when the textarea is empty we show a gif as below.

if nothing to run

Reload

Reload's the htmlTester to it's original state.



 ᐱ 
Try it Live




    ᐊ   Click Run to see Result




 ᐱ 
Download

htmlTester v0.5. Place all 3 files in one directory and open htmlTester.html in your browser to see it in action.

Download htmlTester.css

Download htmlTester.js

Download htmlTester.html

Conclusion

The htmlTester is some thing I put together really quick to show how we can include html demo on a Blog or Articles for one to see the live result. The concept is simple and it can be enhance using various tools online like prism.js to show textarea with code color, Also include other language compilers for realtime


Be the first to comment


 Register   123 easy steps Secure Or Comment as Guest

Your Comment

HTML tags allowed Render HTML   
Notify me by email of new comments
Email
hover over for pin

Your PIN