Javascript  

  

 

 

 

 

Listbox

 

this code is created first by chatGPT on Jan 11 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 two rows at the center of the page

2. In upper cell, put a textbox and 'Prepend','Append','Insert', 'Delete' buttons

3. In lower cell, put a listbox with 'item1','item2','item3'

4. When clicking an item in the listbox, the selected item is shown in the text box

5. When clicking 'Prepend' button, the text in the textbox is added on top of the listbox

6. When clicking 'Append' button, the text in the textbox is added on bottom of the listbox

7. When clicking 'Insert' button, the text in the textbox is added at the selected position in the list box. If there is no selected position, show a popup saying 'you have to select a position in the list box'

8. When clicking 'Delete' button, the text in the textbox is removed from the list box. If there is no selected position, show a popup saying 'you have to select a position in the list box'

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

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.

 

 

Listbox.html

<!DOCTYPE html>

<html>

  <head>

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

  </head>

  <body>

    <table align="center">

      <tr>

        <td>

          <input type="text" id="textbox">

          <br>

          <button id="prependBtn">Prepend</button>

          <button id="appendBtn">Append</button>

          <button id="insertBtn">Insert</button>

          <button id="deleteBtn">Delete</button>

        </td>

      </tr>

      <tr>

        <td>

          <select id="listbox" size="3">

            <option value="item1">Item 1</option>

            <option value="item2">Item 2</option>

            <option value="item3">Item 3</option>

          </select>

        </td>

      </tr>

    </table>

    <script type="text/javascript" src="listbox.js"></script>

  </body>

</html>

 

 

style_listbox.css

input[type=text], select {

    width: 100%;

    padding: 12px 20px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid #ccc;

    border-radius: 4px;

    box-sizing: border-box;

}

 

button {

    width: 100%;

    background-color: #4CAF50;

    color: white;

    padding: 14px 20px;

    margin: 8px 0;

    border: none;

    border-radius: 4px;

    cursor: pointer;

}

 

button:hover {

    background-color: #45a049;

}

 

 

listbox.js

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

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

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

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

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

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

 

listbox.addEventListener("change", function() {

  textbox.value = listbox.options[listbox.selectedIndex].text;

});

 

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

  const newOption = new Option(textbox.value, textbox.value);

  listbox.add(newOption, listbox.options[0]);

});

 

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

  const newOption = new Option(textbox.value, textbox.value);

  listbox.add(newOption);

});

 

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

  let selectedIndex = listbox.selectedIndex;

  if (selectedIndex === -1) {

    alert("You have to select a position in the list box");

    return;

  }

  const newOption = new Option(textbox.value, textbox.value);

  listbox.add(newOption, listbox.options[selectedIndex]);

});

 

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

  let selectedIndex = listbox.selectedIndex;

  if (selectedIndex === -1) {

    alert("You have to select a position in the list box");

    return;

  }

  listbox.remove(selectedIndex);

});

 

 

 

rewrite the javascript so that all the event handler is defined as a separate functions

 

 

listbox_r1.js

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

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

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

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

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

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

 

function handleListboxChange() {

  textbox.value = listbox.options[listbox.selectedIndex].text;

}

 

function handlePrependBtnClick() {

  const newOption = new Option(textbox.value, textbox.value);

  listbox.add(newOption, listbox.options[0]);

}

 

function handleAppendBtnClick() {

  const newOption = new Option(textbox.value, textbox.value);

  listbox.add(newOption);

}

 

function handleInsertBtnClick() {

  let selectedIndex = listbox.selectedIndex;

  if (selectedIndex === -1) {

    alert("You have to select a position in the list box");

    return;

  }

  const newOption = new Option(textbox.value, textbox.value);

  listbox.add(newOption, listbox.options[selectedIndex]);

}

 

function handleDeleteBtnClick() {

  let selectedIndex = listbox.selectedIndex;

  if (selectedIndex === -1) {

    alert("You have to select a position in the list box");

    return;

  }

  listbox.remove(selectedIndex);

}

 

listbox.addEventListener("change", handleListboxChange);

prependBtn.addEventListener("click", handlePrependBtnClick);

appendBtn.addEventListener("click", handleAppendBtnClick);

insertBtn.addEventListener("click", handleInsertBtnClick);

deleteBtn.addEventListener("click", handleDeleteBtnClick);