Wednesday, September 21, 2016

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 and you get this displayed. All set and ready to go.


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.


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:


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.


When you click the button, you should see this:

No comments: