Assignment No. 02
Semester: Spring 5

CS420 Web Development for Portable Devices

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:

1) You have to just upload .html,.css, and .js file which will have the code of HTML, CSS, and JavaScript. Assignment in any other format (extension) will not be accepted and will be awarded with zero marks.

2) zip your all file in a zip folder and upload it on LMS.

Objectives:

The objectives of this assignment are:

·        Responsive image loading using srcset or image-set()

·        Touch and click interaction using JavaScript

Note:

·        This assignment is a Graded Assignment.

·        The assignment submitted through email will not be accepted.

·        This assignment is covering Week 4 to week 9

Guidelines:

§  Code should be properly indented.

§  You can use the following tools/software:

o   Notepad or Adobe Dreamweaver     

§  You will not use any other software to make .html file

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

Assignment Statement:

You’ve been hired to help build the homepage of a new tech news website that will be accessed mostly on mobile phones, but also on tablets and desktops. The site needs a visually appealing banner that looks sharp on all screen types and a “Play Video” button that responds well to mobile touch and desktop clicks.

Task 1: Smart Banner with Responsive Images (10 Marks)

Add a banner to the webpage that loads the right image automatically:

Use two versions of the same banner image:

o   One low-quality image for smaller or low-resolution screens

o   One high-quality image for larger or high-resolution screens

You can use one of the following methods:

o   Option A: <img> with srcset

o   Option B: CSS background-image with image-set()

👉 Below the banner, write a short paragraph explaining:

·         Which method you used

·         When each image version will load

·         Which image has been loaded

Task 2: Mobile-Friendly “Play Video” Button (10 Marks)

Add a button labeled "Play Video" on the page.

When clicked (desktop) or tapped (mobile), it should show: Launching video player... (you can use an alert)

Use both:

o   click event

o   touchstart event
in JavaScript to ensure it works on all devices.