magicseth

I'm sitting here working on my YC application, and it has character limits.

I thought it would be nice to see a live update of character counts, so I asked GPT:

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.

And it spit out code that worked perfectly.

This is a new era of "disposable code" appears when needed, and can be thrown away!

here's the javascript if you want to try it:

  // 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}`;
      }
    });
  });