Web Technology lab

Program 9

Develop jQuery script (with HTML/CSS) for:

a. Appends the content at the end of the existing paragraph and list.

b. Change the state of the element with CSS style using animate() method

c. Change the color of any div that is animated. 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Script</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      margin: 20px;
    }
    button {
      background-color: rgb(39, 212, 39);
      border: none;
      color: aliceblue;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      border-radius: 2px;
      padding-bottom: 5px;
    }
    p, ul {
      margin: 10px 0;
    }
    .animated-div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-top: 20px;
    }
    .highlight {
      border: 2px solid rgb(5, 242, 96);
    }
  </style>
</head>
<body>
  <div class="container">
    <button id="appendContent">Append Content</button>
    <button id="animateElement">Animate Element</button>
    <p id="paragraph">This is a paragraph.</p>
    <ul id="list">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div class="animated-div"></div>
  </div>
  <script src="script.js"></script>
  <script>
    $(document).ready(function () {
      // a. Append content to paragraph and list
      $('#appendContent').click(function () {
        $('#paragraph').append(' Appended text.');
        $('#list').append('<li>Appended item</li>');
      });

      // b. Animate element
      $('#animateElement').click(function () {
        $('.animated-div').animate(
          {
            width: '200px',
            height: '200px',
          },
          1000,
          function () {
            // c. Change the color after animation
            $(this).css('background-color', 'blueviolet').addClass('highlight');
          }
        );
      });
    });
  </script>
</body>
</html>

Output :-

Home Page :- output




Append Content Output :- output




Animated Element Output :- output
Comments

Replay !

0 Comments

Share Your Thoughts

Please enter your name
Please enter a valid email
Password must be at least 6 characters
Please enter your comment
0/500 characters
Email Verification Required
We've sent a 6-digit verification code to . Please enter the code below to verify your email address.
Email Verified Successfully!
Your email has been verified. Would you like to proceed with posting your comment?

Type "YES" to confirm and post your comment, or click Cancel to skip posting.