TNT | JS Apps | AI Cheat Sheets

Development Discussion Introduction and Outline

This page documents the development process of the A.I. Cheat Sheets app, including the brainstorming of the app concept and tagline, the creation of a dynamic image gallery with modal preview, and the documentation of the development process itself. It's based on a document that Copilot wrote: cheatSheetChatLog.html. We couldn't resist adding our 2¢, making it better?! You be the judge. Compare and contrast!

This is the 3rd iteration of our chat log. Here's version 2. We keep adding some things for clarity!

The framework for this app was developed and featured at TNT Copilot Shell as a template to jump start app development that utilizes Copilot. We wired up that template with VSCode and made modest adjustments as we began our development chat with Copilot. GPT-4.1 was the engine behind the scenes, and we used the Copilot Chat feature to assist us in our development process.

App concept and tagline brainstorming
Dynamic image gallery with modal preview
Documenting the development process

Quest 1: App concept & tagline

Me:

I'm creating an app that displays various 'cheat sheet' graphics intended to help users learn how to better harness AI in their jobs and personal lives. What would be a fun 'tag line' for the app entitled 'AI Cheat Sheets'?

GitHub Copilot::
Here are a few fun tag line ideas for your AI Cheat Sheets app:

"Unlocking AI, One Shortcut at a Time!"
"Your Fast Track to AI Mastery"
"Cheat the Hard Stuff. Master the Smart Stuff."
"AI Made Easy—Just a Sheet Away!"
"Boost Your Brainpower with AI Know-How"
"From Novice to Ninja: AI at Your Fingertips"
"Smarter, Faster, with Every Sheet"
"Level Up Your Life with AI Insights"

Let me know if you want more options or a specific style!

Quest 2: Dynamic image gallery with modal

Me:

Please place images from folder cheatSheets into figure tags with figcaptions. Place the responsive figures/images in div#r1c1Div. Make them 'clickable' and once clicked, launch a modal that showcases the larger image in a dismissable modal frame.

GitHub Copilot:
To achieve this, you’ll need to:

Dynamically load images from the cheatSheets folder into div#r1c1Div as <figure> elements with <figcaption>.
Make each image clickable to open a Bootstrap modal showing the larger version.
Add the modal HTML to your page.
Use JavaScript to handle the click and modal logic.

Assumptions:

Your images are in cheatSheets (relative to your HTML file).
You know the filenames or can list them in an array in JS.

Code Blocks and Sample Implementation:

Modal for Image Presentation

<div class="modal fade" id="cheatSheetModal" tabindex="-1" aria-labelledby="cheatSheetModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cheatSheetModalLabel">Cheat Sheet</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <img id="modalCheatSheetImg" src="placeholder.png" alt="Cheat Sheet" class="img-fluid">
        <div id="modalCheatSheetCaption" class="mt-2"></div>
      </div>
    </div>
  </div>
</div>

JavaScript to Populate Figures and Handle Modal Logic

// Add this function after your init() function
function loadCheatSheets() {
    // List your images and captions here
    const cheatSheets = [
        { filename: 'cheat1.png', caption: 'Prompt Engineering Basics' },
        { filename: 'cheat2.png', caption: 'AI Tools Overview' },
        { filename: 'cheat3.png', caption: 'Ethics in AI' }
        // Add more as needed
    ];

    const r1c1Div = document.getElementById('r1c1Div');
    r1c1Div.innerHTML = ''; // Clear existing content

    cheatSheets.forEach(sheet => {
        const figure = document.createElement('figure');
        figure.className = 'figure m-3 d-inline-block';

        const img = document.createElement('img');
        img.src = `cheatSheets/${sheet.filename}`;
        img.alt = sheet.caption;
        img.className = 'figure-img img-fluid rounded shadow-sm cheat-sheet-thumb';
        img.style.cursor = 'pointer';
        img.setAttribute('data-bs-toggle', 'modal');
        img.setAttribute('data-bs-target', '#cheatSheetModal');
        img.setAttribute('data-caption', sheet.caption);

        // Click handler to set modal image and caption
        img.addEventListener('click', function() {
            document.getElementById('modalCheatSheetImg').src = img.src;
            document.getElementById('modalCheatSheetImg').alt = sheet.caption;
            document.getElementById('modalCheatSheetCaption').textContent = sheet.caption;
        });

        const figcaption = document.createElement('figcaption');
        figcaption.className = 'figure-caption text-center';
        figcaption.textContent = sheet.caption;

        figure.appendChild(img);
        figure.appendChild(figcaption);
        r1c1Div.appendChild(figure);
    });
}

// Call this at the end of your init() function
// ...inside init()...
loadCheatSheets();

Optional CSS for Better Appearance

/* Add to your site-styles.css */
.cheat-sheet-thumb {
    max-width: 180px;
    transition: transform 0.2s;
}
.cheat-sheet-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #888;
}

                        // JavaScript

                        const cheatSheets = [

                          { filename: 'aiTerms.jpg', caption: 'Important AI Terms' },

                          { filename: 'aiTutor.jpg', caption: 'AI as a Tutor' },

                          // ...

                        ];

                        // ...

                        cheatSheets.forEach(sheet => {

                          // create figure, img, figcaption, add click handler for modal

                        });

Commentary: (what the human did)

Modal HTML was placed before </body>.
loadCheatSheets() function was created and called from init().
Image array and captions were supplied manually.
CSS for hover effect was added in the <style> block.
Validation issue with empty src in modal was fixed by using a placeholder image.

Summary:

Add the modal HTML.
Use JS to populate figures and handle modal display.
Add CSS for hover effect.

Quest 3: Documenting the process

Me:

I am pleased with your work in index.html! I'd like to document our discussion using the outline in aiCheatSheetChatLog.txt. Add what you think makes the dialog more clear by using any elements you like from this chat window. Please create a new webpage, 'cheatSheetChatLog.html' that has the same overall navigation and jumbotron area as does index.html and then place our 'discussion' as the main focus of the page.

GitHub Copilot:
This page (cheatSheetChatLog.html) was created to document the collaborative development process between user and Copilot, including design decisions, implementation steps, and helpful commentary. The structure and navigation match the main app for consistency and easy reference.

A.I. Cheat Sheets

"Cheat the Hard Stuff. Master the Smart Stuff"

Development Discussion Introduction and Outline

Modal for Image Presentation

JavaScript to Populate Figures and Handle Modal Logic

Optional CSS for Better Appearance