What is jsFiddle?

jsFiddle a nice tool to have, especially for web developers. It is a 'What you see is what you get tool that can do HTML, CSS and JavaScript. It can also access great many script libraries like, jQuery, Dojo, etc.

This is a must have tool if you are working on web pages. If you are a beginner or, one trying to learn web page authoring this is a great tool.

This is an online tool and therefore you do not need to install anything on your computer. You should have internet connection, though. .

You access this site https://jsfiddle.net/ and you get this displayed. All set and ready to go.

jsFiddle_00

You can test your HTML, CSS and JavaScript online with this tool

Test HTML:
In the HTML pane, just type this:

Welcome to jsFiddle

and click Run at the top.
Immediately you will see the result in the Result pane as shown.

jsFiddle_01



Add CSS and Test again:

Now I will style the text we  just wrote by adding the style rule in the CSS pane (right of HTML). This is the rule I am going to add:

h1{color: Magenta;
   text-align: center;
  font-family: verdana;}

After typing in click Run and you will immediately see the change as shown:

js_fiidle_02

Add HTML fragment to place a button with the text 'Click me' as shown.
You should see the button on the document.




 Write script for the button click:
Write the javascript code as shown which does the following:
When you click the button, the function test is run which should bring up the alert message.
The jsFiddle with button and JavaScript is as shown.

jsFiddle_03

When you click the button, you should see this: