Using HTML/CSS and JavaScript, please help me with this. PLEASE put your CODE:

Thank You! PLEASE provide your CODE!!!

The page will follow the header/main/footer format that we previously used. A nav bar is not required here since there is only one page and it's not semantically appropriate to put miscellaneous controls there. Inside the header place a h1 tag with a title for your page. Inside the footer place identifying information like your name, student number, and the current year. You will require a total of 9 images with 3 themes to complete the assignment. Initially you will have 3 empty image tags, but once the page is loaded, call a function to choose 3 of the images to display, 1 from each theme, random inside the group. For example: 1 randomly picked 1 cat, 1 dog, and 1 star picture from my collection of images. Each time I refresh the page I get 1 cat, 1 dog, and 1 star, but not the same ones all the time. They must appear evenly spaced, and responsive within the main element. Hint: This gets a lot easier if all your images are the same dimensions. Elsewhere on the page you will have an input for the time until an automatic refresh will happen, a countdown timer, a manual refresh button, and a counter of how many times the images have been updated. Images Each of these images will be clickable using either an onclick attribute or by Javascript addEvent Listener() method. When an image is clicked the following effects take place: - A transition animation plays. - During the animation the image cliynges to a random image (from any categorv). It is not required that you guarantee that all the images are unique, it is ok if an image repeats. If you wish to try to make this enhancement, please dol - The automatic refresh timer is reset. - The image counter is increased by 1. Store your image filenames in a 33,20 array for ease of access: Making the animation play can be a bit tricky, and so you may use the following code to accomplish it. Be sure you change 'spin' to the name of your CSs Class that links to your animation. function do_animation( event ) \{ Input You will have 1 input element that accepts a number only. This number must be in the range [500,10,000]. Though you can use HTML attributes to try to enforce this range, the JavaScript must verify it before attempting to use the input. When the input element is changed, call a JavaScript function that validates the input, and if the input is numeric and is in the valid range, change the automatic refresh time, cancel any old refreshes, and restart the refresh cycle anew. Randomize Button When the randomize button is clicked, it will run a function that picks 3 random images from your collection and replace the current ones with them. These image changes do not activate your CSS animation, they just suddenly change. These 3 images do not have to be from different groups, nor do they have to be different images. Random allows for 3 of the same images to appear one click, and for 3 different images the next click. When this happens the automatic refresh timer is reset, and the number of images displayed total increases by 3 . Clock A countdown timer until the next automatic refresh will exist, counting down in 1/10 ths of a second. When the timer reaches 0 your web application will behave exactly as if the randomize button had been pressed. As the counter ticks down you will change the colour scheme of the timer window. It must start at white text/green background, transition to black text/yellow background, and finally to white text/red background before returning to the first state. You can decide at what point these transitions occur, but each should last long enough to be noticeable if the reset timeout is set to 2500ms. Image Change Counter Display, in real time, how mange times the image has been changed, as noted above