Category: uncategorised

Directions – Index Page

1. Open the index.html file and the js/image.switcher.js file.
2. Study the existing HTML and note the elements used. The HTML displays the first image to avoid a broken image icon. The images that the JavaScript for the page needs to cycle through are images/banner1.jpg, images/banner2.jpg, and images/banner3.jpg. Each image will take the place of the existing image displayed by the HTML (don’t add more images to the page).
3. In the JavaScript file (js/image.switcher.js), add a function that will preload the images. The function that preloads the images should include a parameter that allows passing the list of images to the function as an array. There should not be any specific file names “hard coded” in the function.
4. In the same JavaScript file, write a function that handles the switching of the image ever) three seconds.

• This can be done a couple of different ways:
• Using setTimeout() at the end of the switching function to call the switching function recursively.
• Using setlnterval() called from the window.onload function (see below) to invoke the switching function at regular intervals. (This is probably the easier approach.)

1. Preview the page in a browser. Get screenshots showing the switching through the three images and put the screenshots in a Word document. Add captions/notes identifying each image.

Gallery Page

1. Open the galley.html page and study the HTML. Preview the page in a browser and note how the existing CSS handles things when the mouse hovers over an image. As CSS has developed, it has taken over a number of interactions that used to be possible with JavaScript. There are still many interactions that CSS can’t handle, so this is where JavaScript comes in.
2. In the HTML, note the following section, since it will play a key role in this part of the assessment:

• <section id=”details”>
• </section>

1. Open the js/gallery.js file and read through its existing content. Note the existing window.onload() code, which will call the functions you will add the in the steps below
2. Add a showlmage() function that takes a parameter named e (to pass information about the mouse event). This function will be called when the user clicks the mouse on an image.
3. This function should use document.getElementBY.ld() to access the details section. Then, the function should use code like the following to get just the file name of the image that the user clicked on:

• let img = e.target
• // pop() returns the last item in the array created by split()
• let fileName = img.src.split(‘/’).pop()

1. Use the fileName for the image to create a string of HTML to display a larger version of the image clicked on and some text about the image. This HTML is not a complete page but will be inserted as the innerHTML for the details section. The CSS provided includes some styles for #details, .details-image, and .details-caption that you can use or modify, or you can add our own CSS to the .css file to style the details section of the gallery page. Just remember that you should not embed any CSS directly in the HTML.
2. Set the innerHTML properly for the details area using the string of HTML created above.
3. Create a clearlmage() function that will clear the details area. This function will be called when the user moves the mouse off of the image.
4. Test the gallery page to make sure it works correctly. Take at least four screenshots to show that the page works correctly. (You don’t need to get a screenshot of eve possible interaction, just a sample). Add captions/notes identifying each image.

Keep all JavaScript in the specified .js files in the js subdirectory. There should not be any JavaScript (or CSS) in the HTML.

Be sure to document the JavaScript that you add with comments.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Walkthroughs: You may view the following walkthrough videos to help you complete this assessment:

• .
• .
• .

Zip up the folder with the website for this assessment and submit it along with the Word document containing the screenshots. Please be sure that you submit your completed version of the code, not the starter code.

1. Directions – Complete the code for the displayVolunteers() function using a loop, so that it displays the names of the volunteers entered in a numbered list with the last name first, followed by a comma, a space, and the first name. Here is an example (remember: the numbers indicate list position and are not part of the name):
2. Jones, Pam
3. Smith, Ann
4. Davis, Dave

• Keep in mind that the numbers are not stored in the array as part of the name. They need to be added by the code in displayVolunteers().
• The addVolunteer() function is already completed, so you can test the dislpayVolunteers() code by entering names in the input fields and clicking the Add button.

1. Complete the code for the deleteVolunteer() function so that when the user enters a name in the input fields, clicking the Delete button will remove that volunteer from the array and the list.

• You can locate the name to be deleted from the array using a loop or using the indexOf() function.
• Use the splice() function to remove the item from the array.
• Note that the deleteVolunteer() function already includes a call to displayVolunteers() that will update the displayed list after a name has been deleted.
• The code already in deleteVolunteer() clears the input fields and set the focus to the first name input field.

1. Complete the clearVolunteers() function that it clears the array and then calls displayVolunteers() to update the list of volunteers (which should be empty).
2. Complete the sortVolunteers() function so that it sorts the names in the array alphabetically. Then, call displayvolunteers() to update the list.
3. The final section of the existing code associates the JavaScript functions with the corresponding buttons on the form. You don’t need to modify this code, but it’s good to note what it does.
4. Carefully test the page to make sure that the buttons work properly. Take at least six screenshots to document the successful testing of the page. Put the screenshots in a Word document and add brief text with each image to indicate what part of the testing it shows. Please do not attach the individual image files to the submission.

Hint: Use the splice function in order to remove a specific item from the array.

Tip: The array index starts at 0, so when displaying the index, you will need to add 1 to the index value when it is displayed.

Make sure to do the following:

• Write JavaScript to delete a specific volunteer by using a loop.
• Write JavaScript that loops through the volunteer list to display the index value.
• Once completed, view your pages in your selected web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant and your CSS code is valid. You may choose to make use of AI to validate your code and help you troubleshoot and test your code if you do run into errors and issues. You may use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C. Both of these services are free and you can find their links on the reading list. Important: Take a screen capture of each of your validation results and save it for submission.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Zip up the folder with the completed work for this assessment (please keep the files in their original locations; don’t change any file names) and submit the zip file along with the Word document containing the screenshots.