Click here to Skip to main content
15,861,168 members
Articles / Web Development / HTML
Tip/Trick

Introduction to jsfiddle

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
31 Jan 2014CPOL2 min read 14.4K   1  
A simple introduction to jsfiddle

HTML + CSS + jQuery == Synergy - Oh, My!

To view it from an MVC perspective, many simple web pages are built using HTML (HyperText Markup Language, the Model), CSS (Cascading Style Sheets, the View), and jQuery (the Controller). There are other ways to look at it, of course, but that's one way to mentally approach this web trinity. jsfiddle (http://jsfiddle.net/) is a great tool/site that allows you to produce quick-and- dirty "proof of concept" web pseudo-pages using these three friends.

To try it out, go to the jsfiddle site. You will see there a blank "canvas" with four sections, or quadrants:

Image 1

In the NW quadrant you put your HTML, in the NE quadrant the CSS, and in the SW corner any jQuery you might want to add. After doing so, you mash the "Run" button, and the result will appear in the SE quadrant.

For example, first, enter some HTML into the NW quadrant, such as:

HTML
<table border="1">
<tbody><tr>
<td id="author">MARK TWAIN BOOKS</td>
<td>Fiction</td>
<td>My Rating (scale from -1 [horrid] to 17 [superb])</td>
<td>Setting</td>
<td>Link</td>
</tr>
<tr>
<td>The Adventures of Huck Finn</td>
<td>Y</td>
<td>17</td>
<td>"St. Petersburg" (Hannibal, Missouri) and Mississippi River and towns along it</td>
<td><a target="_blank" href="http://www.amazon.com/exec/obidos/ASIN/0486280616/garrphotgall-20"><img width="107" height="160" src="http://ecx.images-amazon.com/images/I/616aYC%2BUIfL._SL160_.jpg" /></a></td>
</tr>
<tr>
<td>The Adventures of Tom Sawyer</td>
<td>Y</td>
<td>15</td>
<td>"St. Petersburg" (Hannibal, Missouri)</td>
<td><a target="_blank" href="http://www.amazon.com/exec/obidos/ASIN/0486400778/garrphotgall-20"><img width="107" height="160" src="http://ecx.images-amazon.com/images/I/51FG3HNTo8L._SL160_.jpg" /></a></td>
</tr>
<tr>
<td>Roughing It</td>
<td>N</td>
<td>17</td>
<td>From Missouri to Nevada/Washoe and on to California</td>
<td><a target="_blank" href="http://www.amazon.com/exec/obidos/ASIN/1494241986/garrphotgall-20"><img width="107" height="160" src="http://ecx.images-amazon.com/images/I/51iQZgOjQQL._SL160_.jpg" /></a></td>
</tr>
<tr>
<td>The Innocents Abroad</td>
<td>N</td>
<td>16</td>
<td>Europe and the "Holey" Land</td>
<td><a target="_blank" href="http://www.amazon.com/exec/obidos/ASIN/1484004353/garrphotgall-20"><img width="107" height="160" src="http://ecx.images-amazon.com/images/I/417hf9KKu3L._SL160_.jpg" /></a></td>
</tr>
<tr>
<td>Life on the Mississippi</td>
<td>N</td>
<td>13</td>
<td>The Mississippi River</td>
<td><a target="_blank" href="http://www.amazon.com/exec/obidos/ASIN/1840226838/garrphotgall-20"><img width="107" height="160" src="http://ecx.images-amazon.com/images/I/51l2lEbPWHL._SL160_.jpg" /></a></td>
</tr>
</tbody></table>

Note: If you want to format your HTML, you can clean it up by mashing the "TidyUp" button above.

You can mash the "Run" button now and the table will render in the Results (SE) quadrant:

Image 2

As you can see, the Table displays but is somewhat bland in appearance.

So, add some CSS in the NE quadrant, such as:

CSS
table {
    font-family: Consolas, Candara, 'Segoe UI Light', sans-serif;
    color: navy;
}

This will make the table arguably a little easier on the eyes:

Image 3

Now, you can also add some jQuery in the SW quadrant, in this case to find the HTML element with an ID of "author" and changes its text value to the author's real/birth name:

jquery
$("#author").text("SAMUEL L. CLEMENS BOOKS");

Select a jQuery version from the "Frameworks & Extensions" combo box.

You can check your jQuery syntax with "JSHint" button above. If there's something wrong with it, it will put a red dot on each line it finds fault with.

Once any issues have been successfully dealt with, run it by again mashing the "Run" button; you will now see:

Image 4

You can go directly to this fiddle, play around with it (change the CSS, etc.) here

Another example of a simple combination of HTML and CSS (doesn't have any jQuery at all), which can be examined to see how to link images to external pages, can be seen here

Now Go Forth and Conquer/Prosper By Making More Synergistic Combinations

This is just the barest and quickest of introductions to this handy dandy tool, and obviously a very spartan example of HTML, CSS, and jQuery. The Cloud is the limit of the synergistics combinations you can make. jsfiddle has many more features and nuances. Check them out!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Across Time & Space
United States United States
I am in the process of morphing from a software developer into a portrayer of Mark Twain. My monologue (or one-man play, entitled "The Adventures of Mark Twain: As Told By Himself" and set in 1896) features Twain giving an overview of his life up till then. The performance includes the relating of interesting experiences and humorous anecdotes from Twain's boyhood and youth, his time as a riverboat pilot, his wild and woolly adventures in the Territory of Nevada and California, and experiences as a writer and world traveler, including recollections of meetings with many of the famous and powerful of the 19th century - royalty, business magnates, fellow authors, as well as intimate glimpses into his home life (his parents, siblings, wife, and children).

Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.

I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction, including a two-volume social and cultural history of the U.S. which covers important events from 1620-2006: http://www.lulu.com/spotlight/blackbirdcraven

Comments and Discussions

 
-- There are no messages in this forum --