Javascript  

  

 

 

 

 

Document Update

 

this code is created first by chatGPT on Feb 08 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 and html with the following requirement

1. Create a table with three rows and one column at the center of the page. The width of the table is 600 pixel. The grid line of the table should be shown

2. The cell in the first row is empty.

3. put a text field with width same as table and height is 10 lines. The default text is "Type in any text here and hit [Submit] button"

4. Put a dropdown box, two check boxes and a button. All should be aligned in one row

5. Populate 5 commonly used html fonts in the drop box.

6. The first check box is for selecting between Bold and Normal font

7. The second check box is to selecting between Italic and Normal font.

8. The button is to submit the text in the text field

9. When the button is clicked, the text in the text field should be appended to the text in the first row of the table with font selected by the font dropdown box, bold and italic checkbox

10. Write html and javascript in separate file

11. Define all the callback functions separately and let them be called from addEventListener

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.

 

Bold Italic

 

Document_UpdateTable.html

<html>

  <head>

   

    <style>

      #text-field {

        width: 600px;

        height: 10em;

        text-align: center;

      }

      #controls {

        display: flex;

        justify-content: center;

      }

    </style>

    

  </head>

  <body>

    <table style="border: thin solid black;">

      <tr>

        <td id="output"></td>

      </tr>

      <tr>

        <td>

          <textarea id="text-field">Type in any text here and hit [Submit] button</textarea>

        </td>

      </tr>

      <tr id="controls">

        <td>

          <select id="font-select">

            <option value="Arial">Arial</option>

            <option value="Helvetica">Helvetica</option>

            <option value="Times New Roman">Times New Roman</option>

            <option value="Courier New">Courier New</option>

            <option value="Verdana">Verdana</option>

          </select>

          <input type="checkbox" id="bold-checkbox">Bold</input>

          <input type="checkbox" id="italic-checkbox">Italic</input>

          <button id="submit-button">Submit</button>

        </td>

      </tr>

    </table>

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

  </body>

</html>

 

 

Document_Update.js

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

const textField = document.getElementById("text-field");

const fontSelect = document.getElementById("font-select");

const boldCheckbox = document.getElementById("bold-checkbox");

const italicCheckbox = document.getElementById("italic-checkbox");

const submitButton = document.getElementById("submit-button");

 

function submitText() {

  let font = fontSelect.value;

  let bold = boldCheckbox.checked ? "bold" : "normal";

  let italic = italicCheckbox.checked ? "italic" : "normal";

  let text = textField.value;

 

  output.innerHTML += `<p style="text-align: left; font-family: ${font}; font-weight: ${bold}; font-style: ${italic};">${text}</p></left>`;

}

 

submitButton.addEventListener("click", submitText);