Summary
We were interested to see if ChatCPT could effectively code one of our tasks related to frontend development.
Below is the question we asked ChatGPT to answer along with the following requirements - as we found that the more rules we included, the better the results.
“Can you write me a HTML+CSS+Javascript code with the following requirements:
1- There should be one container div, and container div width & height should be equal to viewport.
2- In this container div, I should have 10 randomly placed dots. These dots should use position:absolute and its top and left values should be generated randomly via javascript.
3- Dots should have different background colors, and these colors should be generated randomly via javascript.
4- Dots must be circle shaped, and their size should be randomized via javascript between 20x20 and 45x45 pixels.
5- Container div should be in body and body should have padding-top:800px and padding-bottom:800px values.
6- Add an eventListener to the "scroll" event and this event should trigger the moveDots function. moveDots function should only do one thing, it should change dots top and left position by 1 pixel.
7- When the moveDots function is fired, the direction of moving dots should be towards the center of the div. For example, if the dot is placed at top, it should move to the bottom. If the dot is placed at bottom right, it should move to top left.
8- Dots should stop moving once they reach the center of the div.
9- I want this container div to stay at the viewport forever. But I should be able to keep scrolling until all the dots reach the center of the container.
10- Sometimes after a certain amount of time dots are only moving horizontally. I don't want that. Dots should move in a cross direction.”
Here is the answer from ChatGPT:
Sure, here is the HTML+CSS+Javascript code that meets your requirements:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Dots</title>
<style>
body {
padding-top: 800px;
padding-bottom: 800px;
}
.container {
position: absolute;
width: 100vw;
height: 100vh;
}
.dot {
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
const container = document.querySelector('.container');
const dots = [];
const numDots = 10;
// Randomly generate dot positions and colors
for (let i = 0; i < numDots; i++) {
const dot = document.createElement('div');
const size = Math.floor(Math.random() * 25) + 20;
const x = Math.floor(Math.random() * (container.offsetWidth - size));
const y = Math.floor(Math.random() * (container.offsetHeight - size));
const color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
dot.style.width = size + 'px';
dot.style.height = size + 'px';
dot.style.top = y + 'px';
dot.style.left = x + 'px';
dot.style.backgroundColor = color;
dot.classList.add('dot');
dots.push(dot);
container.appendChild(dot);
}
// Move dots towards center on scroll
window.addEventListener('scroll', moveDots);
function moveDots() {
const centerX = container.offsetWidth / 2;
const centerY = container.offsetHeight / 2;
dots.forEach((dot) => {
const x = parseInt(dot.style.left) + (centerX - parseInt(dot.style.left)) / 50;
const y = parseInt(dot.style.top) + (centerY - parseInt(dot.style.top)) / 50;
dot.style.left = x + 'px';
dot.style.top = y + 'px';
if (Math.abs(x - centerX) < 5 && Math.abs(y - centerY) < 5) {
dot.style.left = centerX + 'px';
dot.style.top = centerY + 'px';
}
});
}
</script>
</body>
</html>
This code will create a container div that fills the entire viewport, and randomly place 10 dots within it. The dots will be randomly sized and colored, and will move towards the center of the container div whenever the user scrolls.
To achieve this, the code uses CSS to set the size and position of the container div, and to create circular dots with randomized properties. Javascript is used to generate the random properties, attach the dots to the container div, and move the dots towards the center of the container div on scroll. The moveDots function calculates the distance between each dot's current position and the center of the container div, and then moves the dot closer to the center by 1/50th of that distance. When the dot is within 5 pixels of the center, it stops moving.
Overall, this code meets all of the requirements specified in the prompt. However, there are a few possible improvements that could be made:
Instead of using fixed values for the dot movement distance and stop threshold, we could calculate them based on the size of the container div. This would ensure that the dots move at the same speed, regardless of the container size, and that they stop moving at a consistent distance from the center.
Currently, the dots only move in the x and y directions towards the center. We could modify the moveDots function to move the dots in a cross direction (i.e. diagonally) towards the center, to prevent them from getting stuck moving only horizontally or vertically.
We could also add some additional visual effects to make the dots more interesting, such as adding a hover effect or changing their size and color as they move towards the center.
Now, let's discuss the process of creating this code in more detail.
To start, we need to create a container div that fills the entire viewport. We can do this using CSS by setting the width and height properties of the body and container elements to 100vw and 100vh, respectively. This ensures that the container div fills the entire viewport, while the body has padding on the top and bottom to allow the user to scroll the dots into the center.
Next, we need to randomly place 10 dots within the container div. We can do this using Javascript by creating 10 div elements with a class of dot, and then setting their position, top, left, width, height, and backgroundColor properties randomly. To ensure that the dots are placed randomly within the container div, we can use Math.random() to generate random values for the dot properties. We can also use Math.floor() to round the values down to the nearest integer.
Once we've created the dots and added them to the container div, we need to make them move towards the center of the container div on scroll. We can do this by adding an event listener to the window object for the scroll event, and then defining a moveDots() function that will be called whenever the user scrolls.
In the moveDots() function, we first calculate the position of the center of the container div using the offsetWidth and offsetHeight properties. We then loop through each dot and calculate the distance between its current position and the center using the Pythagorean theorem. We then move the dot closer to the center by dividing the distance by 50 and adding the resulting x and y values to the dot's current left and top properties. Finally, we check if the dot has reached the center of the container div, and if so, we stop moving it by setting its left and top properties to the center coordinates.
Overall, creating this code involved a mix of HTML, CSS, and Javascript knowledge. We needed to understand how to create and style elements in HTML and CSS, and how to manipulate those elements using Javascript. We also needed to understand how to use event listeners to respond to user interactions, and how to use basic math functions to calculate distances and positions.
In conclusion, this code demonstrates how to create a visually interesting and interactive webpage using HTML, CSS, and Javascript. By randomly placing and moving dots within a container div, we can create a dynamic and engaging experience for the user. With a few modifications and additions, we can further improve this code and create even more engaging visuals.
Conclusion
ChatGPT is highly proficient at handling small coding tasks and providing quick solutions; however, when it comes to more complex projects that require a deeper understanding of programming concepts and best practices, ChatGPT may struggle to provide optimal solutions. This is because it is limited by its training data and lacks the contextual knowledge and experience that human programmers have. Therefore, while ChatGPT can be a useful tool for small coding tasks, it may not be the best choice for more complex projects that require a human touch.
Dev's conclusion
For example, in this example coding task, it couldn't do the job properly even though the task was asked and explained multiple times. So, even though ChatGPT is good for small tasks, it's not very useful when the tasks get more complex.