Click here to Skip to main content
Click here to Skip to main content

Introduction to jsfiddle

, 31 Jan 2014
Rate this:
Please Sign up or sign in to vote.
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:

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:

<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:

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

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

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

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

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:

$("#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:

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)

Share

About the Author

B. Clay Shannon
Publisher "Found in the Translation"
United States United States
I am the entire team at "Found in the Translation," which produces multilingual books (paperback and Kindle versions) such as "Don Quixote: In Spanish and English, Paragraph-by-Paragraph" among many others (English paired with not only Spanish, but also French and even Finnish). You can see all those books here: http://jsfiddle.net/clayshannon/pRgQL/75/
 
Personal web sites that I have created can be seen at http://usamaporama.azurewebsites.net and http://bigsurgarrapata.azurewebsites.net/ and http://www.awardwinnersonly.com
 
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: http://www.lulu.com/spotlight/blackbirdcraven
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140814.1 | Last Updated 31 Jan 2014
Article Copyright 2014 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid