Making a Vote Forward checklist

~ Jon Udell

In How and why to write letters to voters I discussed Vote Forward, my favorite way for those of us who aren’t in swing states to reach out to voters in swing states. The site works really well for adopting batches of voters, and downloading packets of form letters. As I close in on 1000 letters, though, I’m finding it isn’t great for tracking progress at scale. Here’s how my dashboard page looks.

With 50 bundles in play, many of which are farmed out to friends and neighbors who are helping with the project, it’s become cumbersome to keep track of which bundles are prepped (ready to mail) or not. Here is the checklist I needed to see.

VoteForward Dashboard Report

mmorg: 1-UNPREPPED
r23Pp: 2-UNPREPPED
v9Kbo: 3-UNPREPPED
wLMPw: 4-UNPREPPED
24L4o: 5-PREPPED
4nNnj: 6-PREPPED
5rQmV: 7-PREPPED
...
YV4dL: 48-PREPPED
zKjne: 49-PREPPED
ZrKJz: 50-PREPPED

If you’re in the same boat, here’s a piece of code you can use to make your own checklist. It’s gnarly, if you aren’t a programmer I advise you not even to look at it, just copy it, and then paste it into your browser to have it open a new window with your report.

Vote Forward checklist maker (expand to copy) 
javascript:(function(){
  // First part: Adjust height of divs with inline styles
  document.querySelectorAll('div[style]').forEach(div => {
    let inlineStyle = div.getAttribute('style');
    if (inlineStyle.includes('position: relative')) {
      div.style.height = '20000px';  // Set the height to 20000px
    }
  });

  // Introduce a delay before processing the list of items
  setTimeout(() => {
    const items = document.querySelectorAll('li.bundle-list-item.individual');

    let dataList = [];

    // Iterate over the items to capture data-testid and ID
    items.forEach(item => {
        let dataTestId = item.getAttribute('data-testid');
        
        // Use the id attribute of the input element to extract the ID
        const toggleInput = item.querySelector('input.slide-out-toggle');
        const toggleId = toggleInput ? toggleInput.getAttribute('id') : '';
        
        // Extract the ID part from the toggleId pattern "toggle-24L4o-PREPPED"
        const id = toggleId ? toggleId.split('-')[1] : 'ID not found';

        // Remove "bundle-" and the number part from dataTestId, keeping only "PREPPED" or "UNPREPPED"
        dataTestId = dataTestId.split('-').pop();  // Extract only the "PREPPED" or "UNPREPPED" part

        // Push the data into the array
        dataList.push({ dataTestId, id });
    });

    // Sort first by whether it's PREPPED or UNPREPPED (descending for UNPREPPED first), 
    // then by the ID within each group
    dataList.sort((a, b) => {
        if (a.dataTestId.includes("PREPPED") && b.dataTestId.includes("UNPREPPED")) {
            return 1;  // UNPREPPED comes before PREPPED
        } else if (a.dataTestId.includes("UNPREPPED") && b.dataTestId.includes("PREPPED")) {
            return -1;
        }
        // Sort by ID if they belong to the same category
        return a.id.localeCompare(b.id);
    });

    // Prepare the output string
    let output = '';
    dataList.forEach((item, index) => {
        output += `${item.id}: ${index + 1}-${item.dataTestId}\n`;
    });

    // Open a new window with the output in a text area for easy copying
    let newWindow = window.open('', '', 'width=500,height=500');
    newWindow.document.write('<html><body><h2>VoteForward Dashboard Report</h2><pre>' + output + '</pre></body></html>');
    newWindow.document.close();
  }, 2000);  // Adjust delay as needed
})();

Here are instructions for Chrome/Edge, Safari, and Firefox. You might need to tell your browser to allow the popup window in which it writes the report.

Chrome/Edge:

  1. Open the VoteForward dashboard in your browser.
  2. Open the developer console:
    • Windows/Linux: Press Ctrl + Shift + J.
    • Mac: Press Cmd + Option + J.
  3. Paste the code into the console.
  4. Press Enter to run the code.

Firefox:

  1. Open the VoteForward dashboard in your browser.
  2. Open the developer console:
    • Windows/Linux: Press Ctrl + Shift + K.
    • Mac: Press Cmd + Option + K.
  3. Paste the code into the console.
  4. Press Enter to run the code.

Safari:

  1. Open the VoteForward dashboard in your browser.
  2. Enable the developer console (if it’s not already enabled):
    • Go to Safari > Preferences.
    • Click the Advanced tab.
    • Check “Show Develop menu in menu bar” at the bottom.
  3. Open the developer console:
    • Press Cmd + Option + C.
  4. Paste the code into the console.
  5. Press Enter to run the code.

It would be nice to have this as a built-in feature of the site but, as we come down to the wire, this may be a helpful workaround.

Thanks, again, to the Vote Forward team for all you do! It’s a great way to encourage voter turnout.

Posted in .

Published by Jon Udell

One thought on “Making a Vote Forward checklist”

  1. Pingback: Mix Human Expertise With LLM Assistance for Easier Coding

Leave a Reply