The Chatbot Who Cried JS

If you've spent more than five minutes talking to me recently, you'll know that I'm both fascinated and a little obsessed with AI at the moment. ChatGPT alone has helped me with everything from formatting receipts for an insurance claim to helping write an entire natural language SQL querying application. The latter use case is what I want to talk about in this article because it highlights what a future with AI looks like (until Skynet, Ultron, or Hal 9000 takes over).

Recently, I was chatting with ChatGPT about building out a more responsive, engaging element on a website. As we discussed the topic, ChatGPT suggested using CSS hover styling to transform the div and change its color. It also suggested using JavaScript mouse events to transform the div and change its color. If that sounds like the same thing, that’s because it was.

Sass:

.skill-category {
    &:hover {
    transform: scale(1.05);
    background-color: $secondary;
  }
 }        

Javascript:

function handleSkillCategories() {
? const skillCategories = document.querySelectorAll(".skill-category");


? skillCategories.forEach((category) => {
? ? category.addEventListener("click", (event) => {

? ? ? //Irrelevent Code Goes Here //
? ? });

? ? category.addEventListener("mouseenter", (event) => {
? ? ? const isCategoryActive = event.currentTarget.classList.contains("active");
? ? ? if (!isCategoryActive) {
? ? ? ? event.currentTarget.style.backgroundColor = $secondary;
? ? ? ? event.currentTarget.style.transform = "scale(1.05)";
? ? ? }
? ? });

? ? category.addEventListener("mouseleave", (event) => {
? ? ? const isCategoryActive = event.currentTarget.classList.contains("active");
? ? ? if (!isCategoryActive) {
? ? ? ? event.currentTarget.style.backgroundColor = $primary;
? ? ? ? event.currentTarget.style.transform = "scale(1)";
? ? ? }
? ? });
? });
}        

What followed was a 20-message back-and-forth, each of us trying to convince the other. At first, I assumed I had to be missing something because why would it add something so unnecessary? As we continued discussing it and as I continued testing it, it became clear that ChatGPT itself wasn't actually sure what it had written or why it was needed. Once it said, "Without the mouseleave event, the category div would retain the background color and scale applied by the mouseenter event even after the user's mouse has left the div. This could create confusion for the user and make it more difficult for them to understand which category divs are currently active", I caught on. Finally, with a reply of "Well that's only because ... you added a mouseenter event", it connected the dots and our code war was over.

It's easy to rely on AI language models like ChatGPT for code insights and best practices, but they're not a replacement for our own critical thinking and evaluation of our code. As developers, we need to stay proactive, critical, and thoughtful in our approach. This means questioning the advice of chatbots (politely, of course) and seeking the best solution for our specific use case.

Thanks for reading, and happy coding!