Javascript  

  

 

 

 

 

SlideShow

 

this code is created first by chatGPT on Jan 19 2023 (meaning using chatGPT 3.5) and then modified a little bit my me. The initial request that I put into chatGPT is as follows :

 

Write a javascript code meeting following requirement.

 

1. Put an html table with three rows at the center of the page. The width of the table is 800px

2. In the first row, put a textbox with the default value of 'file.dat' and the name of the textbox is 'filename'. Width of the textbox should span the width of the table

3. In the second row, put an image box that can load a specified image. Put the image box at the center of the row.

4. In the third row, put 5 buttons with labels : 'Load','>> Next', '<< Prev', 'Play', 'Stop'.

5. file.dat contains a list of file names (including the path). One file at a line. This will be given by user

6. Clicking on 'Load', the all the file names of file.dat should be saved into an array (or list) and the first file should be displayed on the image box. The size of the imagebox should automatically adjusted to the size of the image

7. Clicking on '>> Next', the Next image should be displayed in the image box. If the current image is the last item from the array, it should roll back to the first item.

8. Clicking on '>> Prev', the Previous image should be displayed in the image box. If the current image is the first item from the array, it should roll back to the last item.

9. Clicking on 'Play', display every images one by one from the first to last with 300ms gaps.

10. Clicking on 'Stop', Stop 'Play'

11. Write the html, css, javascript into separate files

NOTE : It was SO AMAZING !!! I have the javascript working as I expected in single shot. I haven't changed anything in javascript part.

NOTE : It is not guaranteed that you would have the same code as I got since chatGPT produce the answers differently depending on the context. And it may produce the different answers everytime you ask even with the exact the same question.

NOTE : If you don't have any of your own idea for the request, copy my request and paste it into the chatGPT and put additional requests based on the output for the previous request. I would suggest to create a new thread in the chatGPT and put my request and then continue to add your own request.

 

Usage : Click on [Load] button first and then click other buttons as you like.

Image list file :

 

SlideShow.html

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" type="text/css" href="SlideShow.css">

  </head>

  <body>

    <table id="table" width="800px">

      <tr>

        <td>

          <center>

             Image list file :

             <input type="text" id="filename" value="file.dat"  style="width:500px">

          </center>

        </td>

      </tr>

      <tr>

        <td align="center">

          <img id="image" src="" width="auto" height="auto">

        </td>

      </tr>

      <tr>

        <td align="center">

          <button id="load">Load</button>

          <button id="next">>> Next</button>

          <button id="prev"><< Prev</button>

          <button id="play">Play</button>

          <button id="stop">Stop</button>

        </td>

      </tr>

    </table>

    <script src="SlideShow.js"></script>

  </body>

</html>

 

 

SlideShow.css

#table {

  margin: 0 auto;

}

 

#image {

  max-width: 100%;

  max-height: 100%;

}

 

 

SlideShow.js

const filename = document.getElementById("filename");

const image = document.getElementById("image");

const loadBtn = document.getElementById("load");

const nextBtn = document.getElementById("next");

const prevBtn = document.getElementById("prev");

const playBtn = document.getElementById("play");

const stopBtn = document.getElementById("stop");

 

let fileList = [];

let currentIndex = 0;

let playInterval;

 

loadBtn.addEventListener("click", function() {

  fetch(filename.value)

    .then(response => {

        if (!response.ok) {

            throw new Error(`HTTP error! status: ${response.status}`);

        }

        return response.text();

    })

    .then(data => {

      fileList = data.split("\n");

      image.src = fileList[0];

    })

    .catch(error => {

        console.log(error);

        alert("File loading failed, please check the file name and try again.");

    });

});

 

nextBtn.addEventListener("click", function() {

  currentIndex++;

  if (currentIndex >= fileList.length) {

    currentIndex = 0;

  }

  image.src = fileList[currentIndex];

});

 

prevBtn.addEventListener("click", function() {

  currentIndex--;

  if (currentIndex < 0) {

    currentIndex = fileList.length - 1;

  }

  image.src = fileList[currentIndex];

});

 

playBtn.addEventListener("click", function() {

  playInterval = setInterval(function() {

    currentIndex++;

    if (currentIndex >= fileList.length) {

      currentIndex = 0;

    }

    image.src = fileList[currentIndex];

  }, 300);

});

 

stopBtn.addEventListener("click", function() {

  clearInterval(playInterval);

});