TNT | AI Cheat Sheets

Development Discussion 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. Except for this paragraph, all content was generated by GitHub Copilot. A human used this code as a starting point and then added a few improvements, resulting in the document: cheatSheetChatLog2.html.

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.

Sample Implementation:

                        // 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:

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:

Please create a webpage to showcase the chatlog that helped develop this app.

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 Outline