jQuery is actually fairly amazing

HTML display prototyper
After a very brief time reading the excellent jQuery tutorial on w3schools this afternoon. I've made a useful little prototyping page, which allows you to enter HTML in the text box and see it displayed below. It takes a staggeringly few lines of code.

First, the usual top-of-file business:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>Try HTML</title>

Then, we load in jQuery from Google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Now, the javascript. First, we check that the webpage has loaded:
<script>
$(document).ready(function(){

Then, we wait for someone to click on the button with the ID "show":
  $("#show").click(function(){

Now we take the value from the textarea with the ID "textin" and use it to set the HTML inside the element with the ID "results".
    $("#results").html($("#textin").val());
  });
});
</script>
</head>

<body>

Then, in the HTML, we have the area for the user to enter text:
<p><textarea id="textin" rows="4" cols="50"></textarea>

The button to press:
</p><button id="show">Show Results</button>

And the area to show the results:
<p id="results"> </p>
</body>
</html>

It has taken me significantly longer to write this blog post than it did to make that webpage. Hurrah for jQuery!

...

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.