Create JavaScript code with decision making and iteration control structures as well as timer events.

Hello, if anyone could please help me out with this assignment, I've been struggling with it for awhile now. I think I've figured out the first half of the first requirement, it's just the rest.

What I have so far for code is posted below the requirements of assignment. (I know I suck, but I'm learning!) Thanks a lot!

Requirements of Assignment

Copy assignment4 website into assignment5 folder or create a new website. Rename assn4.js to assn5.js or create a new assn5.js file. Link the assn5.js file at the bottom but above the body closing tag of the html pages.

1. Modify the code in assn5.js file as follows and use product page for testing:
   1. Show a digital clock at the end of the nav bar using an li element. The time will be updated every second. You may do it this way:

1) add an li element to the nav ul element either in html or with js code. Assigning this new li with an id clock;

2) use setInterval() to call a function once a second to update the content of the li with the system time.

2. In the previous assignments, when the header image is clicked, a randomly selected image will be displayed. However, there is a chance that this new image could be the same as the currently shown on the page. Modify this feature so that the newly selected image will not be the same as the one on the page. One possible solution would be:

1) extract the current img tag string or its src value;

2) make a new random image string based on the image names in the array;

3) if the new random image string is found in the current image or its src value string, regenerate another image string. repeat 2) and 3) until a different image is found.

NOTE: You may use indexOf() to check if the current image string contains the image to be displayed. Be patient and pay close attention to details. Most likely you need to use Browser's developer tool to walk through the code.

2. You site should have a second page that displays product information. You should have a separate js file such as product.js linked to product page. Do the following with this js file:
   1. Create 3 arrays of same length: items, prices, and fees. The elements at the same index position are for the same product.

2. Make a function, productTable(). In the function, use a loop to read the values from the arrays to make the html string for a web table. By the end, it will display the table in the main section of the page.

HINT: Each value would make a td element. All values for the same product will make a table row. The opening and closing table tags will be done outside of the loop.

HTML:

• Page One
• Page Two
• 9:10:43

function showTime() {

var time = new Date();

var h = time.getHours();

var m = time.getMinutes();

var s = time.getSeconds();

var am_pm = "AM";

if(h > 12)

{

h -=12;

am_pm = "PM";

}

if(h == 0)

{

h = 12;

}

h = (h

m = (m

s = (s

var currentTime = h + ":" + m + ":" + s + " " + am_pm;

document.getElementById("clock").innerHTML = currentTime;

setTimeout(showTime , 1000);

}

showTime();

Assignment 5

More Information

Click on the image above to view more pictures.

JAVASCRIPT:

// Header Image

function getRandomImage() {

const randomImages = ["photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg", "photo5.jpg"];

let path = 'images/';

let img = randomImages[Math.floor(Math.random() * 5)];

randImage = ``

imageEle.innerHTML = randImage;}

let imageEle = document.getElementById("image");

imageEle.addEventListener('click', getRandomImage);

window.addEventListener('load', getRandomImage);

// Welcome Message

function greeting(defName = "Guest") {

let name = prompt("Tell us your name:");

welcomeMessage = `Welcome, ${name}`;

let ele = document.getElementById("welcome");

ele.innerHTML = welcomeMessage;}

window.addEventListener('load', greeting);

// Footer with Date

function printFooter() {

let date = new Date();

let year = date.getFullYear();

let month = (date.getMonth() + 1);

let day = date.getDate();

footMessage = `Today's Date is: ${month}/${day}/${year}`;

let newEle = document.getElementById("footer");

newEle.innerHTML = footMessage;}

window.addEventListener('load', printFooter);