(Solved) : Exercise 1l Enhance Slide Show Application Adding Buttons Start Pause Slide Show Appiic Fi Q36463450 . . .
please Use the code provided in the pictures
write a complete code ?
In this exercise, you’1l enhance the Slide Show application by adding buttons to start and pause the slide show. appiic Fishing Slide Show Catch and Release Open and test the application 1. Use your text editor or IDE to open the HTML and JavaScript files in this folder davascript jquerylexercisesch071slideshow Use Chrome to test this application. Notice that the slideshow isn’t ru the Pause button is disabled, and nothing happens when you click on the Start button. 2. Add code to start the slide show when the Start button is clicked 3. Review the code in the index.html file, and notice that the disabled attribute of the Pause button is set to “true”. That makes sense because the user shouldn’t be able to click this button if the slide show isn’t running. 4. Review the code in the slide_show.js file, and note that the code for running the slide show is coded in a function named runSlideShow0 and the imageCache, imageCounter, and timer variables are coded as global variables so they can be accessed by the runSlideShowO and onload0 functions. Within the onload event handler, add code to the click event handler of the Start button that creates a timer that runs the slide show and changes the slide every 2 seconds. In addition, add code that disables the Start button and enables the Pause button. To disable a button, you can set its disabled attribute to true. To enable a button, you can remove its disabled attribute. 5. Chapter 7 How to work with links, images, and timers 221 Test the application again and click the Start button to make sure the slide show is working. Notice that there’s a delay of 2 seconds before the next slide is displayed. Add code to the click event handler of the Start button that calls the runSlideShow0 function before the timer is started. Then, test the application again to see that the next slide is displayed immediately when the Start button is clicked 6. 7. Add code to pause the slide show when the Pause button is clicked 8. Add code to the click event handler of the Pause button that cancels the timer In addition, add code that enables the Start button and disables the Pause button. Test the application again, click the Start button to start the slide show, and then click the Pause button to pause the slide show. Click the Start button again to re-start the slide show. When you’re done testing, close the browser. 9. 215 Chapter 7How to work with links, images, and timers The user interface for the Slide Show application Fishing Slide Show Catch and Release The HTML for the application <main> <hl>Fishing Slide Show</h1> cul id-“image list”> <li><a hrefe”images/release.jpg” titles.catch and Release”></a></li <li><a hre f=”images/deer.jpg” title-Deer at Play”></a></li> <li><a href.”images/hero.jpg” title.-The Big One ! “></a></li> <li><a hrefe”images/bison.jpg” title.”Roaning Bison.></a></li> </ul> <p> img src-“images/release.ipg” alt-“catch and Release” ids”image”</p> <h2 id- caption” Catch and Release</h2> </main> The CSS of the ul element ul display: none:) Chapter 7 How to work with links, images, and time The JavaScript for the Slide Show application var $ function (id) ( return document.getElementById (id) window.onload function var listNode $( image list) 11 the ul element var captionNode $(“caption”) the h2 element for the caption var imageNode $(“image”) // the img element for the show var links listNode.getElementsByTagName (“a) // Process image links var i, linkNode, image var imageCache[1: for ( í = 0; i < links.length; ǐ++ ) { linkNode links [i]; /1 Preload image and copy title properties image = new Image ( ) ; image.sr linkNode.getAttribute(“href”) image.title 1inkNode.getAttribute(“title imageCache [imageCache.length] :. İmage; // Start slide show var imagecounter 0; var timersetInterval( function imageCounter- (inagecounter + 1) % imagecache .1ength; image imageCache [imageCounter] imageNode.srcimage.src captionNode.firstchild. nodeValue image.title 2000) Show transcribed image text
Expert Answer
Answer to Exercise 1l Enhance Slide Show Application Adding Buttons Start Pause Slide Show Appiic Fi Q36463450 . . .
OR