I'm sitting here working on my YC application, and it has character limits.<p>I thought it would be nice to see a live update of character counts, so I asked GPT:<p><i>Write a bit of javascript that I can paste into chrome devtools. Everytime I enter text in an input box, it should show the character count of the current input box in a div in the lower left of the website. When I change to a new input, the counter should reset.</i><p>And it spit out code that worked perfectly.<p>This is a new era of "disposable code" appears when needed, and can be thrown away!<p>here's the javascript if you want to try it:<p><pre><code> // Select the input fields you want to monitor
const inputFields = document.querySelectorAll('input[type="text"]');
// Create a div element to display the character count
const characterCountDiv = document.createElement('div');
characterCountDiv.style.position = 'fixed';
characterCountDiv.style.bottom = '0';
characterCountDiv.style.left = '0';
characterCountDiv.style.background = '#fff';
characterCountDiv.style.padding = '10px';
document.body.appendChild(characterCountDiv);
// Keep track of the current input field being edited
let currentInputField = null;
// Listen for input events on each input field
inputFields.forEach((inputField) => {
inputField.addEventListener('input', () => {
// If this is a new input field, reset the character count
if (inputField !== currentInputField) {
currentInputField = inputField;
characterCountDiv.innerText = `Character count: ${inputField.value.length}`;
} else {
characterCountDiv.innerText = `Character count: ${inputField.value.length}`;
}
});
});</code></pre>