Developing a simple project on JavaScript and jQuery

0
3313

In this session today we will work on the project which deals with designing a form where we will use the concepts of CSS , javascript, jquery ,etc..Thus ,it will help us clearing our concepts about javascript and jquery.

  • So to begin with our project let’s follow the steps given below :

  1. First of all create an new folder on the desktop say project :
  2. 1

  3. In the project folder create an another folder name as css, js , and then create the index.html files open in the notepad++.
  4. v1

  5. Now go to jquery.com.
  6. 2

  7. Now click on the download button and you will get the following window :
  8. 3

  9. After you click on the first link as shown by the arrow in the above figure you will have the following window embeded with jquery code :
  10. 4

  11. Now in your project folder you have a js folder created , in this js folder create an text file jquery.js inside that file copy and paste the jquery code .
  12. Now open your index.html file in notepad++ and write the code in it as given below :

  13. So after writing the code your notepad++ window will have the following view :
  14. 5
    6

  15. Now when you run your index.html file in the browser you will get the following output :
  16. 7

  17. Now to implement styling in the form we will have to implement css code.
  18. Now in your css folder create style.css file and write the given code in style.css file.

  19. Now in the project folder you will have the following three contents :
  20. v9

  21. The css folder contains the style.css file when we open the css folder you will have the style.css file in it :
  22. v10

  23. Your js folder contain the 3 files , so it will have the following contents : animation.js, jquery.js , validation.js
  24. v11

  25. So now after adding the css file view of our index.html file will be changed and when you run it on the browser you will get the following output :
  26. v5

  27. Now to implement some animation on the form ,add the animation code in your animation.js file located in the js folder :

  28. So after writing the code your notepad++ window will have the following look :
  29. v7

  30. Lets perform some validation on our form ,so in your validation.js file write the code given below :

  31. So your notepad++ window will have the following look :
  32. v8

  33. After saving all your files run your index.html file .Thus you will get the following output window as shown below :
  34. v12

  35. Now when you click on next tab i.e Where Are You From ? the respective tab will be enlisted below as shown inj the image :
  36. v13

  37. When you click on next tab i.e What Do You Do? its list will be enlisted as shown below :
  38. v14

  39. In this tab form the *asterick mark represent the mandatory fields which you cannot skip.
  40. Thus we have created a form using jquery and javascript which enlists personal information , also implemented animation and validations in it.

LEAVE A REPLY

Please enter your comment!
Please enter your name here