practical - Week 8

2022-08-29

Practical 1: Using Jquery create simple hello world program ?

<html>
  <head>
    <title>jQuery Hello World</title>
      <script type="text/javascript" src="jquery-3.6.1.js"></script>
  </head>
<body>
  <script type="text/javascript">
    $(document).ready(function(){
        $("#msgid").html("This is Hello World by JQuery");
      });
</script>

<center>
  This is Hello World by HTML
  <div id="msgid">
  </div>
</center>
</body>
</html>

Practical 2: Using Jquery, show an alert message on click of a button

<html>

<head>
  <title>jQuery Hello World</title>
  <script type="text/javascript" src="jquery-3.6.1.js"></script>
</head>

<body>
  <script type="text/javascript">
    $(document).ready(function() {
      $('button').click(function() {
        alert('you clicked the button!');
      });
    });
  </script>
  <center>
    <div id="msgid">
      <button>Click me</button>
    </div>
  </center>
</body>

</html>

Practical 3: Using Jquery, Select a paragraph of inside an html page and set its background color to green on click of a button


<html>

<head>
  <style>
    .paragraph {
      background: moccasin;
      padding: 15px;
      width: 400px;
    }
  </style>
  <title>jQuery Hello World</title>
  <script type="text/javascript" src="jquery-3.6.1.js"></script>
</head>

<body>
  <script type="text/javascript">
    $(document).ready(function() {
      $('button').click(function() {
        $('.paragraph').css('background-color', 'yellow');
      });
    });
  </script>
  <center>
    <div id="msgid">
      <button>Set paragraph background color</button>
      <article>
        <p class="paragraph">
          Some text of the paragraph
          Some text of the paragraph
          Some text of the paragraph
          Some text of the paragraph
        </p>
      </article>
    </div>
  </center>
</body>

</html>