If you can just help explain how I can go about doing the code to make the slideshow work would be great... I keep getting an error when I try to use the code at all. If you need more files just ask. as fast as possible please..

You are given a file web server built upon Node.js http module described in your textbook Chapter 6, section Creating Your Own File Web Server (page 121-124). This web server supports HTML files and JavaScript files. However it does not support any JPEG image files. Your job is to modify this web server so it will support JPEG image files.

The file you need to work on is called server.js. There is a folder called public_html where a slide show web site files are stored: an HTML file called index.html, three JPEG image files: pic1.jpg, pic2.jpg, and pic3.jpg.

When you run server.js now, you will get a web site at http://localhost:3000. However, the slide show is not rendering the images.

This is the server.js file

var http = require('http'); var fs = require('fs'); var path = require('path'); var mime = require('mime');// calling the npm mime package  function send404(response) { response.writeHead(404, { 'Content-Type': 'text/plain' }); response.write('Error 404: Resource not found.'); response.end(); } var mimeLookup = { '.js': 'application/javascript', '.html': 'text/html' }; var server = http.createServer(function (req, res) { if (req.method == 'GET') { // resolve file path to filesystem path  var fileurl; if (req.url == '/') fileurl = '/index.html'; else fileurl = req.url; var filepath = path.resolve('./' + fileurl); // lookup mime type  var fileExt = path.extname(filepath); var mimeType = mimeLookup[fileExt]; if (!mimeType) { send404(res); return; } // see if we have that file  fs.exists(filepath, function (exists) { // if not  if (!exists) { send404(res); return; }; // finally stream the file  res.writeHead(200, { 'content-type': mimeType }); fs.createReadStream(filepath).pipe(res); }); } else { send404(res); } }).listen(3000); console.log('server running on port 3000');

This is the index.html file

<div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3div> <img src="pic1.jpg" style="width:100%"> <div class="text">Caption Onediv> div> <div class="mySlides fade"> <div class="numbertext">2 / 3div> <img src="pic2.jpg" style="width:100%"> <div class="text">Caption Twodiv> div> <div class="mySlides fade"> <div class="numbertext">3 / 3div> <img src="pic3.jpg" style="width:100%"> <div class="text">Caption Threediv> div> <a class="prev" onclick="plusSlides(-1)">❮a> <a class="next" onclick="plusSlides(1)">❯a> div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)">span> <span class="dot" onclick="currentSlide(2)">span> <span class="dot" onclick="currentSlide(3)">span> div> <div class="footnote">* This project is adapted from W3school example: https://www.w3schools.com/howto/howto_js_slideshow.aspdiv> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } script> body> html>