Scribd Logo
Upload

Welcome to Scribd!

  • Lab 07 Web Eng Hasan Ahmed 321600 SE10A

    Uploaded by

    Waseem Abbas
    18 views15 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    18 views15 pages

    Lab 07 Web Eng Hasan Ahmed 321600 SE10A

    Uploaded by

    Waseem Abbas

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    Department of Computing

    CS-344: Web Engineering

    Class: BESE-10AB
    Lab 07: jQuery

    Date: 04 November 2021

    Hasan Ahmed

    321600

    BESE-10A

    Instructor: Dr. Qaiser Riaz

    CS-344: Web Engineering Page 1


    Lab 07: jQuery

    Introduction:
    jQuery is a widely used and well-known library for JavaScript which helps in rapid web
    development. Most of the modern websites use jQuery as a tool to implement and control
    client side dynamic behavior of the websites. Students have learned basic and advanced
    concepts of jQuery during lectures. This lab will help them to further understand these
    concepts by practically using jQuery in given situations.

    Lab Objectives:
    The objective of this lab is helping students to familiarize themselves with basic and advanced
    concepts of jQuery by practically implementing them in given scenarios. The knowledge
    students have gained in the lectures will help them to develop and control dynamic behavior of
    web pages using jQuery.

    Tools:
    Notepad, DreamWeaver, browser.

    Helping Material:
    Lecture slides.

    W3Schools: https://www.w3schools.com/js/default.asp

    jQuery API: http://api.jquery.com/

    jQuery Cheatsheet: https://oscarotero.com/jquery/

    Lab Task

    Task 1
    During lectures, students have seen a basic version of the ‘buy groceries’ example. This basic
    version is given in ‘grocery-basic-skeleton.html’ file along with CSS and JavaScript (see ‘lab-7-
    supporting-material.zip’). Using jQuery, you have to change the behavior of the list items <li> as
    explained below:

    1. When you click on any list item <li>, it should display current date and time in the
    format shown in the image below.

    CS-344: Web Engineering Page 2


    2. Hint: A <span> class ‘date’ is already defined in CSS. You can use it to style date and
    time.

    Task 2
    Using the ‘grocery-basic-skeleton.html’ file, you have to change the behavior of the list items
    (using jQuery) as explained below:

    1. Add a new paragraph after last list item as shown below:

    CS-344: Web Engineering Page 3


    2. When you click or mouse over on any list item <li>, it should display following
    information:
    a. Item: Name of list item which is clicked or on which mouse over event occurred
    b. Status: Important (for honey and pine nuts), Available (for all other items)
    c. Event: Name of event (click, mouseover)

    CS-344: Web Engineering Page 4


    Task 3
    1. Extend the ‘basic-skeleton.html’ file but adding new list items and a footer as shown
    below (hint: use MS word’s zooming to clearly see the figure):

    CS-344: Web Engineering Page 5


    2. When scroll the page down to bottom, a new div appears at the bottom-right side,
    showing latest promotions:

    3. The promotion div must disappear as soon as the user scrolls the page up to 500px from
    the bottom.

    Hints:

     Use $window.scrollTop() to get the current vertical position of the scroll bar.
     Use following formula to find if the user is within bottom 500px of the page.
    o $('#footer').offset().top - $window.height() – 500
     Use $window.on (‘scroll’, function(){….} to handle onScroll() event of the window.
     jQuery’s animate() function will help you achieving this task.

    Task 4
    Extend the ‘task-4-skeleton.html’ file and add following two functionalities using jQuery:

    1. Add functionality for ‘add row’ button which should add a new row with the data
    entered by the user in Name and Email Address text fields. The table should be
    extended dynamically and new row should be appended at the end.

    CS-344: Web Engineering Page 6


    2. Add functionality for ‘delete row’ button which should delete all selected rows.

    Note: Upload complete solutions (css, html, js) for each task in in a single zip file along with
    adding jQuery and screenshots of your solutions in this word file.

    Solution
    Task 1 jQuery:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Lab 7 Task 1 JavaScript &amp; jQuery - Chapter 7: Introducing jQuery -
    Event Object</title>
        <link rel="stylesheet" href="css/c07.css" />
      </head>
      <body>
        <div id="page">
          <h1 id="header">List</h1>
          <h2>Buy groceries</h2>
          <ul>

    CS-344: Web Engineering Page 7


            <li id="one" class="hot"><em>fresh</em> figs</li>
            <li id="two" class="hot">pine nuts</li>
            <li id="three" class="hot">honey</li>
            <li id="four">balsamic vinegar</li>
          </ul>
        </div>
        <script src="js/jquery-1.11.0.js"></script>
        <script>
            $('li').click(function(event){
                var id = $(event.target).attr('id')
                var date = new Date()
                var month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug",
    "Sep", "Oct", "Nov", "Dec"]
                var day = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
                $('span').remove('.date')
                $("#"+id).append("<span> Clicked on " + day[date.getDay()] + " " +
    month[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear() + " at
    " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() +
    "</span>" )
                $('span').addClass('date')
            })
        </script>
      </body>
    </html>
    Task 1 screenshot:

    CS-344: Web Engineering Page 8


    Task 2 jQuery:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Lab 7 Task 2 JavaScript &amp; jQuery - Chapter 7: Introducing jQuery -
    Event Object</title>
        <link rel="stylesheet" href="css/c07.css" />
      </head>
      <body>
        <div id="page">
          <h1 id="header">List</h1>
          <h2>Buy groceries</h2>
          <ul>
            <li id="one" class="hot"><em>fresh</em> figs</li>
            <li id="two" class="hot">pine nuts</li>
            <li id="three" class="hot">honey</li>
            <li id="four">balsamic vinegar</li>
            <p>Click or mouseover a hot item...</p>
          </ul>
        </div>
        <script src="js/jquery-1.11.0.js"></script>
        <script>
            $('li').click(function(event){
                var item = $(event.target).text();
                var status = "available"
                if (item == "pine nuts" || item == "honey"){
                    status = "important"
                }
                $('p').html("Item: " + item + "<br>" + "Status: " + status + "<br>"
    + "Event: click")
            })
            $('li').mouseover(function(event){
                var item = $(event.target).text();
                var status = "available"
                if (item == "pine nuts" || item == "honey"){
                    status = "important"
                }
                $('p').html("Item: " + item + "<br>" + "Status: " + status + "<br>"
    + "Event: mouseover")
            })
        </script>

    CS-344: Web Engineering Page 9


      </body>
    </html>
    Task 2 screenshot:

    CS-344: Web Engineering Page 10


    Task 3 jQuery:

    <!DOCTYPE html>
    <html>
      <head>
        <title>
          Lab 7 Task 3 JavaScript &amp; jQuery - Chapter 7: Introducing jQuery -
          Event Object
        </title>
        <link rel="stylesheet" href="css/c07.css" />
      </head>
      <body>
        <div id="page">
          <h1 id="header">List</h1>
          <h2>Buy groceries</h2>
          <ul>
            <li class="hot"><em>fresh</em> figs</li>
            <li class="hot">pine nuts</li>
            <li class="hot">honey</li>
            <li>balsamic vinegar</li>
            <li>linguine</li>
            <li>cream</li>
            <li>coconut milk</li>
            <li>mushrooms</li>
            <li>apples</li>
            <li>strawberries</li>
            <li>rice crackers</li>
            <li>brie</li>
            <li>rice</li>
            <li>green tea</li>
            <li>vine-ripened tomatoes</li>
            <li>bananas</li>
            <li>red kidney beans</li>
            <li>haricot beans</li>
            <li>lettuce</li>
            <li>organic brown rice vinegar</li>
            <li>sushi nori</li>
            <li>garlic</li>
            <li>red onions</li>
            <li>goat's cheese</li>
            <li>baby leaf spinach</li>
            <li>coconut</li>

    CS-344: Web Engineering Page 11


            <li>avocado</li>
            <li>leeks</li>
            <li>carrots</li>
            <li>pears</li>
            <li>apples</li>
            <li>organic free-range eggs</li>
            <li>cashew nut butter</li>
            <li>lemons</li>
            <li>coconut oil</li>
            <li>sourdough bread</li>
            <li>almond milk</li>
            <li>kale</li>
            <li>gluten-free soy sauce</li>
            <li>quinoa</li>
          </ul>
          <div id="slideAd">
            buy listking pro <br />
            for only $1.99
          </div>
          <p id="footer">© ListKing</p>
        </div>
        <script src="js/jquery-1.11.0.js"></script>
        <script>
            $("#slideAd").hide()
            $(window).on('scroll', function() {
                if($(window).scrollTop() + $(window).height() == $
    (document).height()){
                    $("#slideAd").show()
                }
                if($(window).scrollTop() + $(window).height() < $(document).height()
    - 500){
                    $("#slideAd").hide()
                }
            })
        </script>
      </body>
    </html>

    CS-344: Web Engineering Page 12


    Task 3 screenshot:

    Task 4 jQuery:

    CS-344: Web Engineering Page 13


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Lab 7 Task 4 jQuery Add / Remove Table Rows Dynamically</title>
    <style type="text/css">
        form{
            margin: 20px 0;
        }
        form input, button{
            padding: 5px;
        }
        table{
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }
        table, th, td{
            border: 1px solid #cdcdcd;
        }
        table th, table td{
            padding: 10px;
            text-align: left;
        }
    </style>
    <script src="js/jquery-1.11.0.js"></script>
    <script>
        $(document).ready(function() {
            $('.add-row').click(function(){
                var name = $('#name').val()
                var email = $('#email').val()
                $('tbody').append('<tr><td><input type="checkbox"
    name="record"></td><td>'+ name +'</td><td>' + email + '</td></tr>')
            })
            $('.delete-row').click(function(){
                $('input[type=checkbox]:checked').parent().parent().remove()
            })
        });
    </script>
    </head>
    <body>
        <form>

    CS-344: Web Engineering Page 14


            <input type="text" id="name" placeholder="Name">
            <input type="text" id="email" placeholder="Email Address">
            <input type="button" class="add-row" value="Add Row">
        </form>
        <table>
            <thead>
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="record"></td>
                    <td>Peter Parker</td>
                    <td>peterparker@mail.com</td>
                </tr>
            </tbody>
        </table>
        <button type="button" class="delete-row">Delete Row</button>
    </body>
    </html>
    Task 4 screenshot:

    Deliverables
    Compile a single word document by filling in the solution part and submit this Word file on LMS.
    You must include your name, ID, and class on first page. The lab grading policy is as follows: The
    lab is graded between 0 to 10 marks. For some of the labs, students have to present their
    solutions in a viva session. In case of any problems with submissions on LMS, you should
    contact your lab engineer Ms. Ayesha Asif by email at ayesha.asif@seecs.edu.pk.

    CS-344: Web Engineering Page 15

    You might also like