ChatGPT and Webflow together are INSANE!

I have a client that wants a green dot to appear under the current page in the Navigation bar. I thought it would be cool to have the dot travel to each nav link that is being hovered.

I typed in this prompt to ChatGPT and boom! It wrote me this code that works perfectly. It took a couple iterations but it works perfectly now.

The code it generated:

.dot {
width: 8px;
height: 8px;
position: absolute;
bottom: 0.75em;
background-color: #6dcda7;
border-radius: 100vw;
transition: all 0.3s;
}
}

// dot on nav menu
let navMenu = document.querySelector('.nav-menu');
let navLinks = navMenu.querySelectorAll('.nav-link');
let currentPage = window.location.href;
let navMenuPos = navMenu.getBoundingClientRect();
let dot = document.createElement('span');
dot.classList.add('dot');
navMenu.appendChild(dot);

function moveDot(link) {
let linkPos = link.getBoundingClientRect();
let linkCenter = (linkPos.left - navMenuPos.left) + (linkPos.width / 2);
dot.style.left = linkCenter + 'px';
}

window.addEventListener('resize', function() {
navMenuPos = navMenu.getBoundingClientRect();
});

navLinks.forEach(link => {
if (link.href === currentPage) {
// get the x position of the nav-link and set it to the dot
moveDot(link);
}

link.addEventListener('mouseover', function() {
    moveDot(this);
});

link.addEventListener('mouseout', function() {
    // get the x position of the current page nav-link and set it to the dot
    navLinks.forEach(link => {
        if (link.href === currentPage) {
            moveDot(link);
        }
    });
});
});

And just like that I had exactly what I was looking for without having to write any code. THIS IS THE FUTURE!

Check out the working example here:
https://mst2.webflow.io/test

5 Likes