New on HTMLGoodies: Test Your HTML

We’ve added a new feature to HTMLGoodies that enables you, the reader, to actually test your HTML live on our site. Where applicable, we’ll add a “test the code” form on a tutorial page. If you’d like to test out the HTML, CSS or JavaScript that is being discussed, simply copy and paste it into the form, and press the “view” button. A new window or tab (depending on how you have your browser configured) will open, showing the results of the code you just entered.

How Does It Work?

This is what the Test Your HTML box will look like, except that we have already entered some code, in this case, a bit of JavaScript that writes out your IP address when the window is opened, and a couple lines of CSS that make use of the Google Font API.

And here’s how it will normally appear on the page:

Test Out Your Code

Can I See the Code That Does the Work?

The JavaScript behind this little tool is fairly simple. It just takes the text that you enter into the form field, and writes it to the new document that is opened. Your web browser does the rest. Here’s the actual JavaScript function:

function displayHTML(form) {
  var inf = form.htmlArea.value;
  win = window.open(“, “, ‘popup’, ‘toolbar = no, status = no’);
  win.document.write(“” + inf + “”);
}

Note that since your web browser actually interprets the HTML code you have entered, the way it will behave will depend on the features that are supported by your browser. Have fun!