[SOLVED] Cpsc1520 – javascript 5 exercise: arrays and loops

Arrays are essential data structures that are used not only in JavaScript but essentially every
programming language. In this exercise, you’ll be creating an array of images, rendering them to the
page, and giving the ability to save images to a list.
Exercise Step 1: Create the Carousel with the images.
1. Modify the “images” array with the image names in the images folder. Note: No need to include
the path.
2. Create a method named “renderCarousel” that will call the function “createCarouselItem” with
the correct arguments to render the items on the page.
3. Call the function “renderCarousel,” and the page should change from blank to images.
a. Before calling the “renderCarousel” method:
b. After calling the “renderCarousel” method:
Exercise Step 2: Add to My Images
1. Observe the event listener in the JavaScript file for step 2. If you print out the “itemIndex”
matches the clicked item array index in the “images” list, you see that.
2. Using array methods, check if “savedImages” array includes the image at the “itemIndex”
specified.
a. If it does, don’t do anything (we don’t want any duplicates here).
b. If it does not, add the image name to the array using array methods. You can use some
debugging techniques here to display whether the array has the item or not.
Note: this means if I click the “cat” image three times I should only see it once in my list.
3. Create a function named “renderImageList.” The function will loop through the “savedImages”
array and call the function “addToSavedImageList” with the correct arguments.
a. Call this function after you add an item to the “savedImages” array. Note that, before
calling the function, you may have to re-initialize “savedList.innerHTML”.
4. If you click the “cat” image twice and the “polar bear” image three times, the result should look
like below.
Exercise Step 3 – Remove items from “My Image” list.
1. Observe the “itemIndexToRemove” in the event listener on the saved list.
2. Using array methods, remove the item at the index specified from the “savedList” array.
3. Call the function “renderMyImageList” below that.
4. Once you have clicked “save Image” on the cat and the “polar bear” and then clicked “remove”
on the polar bear, your page should look like below.
Exercise Step 4 – Push up your code to github (accepting this assignment)
1. Open the link given and accept the assignment. Your link should look something like this.
Note the image will be different because you’ll accept the assignment specified.
You’ll see a page like this.
One you’re repo is ready the page should look like the following.
2. You should see the page below once you click on the link highlighted in blue. Click the button
that says “Code.” You’ll need to select “HTTPS” unless you’ve set up “SSH” (you can also set up
GitHub CLI”. Click on the copy icon once you’ve selected the proper icon.
3. Clone the repository in your console (or if you’re using GitHub Desktop) using the “git clone
REPO_URL” command.
And go into this folder.
4. Make your changes, then add them to staging (using “git add .”) and commit them (using “git
commit -m “CHANGE THIS MESSAGE”). Once committed, push them up to GitHup (using “git
push”) it should look like below.
5. If you click “Pull Requests” and then the first item called “Feedback” you should see your
commit (seen at the bottom).
6. Upload the link of your repository to Moodle.
Grading
I’ll give full marks if:
• The test cases passed.
• Images render correctly in the carousel,
• Images added correctly to “My Images” when clicking “Save Image”
• Images removed correctly from “My Images” when clicking “remove”.
If you don’t follow the instructions you’ll get a zero. There are no marks in between.