Scribd Logo
Upload

Welcome to Scribd!

  • 82 views

    CS202 Assignment No 2 Spring 2023

    Uploaded by

    Qasim Khan
    This document outlines an assignment for a CS202 Fundamentals of Front-End Development course. Students are tasked with creating a simple webpage using HTML and jQuery to dynamically modify elements based on button clicks. The assignment involves 3 tasks - developing an initial webpage, adding content and modifying styles when a "Read Introduction" button is clicked, and adding new list items and disabling a button with another click. Guidelines are provided on file formats, tools that can be used, and objectives of learning jQuery events and effects.

    Copyright:

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

    You might also like

    CS202 Assignment No 2 Spring 2023

    Uploaded by

    Qasim Khan
    82 views5 pages
    This document outlines an assignment for a CS202 Fundamentals of Front-End Development course. Students are tasked with creating a simple webpage using HTML and jQuery to dynamically modify elements based on button clicks. The assignment involves 3 tasks - developing an initial webpage, adding content and modifying styles when a "Read Introduction" button is clicked, and adding new list items and disabling a button with another click. Guidelines are provided on file formats, tools that can be used, and objectives of learning jQuery events and effects.

    Original Description:

    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
    This document outlines an assignment for a CS202 Fundamentals of Front-End Development course. Students are tasked with creating a simple webpage using HTML and jQuery to dynamically modify elements based on button clicks. The assignment involves 3 tasks - developing an initial webpage, adding content and modifying styles when a "Read Introduction" button is clicked, and adding new list items and disabling a button with another click. Guidelines are provided on file formats, tools that can be used, and objectives of learning jQuery events and effects.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    82 views5 pages

    CS202 Assignment No 2 Spring 2023

    Uploaded by

    Qasim Khan
    This document outlines an assignment for a CS202 Fundamentals of Front-End Development course. Students are tasked with creating a simple webpage using HTML and jQuery to dynamically modify elements based on button clicks. The assignment involves 3 tasks - developing an initial webpage, adding content and modifying styles when a "Read Introduction" button is clicked, and adding new list items and disabling a button with another click. Guidelines are provided on file formats, tools that can be used, and objectives of learning jQuery events and effects.

    Copyright:

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

    Assignment No.

    02 Total Marks: 20
    Semester: Spring 2023 Lectures: 23 to 28 (Topics:
    CS202: Fundamentals of Front-End 99 to 122)
    Development Due Date: 14-July-2023

    Instructions:

    Please read the following instructions carefully before submitting assignment. It should be clear that your
    assignment will not get any credit if:

     The assignment is submitted after due date.


     The submitted assignment does not open or file is corrupt.
     Assignment is copied (partial or full) from any source (websites, forums, students, etc.)

    Note: You have to just upload .html file which will have code of HTML. Assignment in any other format
    (extension) will not be accepted and will be awarded with zero marks.

    Objectives:

    The objectives of this assignment are:

     To learn how to use JQuery with HTML.


     Use of different JQuery events.
     Use of JQuery Effects
    Note:

     This assignment is a Graded Assignment.


     The assignment submitted through email will not be accepted.
     For detail of topics in each lecture, see syllabus file given in download section of this course.
    The link of file is: https://vulms.vu.edu.pk/Courses/CS202/Downloads/CS202%20Mid%20Term
    %20Syllabus.pdf
     For JavaScript libraries you will use the below given link:
    https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js

    Guidelines:

     Code should be properly indented.


     You can use the following tools/software:
    o Sublime, Adobe Dreamweaver, Notepad
     You will not use any other software to make .html file

    For any query about the assignment, contact at cs202@vu.edu.pk.


    Assignment Statement:

    Suppose you have been hired as a Front End developer in XYZ university. You have been assigned a task
    to add dynamic behavior to a webpage with the help of JQuery. Your web page should look like the
    sample web page given below.

    Sample Web Page:

    Screenshot no. 01
    Screenshot no. 02

    Task 1:

    You will develop a simple web page with the help of basic HTML tags, <h2>, <input>, <head>, <body>,
    <button>etc.

    Task 2:

    When you click on the READ INTRODUCTION button, the background color of the BUTTON should
    change to green, and the text "Please click on the below button to read introduction to Front End
    Development" which is above the button, should disappear, as shown in screenshot no. 2. Moreover, the
    following Introduction to Front End Development paragraph should appear on the webpage.

    "This course starts with describing front-end development on the web. Build foundations on HTML, CSS, and
    JavaScript and cover advanced topics based on current trends in HTML5, CSS3, Responsive Design, and some
    of its frameworks like Bootstrap. 

    The focus is to learn while solving different problems and doing many real-life case studies."

    Furthermore, the list of different tools that are used in front-end development should appear on the
    webpage, as shown in screenshot no. 2.
    Task 3:

    When you click on the "Add List Item" button, it will add two more list items (Ajax and JQuery) to the
    list, as shown in Screenshot No. 3.

    Furthermore, the "Add List Item" button will be deactivated, and the text, "Click on the 'Add List Item'
    button to view JavaScript libraries.", will disappear from the webpage.

    Sample Web Page after performing the tasks.


    Solution Instructions:

     Use javaScript library: https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js to design


    your web page as sample page.

     You also have to use HTML basic tags and JQuery to design above sample web page (for performing
    task1, task2, and task3 respectively.

     Default Background color (aqua) should be used in Task 1.

    BEST OF LUCK!

    You might also like