Improvising and Role Playing in the Face of Self-Doubt

Hola Femmebots! Welcome to another chapter of Dr. Nutmeg’s bisabuela’s entrepreneurial journey in the 1920s:

The Nine Lives of Maria La Gata!

A story about a Latina who transforms

From Broadway Dancer

to rum-running gangster in Ponce, Puerto Rico.

The story has been in the works since 2016. I’ve learned a lot about the writing and rewriting process since then. Now that we’re in National Novel Writing Month (NaNoWrimo), and I have identified YOU (Latinas in Tech) as the most engaged audience (83% open rate last week!), PLeASE feel free to critique in the comments section below. We hope you enjoy the little video above showing the Don Q Tour in Ponce, Puerto Rico, where we did research earlier this year.

If you’re a paid subscriber, please scroll down to skip the JavaScript lesson and go straight to the next chapter. 😘

In last week’s chapter, Josephine Baker helped Maria push forward by role playing as a rum runner. The big moment at the end of the chapter? Maria officially appends “La Gata” to her name.

In tonight’s chapter, Maria La Gata tries to take the role play out of the bathroom and into the speakeasy, but she gets sucked into self-doubt and the chaos of her past life — again. Dang!! The obstacles are always piling up, right? That’s how it is for all heroes on their journey to success. No one ever said it would be easy.

I can relate, especially as I dive deeper into JavaScript. ;)

You like that segue into our JavaScript lesson for un-paid subscribers? Ya, I thought you would. One thing I noticed as I was learning how to build something called The Pig Game, this Flow Chart looked a little bit like Maria’s entrepreneurial journey. Just replace “user” with “Maria:”

• Maria rolls the dice. Lands in Josephine Baker’s spotlight.

• Display dice roll.

• Is it a 1?

• If yes, Maria loses. Switch player. Fred rolls the dice.

• Is the score greater than or equal to 100? Fred wins.

• If the score is less, Maria loses.

The Pig Game

I think the Pig Game is teaching me how to create a Javascript Gallery from scratch. It’s kind of neat to think about building it with my own code rather than relying on modules or third-party apps. But it’s taking my brain a while to simmer on how to adapt it.

Follow the steps. Create a flow chart:

41 slides plus captions. Below would be the HTML. I would replace the variables in the Pig Game with variables for a Gallery like “Left Arrow,” “Right Arrow,” “Year,” “Photo[x],” and “Caption/Description.”

 <main>
      <section class="left-arrow left-arrow--0 left-arrow--active">
        <h2 class="name" id="name--0">Year Photo{[1]}</h2>
        <p class="score" id="score--0">43</p>
        <div class="current">
          <p class="current-label">Current</p>
          <p class="current-score" id="current--0">0</p>
        </div>
      </section>
      <section class="right-arrow right-arrow--1">
        <h2 class="name" id="name--1">Player 2</h2>
        <p class="score" id="score--1">24</p>
        <div class="current">
          <p class="current-label">Current</p>
          <p class="current-score" id="current--1">0</p>
        </div>
      </section>

      <img src="photo-1.png" alt="Timeline Photo" class="dice" />
      <button class="btn btn--new">🔄 Reset back to beginning of photo gallery</button>
      <button class="btn btn--roll">🎲 Randomize Photo Gallery</button>
      <button class="btn btn--hold">📥 Hold</button>
    </main>

The easier method would be a Google Search:

javascript code to build photo gallery

AI Results

// Sample image data
const images = [
    {
        src: "image1.jpg",
        alt: "Image 1 Description"
    },
    {
        src: "image2.jpg",
        alt: "Image 2 Description"
    },
    // Add more image objects as needed
];

// Get the gallery container element
const galleryContainer = document.getElementById("gallery");

// Create and append image elements to the gallery
images.forEach(image => {
    // Create image element
    const imgElement = document.createElement("img");
    imgElement.src = image.src;
    imgElement.alt = image.alt;
    imgElement.classList.add("gallery-image"); // Add a CSS class for styling

    // Create a container for the image (optional)
    const imageContainer = document.createElement("div");
    imageContainer.classList.add("image-container");
    imageContainer.appendChild(imgElement);

    // Append image container to the gallery
    galleryContainer.appendChild(imageContainer);
});

That makes me feel great because now I can get back to thinking about Maria La Gata’s journey!

Isn’t it more fun learning about code when it’s embedded in literature?

On Thursday nights, Maria La Gata takes over Dr. Nutmeg's Femmebots® channel to remind 21st century Latinas how much harder things were in the 1920s - especially without math. To receive new posts and support my work, consider becoming a free or paid subscriber.