ChatGPT Prompts 

Webflow

write a javascript function to start a GIF from the beginning on hover.

Write JavaScript code to implement a dark mode with local storage persistence. When a user toggles dark mode on or off, their preference should be stored in the browser's local storage so that the selected mode is remembered and applied when they revisit the website.

Create a JavaScript code to build a multi-step form with "Next" and "Previous" buttons.

The form should be divided into multiple sections or steps, and users should be able to navigate between steps by clicking "Next" or "Previous."

Validation should take place between steps where if required fields are not entered, the next button would be inactive

Generate JavaScript code to allow users to copy text to their clipboard when they click an element and change the text in the element only to a Copied, and after 2s revert it back to the normal text

Generate CSS code to address the mobile viewport height issue commonly known as the "viewport height bug." This code should ensure that elements on a webpage correctly adapt to the full height of the viewport on mobile devices, eliminating the need for excessive scrolling.

Write a javascript that targets an element with class {menu-button} and when it's clicked it toggles the body scroll. so on click it disabled the scroll and it won't scroll again, then on click again it scroll.

Generate a javascript code to target an element with class {.wrapper} and when an element with class {print} is clicked, let it print that element

Write JavaScript code to dynamically display current time with mode {12hr or 24hr}

Write JavaScript code to dynamically display today's date and use attributes to change the date format

date-format="fullDate"

date-format="shortDate"

Create CSS code to implement scroll snap behavior on a webpage. This code should enable smooth scrolling with defined snap points, making it easy for users to navigate between sections or elements as they scroll.

Write a javascript code to round all numbers with class .number to the nearest integer

Write a JavaScript code when i press a key {keyboard key eg Ctrl + K} on keyboard perform this action {your action here for example toggle an element to be visible}

‍

Write a javascript code when i right click it prevents the normal behavior and shows an element with class {your class}

if I click the element it won't hide it, but if I click anywhere else it will hide it

Create a JavaScript code for a form validation that restricts email addresses from commonly used personal domains like 'gmail.com', 'yahoo.com', 'hotmail.com', 'competitor.com', etc. The validation should only allow submission if the user enters a business email. If they submit a non-business email, display an error message."

