代写program、代做Java程序语言

日期：2023-12-03 07:58

Coding Lab 9

Objective:

In this assignment, we will be implementing the image carousel feature. The purpose of the image

carousel is to present images in a rotating or sliding fashion, providing a visually appealing method to

showcase multiple images. Image carousels are commonly used in various platforms such as

ecommerce websites and social media platforms like Instagram. For example:

In this assignment, we will implement the image carousel feature in a mock Instagram webpage.

The starter code includes: one image and two buttons. When clicked, the two buttons should update

the image to the next or previous image for the carousel. We provide URLs for example images in an

array, but you will need to write all the Javascript (and some HTML) to make these buttons functional.

Instructions:

Task HTML Task Javascript Task

STARTER CODE The starter code includes one image

and two buttons

The starter code includes

URLs for example images

in an array.

1. Connect HTML and

Javascript

● Make sure when the buttons

are clicked that a function is

called.

● Create the function with

the same name as the

HTML button uses.

Bonus Question:

Task HTML Task Javascript Task

2. Replace the existing image

with a new image element

● Create a new image

element and use it to

replace the existing

image. You must select

the image by class.

3. Use the ID attribute to track

index values, while making the

new image display the next

image in the carousel.

● Use the image’s ID to track

the current index for the

image array

● Access the image’s

current ID.

● Increase the value by

one.

● Use that to set the URL

for the new image

element you created

● Set the class and id for

the new image element

you created.

4. Ensure the carousel loops

back to the first image

● Use an if statement to

check whether the

current index is greater

than the length of the

array. If so, start back at

the first image in the

array.

5. Make the next and previous

buttons operate differently

(next should count up,

showing the next image,

previous should count down,

showing the previous image)

● Using the same function,

provide a different input for

the next and previous buttons

● Take the input from the

button

● Use the input to either

decrease or increase the

index depending whether

the next or previous

button was clicked.

● Make sure that you loop

back to the first/last

image when the last/first

image is reached (for the

next/previous buttons,

respectively)

Resources:

1. Starter code: HTML and CSS template code for the Instagram feed webpage, that you can opt

to use as a starting point for developing your assignment:

https://drive.google.com/drive/folders/1NsEp5ZzLe6LJd2xww1d3XtHMkzysuXej?usp=drive_link

or https://codepen.io/Kristen-Vaccaro/pen/poGxrzJ

Notes:

1) The section of the HTML that requires modification is indicated by comments starting

with <!-- TASK START – > and <!-- TASK END – >. It is sufficient to modify only those

specific portions of the code (bonus questions may require edits outside of the area).

2) No modifications are required for any of the CSS code provided in this assignment.

An example is shown below:

Task HTML Task Javascript Task

1. Like button functionality ● The starter code contains the

like icon(empty heart). When it

is clicked, invoke the javascript

function which replaces it with a

filled(red) heart.

● Implement a JavaScript

function that, upon

invocation, replaces the

like icon image (initially

unfilled empty heart) with

an image of a filled red

heart icon for the like

functionality.

2. Image Carousel/Image slider

functionality

● When the images are swiped

left or right, the JavaScript

function which implements the

image slider should be

invoked.

● Implement a JavaScript

function that displays the

next/previous image in a

series of images when

the image is swiped left

and right accordingly

(Note: No clicking on

previous/next icons is

involved here). Hint: You

can utilize the swipeleft

and swiperight events.

Before an action is performed*:

After performing action:

1. Clicking on the next icon

* Template for this screen available in the Starter Code