Line Connects 2 boxes (ChatGPT)

mistafisha — Mon, 23 Jan 2023 05:00:00 +0000

ChatGPT Prompt:
Write HTML (only body inner contents), CSS, and javascript (without canvas) separately to create the following:
Add a black background.
Add a container with a teal background that fills the screen. Everything below goes in the container.
Place a red start box in the center of the screen.
Place a blue end box in random position on the screen.
Create a yellow line that connects start box to end box. The line could be made with a div.
Create a 'redo' button that moves the end box to a new random position on the screen and reconnects the line.

ChatGPT Correction:
The container should use viewport units to fill the screen.
set the line height to 3px and give it a red outline.
Bug: The line is the correct angle and width, but it is not aligned with either the start or end square.

Manual Correction:
// var x1 = startBox.offsetLeft + startBox.offsetWidth / 2; var x1 = startBox.offsetLeft; // var y1 = startBox.offsetTop + startBox.offsetHeight / 2; var y1 = startBox.offsetTop;

DEV Community: mistafisha

Line Connects 2 boxes (ChatGPT)