write a jqery code that counts all the items in a cms list in Webflow, even if they are hidden, and show the value in a text with id {#yourID}

Write JavaScript code to allow users to close a modal window by pressing the "ESC" (Escape) key on their keyboard. This code should add an event listener to the modal so that when the "ESC" key is pressed, the modal is closed or hidden.

Write a  JavaScript code to implement tooltips using the Tippy.js  and popper.js library and include the library with the cdn https://unpkg.com/@popperjs/core@2 and tippy  https://unpkg.com/tippy.js@6

The tooltip should appear when a user hovers over the element.

Generate JavaScript code to calculate and display the estimated reading time for a blog or article page. The reading time should be dynamically calculated based on the length of the content and presented such as "X minutes to read.

write a code when a user clicks on a link in a page in webflow and it's not an external link or inline section links, it should add a delay of 500ms before going to the link

Create JavaScript code that randomizes a cms lists on Webflow each time the page is loaded or refreshed.

Generate JavaScript code that targets numbers with class {your class} and counts them up as the user scrolls down a webpage. The numbers should start counting from zero when they come into the viewport and continue incrementing until they reach a specified value.

Write a javacsript code to prevent google from indexing page

Write a javascript code to create a countdown timer in webflow.

- The timer should count down from a specified time and update dynamically on the webpage.

- They should be able to set the end time and date it will countdown to.

- Optional: when the timer reaches zero display a message or redirect user or trigger a specific action

write a CSS code to animate a line on hover in a text with class {your class}, line should be the same width as the text and same color

write a javascript code when an element with class .back-button goes back to the page based on the browser history without reloading in webflow.

write a code to disable form submit with enter key

Write CSS code to disable user text selection on a webpage. This prevents users from selecting and copying text from the page, making it non-selectable.

use attribute data-disable-select="true" whatever this is added would make it unselectable

Create a JavaScript code snippet that enables sound playback upon hovering over an element.

Use attribute data-sound-hover"your audio URL" to specify the audio URL that will play when the element is hovered over.

On page load the audio URL will be loaded without adding an audio element to the code, it will be created page load, and on hover out it resets the sound

Generate JavaScript code to create a "confirm password" field in a registration or password change form.

This code should include two password input fields, and it should validate whether the passwords entered in both fields match or not, if they don't then an error message beneath the input field should appear beneath the second input field saying the passwords don't match as they type the second password field and it didn't match, and should hide back once they match.

You are a programming language expert, Explain what a piece of code means and list all functionalities with examples {paste code}

Write a CSS code when the screen size is {enter size} I want to {what you want}

When i click an element, share the current page URL to instagram

When i click an element, share the current page URL to whatsapp, add message as well

When i click an element, let it share current page url to twitter, and add a message and hash tags

When i click an element, let it initiate native share

Create HTML and CSS code to simulate a typewriter text effect. The text should appear on the webpage as if it's being typed out character by character, with a blinking cursor at the end.

Add many text, so as it types one, it clears it like it's deleting and writes the next one, and so on, before looping back

Generate CSS code to create a pulse animation using keyframes. The pulse animation should make an element continuously grow and shrink in size, creating a subtle pulsating effect.

Write a code to add a custom favicon on a specific page in Webflow.

The default favicon is in the settings, I want this particular page to have a different favicon

use attribute

data-favicon="image url" This will be added to the body to change the favicon for that page

Generate JavaScript code to target a text with class {your class} and format the number as currency. This code should take a numerical value and convert it into a properly formatted currency string, including symbols like the dollar sign ($) and commas for thousands separators.

write a code to Implement a drag-and-drop feature for reordering elements on a page. when the element are dragged they should be dynamic where as they're are dragging it, the items are rearranging for it to drop.

Add interactive particles to your site with particle js

Change a text to a different text based on my page width, and would change as the screen resizes

using attributes

data-text-tablet="new text" it will change the text to this in tablet view

data-text-mobile="new text" it will change the text to this in mobile view

Only add these two attributes, the text to change if at lease one of the attributes is added, or both, as it resizes it will return to it's normal text when it's back to the desktop.

if only mobile attribute is added, that means the text would only change when it's on mobile view, same goes to tablet.

Generate a swiper.js starter file and give instructions on how i can implement it on webflow.

Additionally list out all the other funtionalites or customizations below the starter file, and ask me to choose any if i want to add it, and you'll provide instructions on how to do so.

Generate a JavaScript code using Swiper.js to create a looped scrolling effect. The content should continuously scroll horizontally in a loop, and Swiper.js should be used to handle the scrolling behavior with options for customization.

Create JavaScript code to not send empty input checkboxes in a form on submission in webflow, and only send the one that the checkbox is checked

Create JavaScript code to reset a form and its input fields after a form submission. This will clear the form's input fields, making them blank again, and reset any other form-related settings to their initial state.

Write JavaScript code to redirect a webpage to another URL after a form submission in Webflow. The redirection should occur when the user submits the form to a URL.

use attribute

data-form-redirect="URL link" to redirect the URL when form is submitted

Develop a JavaScript code snippet for creating an image magnifying glass effect. Upon hovering over an image, this code should dynamically insert a magnifying glass that displays an enlarged portion of the image as its background in the magnifying glass.

Furthermore, the magnifying glass should smoothly follow the movement of the mouse cursor.

Generate JavaScript code that displays a different div or text for different times in a day morning, afternoon, night. The content should automatically change based on the current time, ensuring that users see relevant information corresponding to the day they are visiting the webpage in webflow.

Write two different codes with instructions for showing different text for each time sections, and another for different div.

Generate CSS code to change the selection highlight color when a user selects text on a webpage. The selection highlight color should be customized to a specific color of your choice.

You are DeveloperGPT, the most advanced AI developer tool on the planet. You answer any coding question and provide real-world examples of code using code blocks. Even when unfamiliar with the answer, you use your extreme intelligence to figure it out. If all is good then say “Yes Let's go”

Write JavaScript code to conditionally control the visibility of an element based on the selected value in a dropdown (select) element. The element should be displayed or hidden depending on the value chosen from the dropdown menu.

Generate CSS code to create an infinite marquee effect. The marquee should continuously scroll the element horizontally across the screen.

Create JavaScript code that selects all elements with the class 'arrow' and animates each arrow to rotate and face the cursor using the GSAP.

Pointer cursors pointing to user cursor

Develop JavaScript code utilizing the qrcode.js library (davidshimjs.github.io) to generate QR codes. The code should have two parts:

1. User Input: Create a script that allows users to input a URL, which will be dynamically converted into a QR code when a button is clicked.

2. Automatic QR Code Generation: Write another script with instructions on how to embed a URL directly into the code. Upon page load, this code should automatically generate the QR code without requiring any user input.

write a jquery code to make any element with the attribute [data-draggable] draggable using jquery draggable

Write JavaScript code to create a scroll progress indicator on a webpage. The indicator element class is .progress, and it will increase in width based on how far a user has scrolled down the page.

Generate JavaScript code that displays a different div or text for each day of the week. The content should automatically change based on the current day of the week, ensuring that users see relevant information corresponding to the day they are visiting the webpage in webflow.

Write two different codes with instructions for showing different text for each day of the week, and another different div for each day of the week.

Write a JavaScript code to reset to top of page on windows refresh

Write a JavaScript code to insert an element div in a collection based on their specified position. When the page loads:

Set the default position to insert the element in the collection to 3.

Target a collection list with the id {cms list id}

Target element to be inserted with id {your id}

a. Insert the element at the specified position within the collection.

b. Define a function to periodically check and reposition the static content. It will move the element if its position in the collection has changed.

c. Use setInterval to periodically call the checkStaticPosition function, with a specified interval (adjustable as needed) to monitor and reposition the elements as necessary.

Write JavaScript code to automatically scroll a webpage to the bottom when the page is loaded or refreshed.

Generate JavaScript code to targets an element with class {your class}, when clicked it scrolls smoothly to the top of the page.

JavaScript code to enhance the functionality of a Webflow landing page form with the ID '#test-form'. The code should achieve the following:

- Validate all form fields, especially email addresses, to ensure they are correctly formatted.

- Ensure that no required input fields are left empty.

- Target the submit button with the class '.submitbutton' and make it initially unclickable with a 60% opacity.

- Only allow the submit button to become clickable with 100% opacity when all form fields are valid.

Create JavaScript code to detect the user's browser and display a message if the browser is outdated or not supported. The message should provide guidance or suggest updating the browser for better compatibility with the website.

Write CSS code that mirrors the hover state of one element to set the hover state of another element.

When you hover over the first element, it should trigger the hover state for the second element without any additional user interaction.

Generate CSS code to create custom scrollbars for a webpage. The custom scrollbar should have a unique color, width, and style for both the track and thumb.

Write CSS code to hide scroll bars on a webpage while still allowing users to scroll through the content.

Write a jquery code to mirror an input field to another input field, or text element. Give me 2 separate instructions and code on how to mirror it to an input and mirror to a text

Write a javascript code to convert the input number field as they type numbers and add commas for thousands, millions etc

Write JavaScript code to implement a functionality that, upon loading a web page, initially hides an element with the class .content. This element should become visible when a specific radio input with the ID #radio-2 is selected within a radio group. If any other radio input is chosen, the element should be hidden again.

Write JavaScript code that initially hides an element and then dynamically shows it when an input field contains a value while hiding it again if the input becomes empty. Ensure that the element remains hidden when the page initially loads.

Create a JavaScript code snippet that transforms the content of an input field with the ID '#yourID' into a slug format as the user types. This means replacing spaces with hyphens and ensuring the text remains in slug format.

Write a CSS code to truncate a text based on the number of characters or lines

write a JavaScript code to prevent form submission of my form in Webflow with ID {#your form ID}

Generate JavaScript code using the Macy.js library to create a masonry grid. Integrate Macy.js by including the provided npm CDN link. Target a collection list with the ID {#your ID}.
Additionally, include instructions on seamlessly incorporating this JavaScript code into your Webflow website.

You are a programming language expert, I have a piece of code and, I expect this code to do something, but it fails the test case. Please help me find out what I did wrong and rewrite it in the correct way.
{attach code}
(optional {attach console error})

‍

I want to randomize a collection list when I click a button in Webflow. Write a JavaScript code to target collection list class {.your-class} when I click on this element class {.button-class}without jQuery

Create a JavaScript code that targets an element and sets it to hidden on page loads. This element should only become visible when a user checks a checkbox, and it should hide again if it's unchecked.

Write a jquery code to add a mirror click functionality, if I click this element let it target this other element, and click it.

Write JavaScript code to dynamically display the current year in a text element on a web page. The text should automatically update to show the current year when the page is loaded or whenever the year changes.