Copilot Showcase

GitHub Copilot:

Certainly! Here’s how you can implement the firstGlance(phrase) encryption function, add an input block to div#r1c1Div, and display the output in div#r1c2Div. I’ll include comments to explain each part.

1. Add the input and button to div#r1c1Div, and an output area to div#r1c2Div:

// filepath: c:\Users\kpendleton\OneDrive - trinity christian academy\Subjects\Programming\CopilotCS2025\FirstGlance2025\FirstGlance-CPTNT2025-05-18-Stg1\index.html
// ...existing code...
<div id="r1c1Div" class="bg-info-subtle col-sm-6">
    <!-- Input block for encryption -->
    <label for="phraseInput" class="form-label mt-2">Enter a phrase to encrypt:</label>
    <input type="text" id="phraseInput" class="form-control mb-2" value="THE WORLD DOESNT ALWAYS MAKE SENSE">
    <button id="encryptBtn" class="btn btn-primary mb-2">Encrypt</button>
    <div id="inputHelp" class="form-text">Try your own phrase!</div>
</div><!-- end r1c1Div -->
<div id="r1c2Div" class="bg-danger-subtle col-sm-6">
    <!-- Output block for encrypted phrase -->
    <label class="form-label mt-2">Encrypted Output:</label>
    <div id="outputDiv" class="alert alert-secondary" style="min-height:2em;"></div>
</div><!-- end r1c2Div -->
// ...existing code...

2. Add the JavaScript function and event handler at the end of your <script> block:

// filepath: c:\Users\kpendleton\OneDrive - trinity christian academy\Subjects\Programming\CopilotCS2025\FirstGlance2025\FirstGlance-CPTNT2025-05-18-Stg1\index.html
// ...existing code...
// Add this inside your <script> tag, after the init() function

/**
 * Encrypts a phrase by rearranging the letters in a specific pattern.
 * For each word, swap the first and second letters, then reverse the order of the words in pairs.
 * Finally, add "TA SIFRT ENLGAC" at the end.
 * @param {string} phrase - The phrase to encrypt.
 * @returns {string} - The encrypted phrase.
 */
function firstGlance(phrase) {
    // Split the phrase into words
    let words = phrase.split(' ');

    // For each word, swap the first and second letters if possible
    let swappedWords = words.map(word => {
        if (word.length < 2) return word;
        // Swap first and second letter
        return word[1] + word[0] + word.slice(2);
    });

    // Group words into pairs and reverse each pair
    let paired = [];
    for (let i = 0; i < swappedWords.length; i += 2) {
        if (i + 1 < swappedWords.length) {
            paired.push(swappedWords[i + 1]);
            paired.push(swappedWords[i]);
        } else {
            paired.push(swappedWords[i]);
        }
    }

    // Join the words back into a string
    let encrypted = paired.join(' ');

    // Add the "TA SIFRT ENLGAC" at the end
    encrypted += " TA SIFRT ENLGAC";

    return encrypted;
}

// Wait for the DOM to load before adding event listeners
window.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('phraseInput');
    const btn = document.getElementById('encryptBtn');
    const output = document.getElementById('outputDiv');

    // Encrypt the default value on load
    output.textContent = firstGlance(input.value);

    btn.addEventListener('click', function() {
        const phrase = input.value;
        output.textContent = firstGlance(phrase);
    });
});
// ...existing code...

How it works:

• The input and button let users enter a phrase and trigger encryption.
• The firstGlance function:
  • Swaps the first two letters of each word.
  • Reverses each pair of words.
  • Appends "TA SIFRT ENLGAC" at the end.
• The output is shown in #outputDiv when the button is clicked or on page load.

Let me know if you want to adjust the algorithm or add more features!

GitHub Copilot:

Certainly! The pattern in your examples is:

• For a word with 3 or more letters, move the last letter to the front.
  • "the" → "hte" (e + th)
  • "world" → "lowrd" (d + worl)
  • "make" → "eamk" (k + mak)
• For words with 2 or fewer letters, just return the word as-is.

Here’s the mixup function with comments:

// Moves the last letter of the word to the front.
// For words with 2 or fewer letters, returns the word unchanged.
function mixup(word) {
    // If the word is 2 letters or less, return as is
    if (word.length <= 2) return word;
    // Take the last letter and add the rest of the word (excluding the last letter)
    return word[word.length - 1] + word.slice(0, word.length - 1);
}

// Examples:
// mixup("the")    // "hte"
// mixup("world")  // "lowrd"
// mixup("make")   // "eamk"
// mixup("a")      // "a"
// mixup("to")     // "to"

Explanation:

• word[word.length - 1] gets the last character.
• word.slice(0, word.length - 1) gets all but the last character.
• Concatenating them puts the last letter first, followed by the rest.

Let me know if you want to use this in your encryption function!

GitHub Copilot:

Thank you for catching that!
The correct algorithm is:
Move the first letter to the end of the word.

• "the" → "hte"
• "world" → "lowrd"
• "make" → "eamk"
• "at" → "ta"

Here is the corrected mixup function with comments:

// ...existing code...

/**
 * Moves the first letter of the word to the end.
 * For words with 1 letter, returns the word unchanged.
 * @param {string} word - The word to mix up.
 * @returns {string} - The mixed up word.
 */
function mixup(word) {
    if (word.length <= 1) return word;
    // Take everything except the first letter, then add the first letter at the end
    return word.slice(1) + word[0];
}

// Example outputs:
// mixup("the")   // "hte"
// mixup("world") // "lowrd"
// mixup("make")  // "aekm"  <- Note: Copilot's example output here was 'aekm', but user's initial request was 'eamk'. The code implements 'aekm'.
// mixup("at")    // "ta"
// mixup("a")     // "a"

// ...existing code...

Explanation:

• word.slice(1) gets all characters except the first.
• word[0] is the first character.
• Concatenating them moves the first letter to the end.

Let me know if you want to use this in your encryption function!

GitHub Copilot:

Okay, I've analyzed the examples the -> hte, world -> lowrd, make -> eamk, and the implied at -> ta. It appears the "pattern" involves different rules based on the length of the word:

Identified Algorithm:

1. For words of length 0 or 1: The word is returned unchanged.
2. For words of length 2 or 3: The first two characters are swapped.
   • at (len 2: a,t) becomes ta (t,a)
   • the (len 3: t,h,e) becomes hte (h,t,e)
3. For words of length 4 or more: The word is rearranged according to the specific index pattern: char_at_index_3 + char_at_index_1 + char_at_index_0 + char_at_index_2 + (rest_of_the_word_from_index_4_onwards).
   • make (len 4: m,a,k,e at indices 0,1,2,3) becomes eamk (e from index 3, a from index 1, m from index 0, k from index 2).
   • world (len 5: w,o,r,l,d at 0,1,2,3,4) becomes lowrd (l from index 3, o from index 1, w from index 0, r from index 2, d from index 4).

Here's the mixup function implementing this logic:

// ...existing code...
        }//end firstGlance0

        /**
         * Mixes up a word based on its length according to specific patterns.
         * - Length 0 or 1: Returns the word as is.
         * - Length 2 or 3: Swaps the first two characters.
         * - Length 4 or more: Rearranges to word[3] + word[1] + word[0] + word[2] + word.slice(4).
         * @param {string} word The word to be mixed up.
         * @returns {string} The mixed-up word.
         */
        function mixup(word) {
            const len = word.length;

            if (len <= 1) {
                // For words of length 0 or 1, return as is.
                return word;
            } else if (len === 2 || len === 3) {
                // For words of length 2 or 3, swap the first two characters.
                // e.g., "at" -> "ta", "the" -> "hte"
                return word[1] + word[0] + (len === 3 ? word[2] : '');
            } else { // len >= 4
                // For words of length 4 or more, apply the specific rearrangement:
                // word[3] + word[1] + word[0] + word[2] + rest_from_index_4
                // e.g., "make" -> "eamk", "world" -> "lowrd"
                // Ensure word[3] exists, which it does for len >= 4.
                return word[3] + word[1] + word[0] + word[2] + word.slice(4);
            }
        }

        // Example Usage (for testing in console):
        // console.log(`mixup("at"): ${mixup("at")}`);     // Expected: ta
        // console.log(`mixup("the"): ${mixup("the")}`);   // Expected: hte
        // console.log(`mixup("make"): ${mixup("make")}`); // Expected: eamk
        // console.log(`mixup("world"): ${mixup("world")}`); // Expected: lowrd
        // console.log(`mixup("SENSE"): ${mixup("SENSE")}`); // Expected: SESNE
        // console.log(`mixup("FIRST"): ${mixup("FIRST")}`); // Expected: SIFRT
        // console.log(`mixup("DOESNT"): ${mixup("DOESNT")}`); // Expected: SODENT (based on this rule)


    // Wait for the DOM to load before adding event listeners
// ...existing code...

This function should now correctly produce the outputs you specified for the, world, make, and at.

GitHub Copilot:

Okay, I understand the new algorithm for mixup(word). Here's how you can implement it:

1. Initialize a result string with the first character of the input word.
2. Iterate through the rest of the characters of the word (starting from the second character).
3. For each of these characters, if its position in this remaining part of the word is at an even index (0, 2, 4...), prepend it to result. Otherwise (odd index: 1, 3, 5...), append it to result.

Here's the refactored mixup function:

// ...existing code...
        }//end firstGlance0

        /**
         * Mixes up a word by taking the first character as a base,
         * then alternately prepending and appending subsequent characters.
         * e.g., mixup("doesnt") becomes "tsoden".
         * - "d" (base)
         * - "o" (prepend) -> "od"
         * - "e" (append)  -> "ode"
         * - "s" (prepend) -> "sode"
         * - "n" (append)  -> "soden"
         * - "t" (prepend) -> "tsoden"
         * @param {string} word The word to be mixed up.
         * @returns {string} The mixed-up word.
         */
        function mixup(word) {
            if (!word || word.length === 0) {
                return ""; // Handle empty string
            }
            if (word.length === 1) {
                return word; // Handle single character string
            }

            let result = word[0]; // Start with the first character as the base

            // Iterate through the rest of the characters
            for (let i = 1; i < word.length; i++) {
                const char = word[i];
                // (i-1) gives the 0-based index for the *subsequent* characters
                if ((i - 1) % 2 === 0) { // 0th, 2nd, 4th... subsequent character
                    result = char + result; // Prepend
                } else { // 1st, 3rd, 5th... subsequent character
                    result = result + char; // Append
                }
            }
            return result;
        }

        // Example Usage (for testing in console):
        // console.log(`mixup("at"): ${mixup("at")}`);     // Expected: ta (a -> t+a)
        // console.log(`mixup("the"): ${mixup("the")}`);   // Expected: hte (t -> h+t -> hte)
        // console.log(`mixup("make"): ${mixup("make")}`); // Expected: eamk 
                                                          // Let's re-trace "make" with the rule:
                                                          // base = "m"
                                                          // char "a" (i=1, (i-1)=0 is even) -> result = "a" + "m" = "am"
                                                          // char "k" (i=2, (i-1)=1 is odd)  -> result = "am" + "k" = "amk"
                                                          // char "e" (i=3, (i-1)=2 is even) -> result = "e" + "amk" = "eamk" - This matches "eamk"
        // console.log(`mixup("world"): ${mixup("world")}`); // Expected: lowrd
                                                          // base = "w"
                                                          // "o" (i=1, (i-1)=0 even) -> "ow"
                                                          // "r" (i=2, (i-1)=1 odd)  -> "owr"
                                                          // "l" (i=3, (i-1)=2 even) -> "lowr"
                                                          // "d" (i=4, (i-1)=3 odd)  -> "lowrd" - This matches "lowrd"
        // console.log(`mixup("SENSE"): ${mixup("SENSE")}`); // Expected: SESNE
                                                          // base = "S"
                                                          // "E" (i=1, (i-1)=0 even) -> "ES"
                                                          // "N" (i=2, (i-1)=1 odd)  -> "ESN"
                                                          // "S" (i=3, (i-1)=2 even) -> "SESN"
                                                          // "E" (i=4, (i-1)=3 odd)  -> "SESNE" - This matches "SESNE"
        // console.log(`mixup("FIRST"): ${mixup("FIRST")}`); // Expected: SIFRT
                                                          // base = "F"
                                                          // "I" (i=1, (i-1)=0 even) -> "IF"
                                                          // "R" (i=2, (i-1)=1 odd)  -> "IFR"
                                                          // "S" (i=3, (i-1)=2 even) -> "SIFR"
                                                          // "T" (i=4, (i-1)=3 odd)  -> "SIFRT" - This matches "SIFRT"
        // console.log(`mixup("DOESNT"): ${mixup("DOESNT")}`); // Expected: tsoden
                                                          // base = "D"
                                                          // "O" (i=1, (i-1)=0 even) -> "OD"
                                                          // "E" (i=2, (i-1)=1 odd)  -> "ODE"
                                                          // "S" (i=3, (i-1)=2 even) -> "SODE"
                                                          // "N" (i=4, (i-1)=3 odd)  -> "SODEN"
                                                          // "T" (i=5, (i-1)=4 even) -> "TSODEN" - This matches "tsoden"


    // Wait for the DOM to load before adding event listeners
// ...existing code...

This revised mixup function should now follow the alternating prepend/append logic you described and correctly produce "tsoden" for "doesnt", as well as the other examples when traced.

GitHub Copilot:

Okay, I'll refactor the firstGlance function to use the mixup function for each word in the phrase.

Here's the updated firstGlance function:

// ...existing code...
            
        }//end init

        /**
         * Encrypts a phrase by applying the mixup function to each word.
         * @param {string} phrase - The phrase to encrypt.
         * @returns {string} - The encrypted phrase.
         */
        function firstGlance(phrase) {
            // Split the phrase into words
            let words = phrase.split(' ');

            // Apply mixup to each word
            let mixedUpWords = words.map(word => mixup(word));

            // Join the mixed-up words back into a string with spaces
            return mixedUpWords.join(' ');
        }//end firstGlance
        
        // ...existing code...

Explanation of Changes:

1. I've renamed firstGlance0 to firstGlance. If you have another function named firstGlance already, you might need to resolve that naming conflict.
2. The function now splits the input phrase into an array of words.
3. It then uses the map array method. For each word in the words array, it calls mixup(word). This creates a new array (mixedUpWords) containing the results from mixup.
4. Finally, mixedUpWords.join(' ') concatenates all the mixed-up words back into a single string, with each word separated by a space.
5. The previous logic for swapping first/second letters, pairing words, and appending "TA SIFRT ENLGAC" has been removed as per the new requirement.

This firstGlance function will now take a phrase like "THE WORLD DOESNT ALWAYS MAKE SENSE", apply your mixup function to each word, and return the result (e.g., "HTE LOWRD TSODEN SALAWY EAMK SESNE").

GitHub Copilot:

Here are a few fun, pithy names that reflect the letter rearrangement in your app:

1. LexiTwirl: "Lexi-" (from lexicon) for words, and "Twirl" for the fun, dynamic rearrangement.
2. WordWinder: Suggests the coiling, alternating way letters are added around the initial letter.
3. PhrasePlay: Simple, direct, and emphasizes the playful manipulation of phrases.
4. LetterLoom: Evokes the idea of letters being intricately woven together by the alternating prepend/append logic.

GitHub Copilot:

Great choice! "Letter Loom" is a nice name. Here are a few tagline ideas that affiliate with it:

1. Letter Loom: Weaving Words Anew.
2. Letter Loom: Spin Your Phrases into New Patterns.
3. Letter Loom: Where Text is Artfully ReWoven.
4. Letter Loom: Tangling Letters, Crafting Fun.

You can update the <h4> tag with your chosen tagline:

// ...existing code...
<div id="jumbotron" class="p-3 bg-dark-subtle text-dark">
    <div id="jt-text" class="text-center">
        <h1 class="display-4 mb-2">Letter Loom</h1> 
        <h4 class="googleFont2">Weaving Words Anew.</h4>
        <p class="googleFont2">Stage No: <span id="stageNoSpan"></span></p>
    </div><!-- end jt-text -->
</div><!-- end jumbotron -->
// ...existing code...

GitHub Copilot:

Okay, to make the background image's top align with the top of the div#jumbotron, you need to change the background-position property.

Here's the suggested change:

// ...existing code...
div#jumbotron{
    background-image: url('../images/letterLoom1.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
// ...existing code...

GitHub Copilot:

You can use the CSS filter property to brighten the background image. Adding filter: brightness(150%); will increase its brightness by 50%. You can adjust the percentage to your liking.

Here's the suggested change:

// ...existing code...
div#jumbotron{
    background-image: url('../images/letterLoom1.jpg');
    background-repeat: no-repeat;
    background-position: top; /* Changed from 0px to top as per previous request */
    background-size: cover;
    min-height: 200px;
    border-bottom: 1px solid darkgrey;
    filter: brightness(150%); /* Added to brighten the image */
}
// ...existing code...

Keep in mind that at screen widths max-width: 576px, you have a rule:

    div#jumbotron {
        background-color: rgba(0, 0, 0, 0.5); /* Fade background by 50% */
        /* ... other styles ... */
    }

This background-color with alpha transparency will be layered on top of the background image. The filter: brightness(150%) will apply to the image itself before this semi-transparent black layer is applied. If the image still appears too dark at smaller screen sizes, you might need to adjust the rgba value in the media query or add a different brightness filter specifically for that media query.

GitHub Copilot:

Okay, you can create a radial gradient for the main element using the hex color codes for .peach and .teal.

Here's how you can add this style. You can place this within the <style> tags in your <head> or in your site-styles.css file. I'll show it as an addition to your existing inline <style> block for simplicity, but moving it to site-styles.css is generally better for organization.

// ...existing code...
    <title>TNT | JS Apps | Letter Loom</title>
    <style>
        .teal{
            background-color: #5fa69c;
        }

        .peach{
            background-color: #febb69;
        }

        main {
            /* Radial gradient: peach inner, teal outer */
            background-image: radial-gradient(circle, #febb69, #5fa69c);
        }
    </style>
    <script>
// ...existing code...

Explanation:

• main { ... }: This CSS rule targets the <main> element.
• background-image: radial-gradient(circle, #febb69, #5fa69c);:
  • radial-gradient(): This function creates an image consisting of a progressive transition between two or more colors that radiate from an origin.
  • circle: This specifies that the gradient's shape should be a circle.
  • #febb69: This is the hex code for your .peach color. It's listed first, so it will be the inner color, starting at the center of the gradient.
  • #5fa69c: This is the hex code for your .teal color. It's listed second, so it will be the outer color, to which the gradient transitions.

This will apply a circular radial gradient to your main element, with peach at the center fading outwards to teal.

Note: You currently have another main style in site-styles.css. The inline style in index.html will likely override the background-color and background-image from site-styles.css due to CSS specificity. For clarity and to avoid conflicts, it's best to consolidate your main background styling in one place.

GitHub Copilot:

To allow the background pattern defined in your site-styles.css to show up partially for the main element, you should remove or comment out the background-image rule in your inline <style> block in index.html. This inline style is currently overriding the pattern from your external stylesheet.

By commenting out the radial-gradient, the background-image: url("../images/moroccan-flower-bg-15pcnt.png"); from site-styles.css will apply to the main element. The filename "moroccan-flower-bg-15pcnt.png" suggests this image is already designed to be a subtle or partially transparent pattern, which will achieve the effect of it "showing up partially" over the background-color: #fbf9f0 !important; also defined for main in site-styles.css.

Here's the suggested adjustment:

// ...existing code...
    <title>TNT | JS Apps | Letter Loom</title>
    <style>
        .teal{
            background-color: #5fa69c;
        }

        .peach{
            background-color: #febb69;
        }

        main {
            /* Radial gradient: peach inner, teal outer */
            /* background-image: radial-gradient(circle, #febb69, #5fa69c); */ /* Commented out to allow pattern from site-styles.css to show */
        }

    
    </style>
    <script>
// ...existing code...

GitHub Copilot:

To achieve a "multiply" effect where your radial gradient interweaves with the background pattern from your site-styles.css, you need to apply both background images to the main element and then set the background-blend-mode property.

The background-image property can accept multiple layers, separated by commas. The first image listed is the top-most layer. The background-blend-mode will then define how these layers blend together.

Here's how you can adjust the inline CSS for the main element in your index.html:

// ...existing code...
    <title>TNT | JS Apps | Letter Loom</title>
    <style>
        .teal{
            background-color: #5fa69c;
        }

        .peach{
            background-color: #febb69;
        }

        main {
            /*
                Layering backgrounds:
                1. Top layer: Radial gradient (peach inner, teal outer).
                2. Bottom layer: Pattern image from the 'images' folder.
                These layers are then blended using 'multiply'.
                The background-color from site-styles.css (#fbf9f0 !important) will serve as the base.
            */
            background-image:
                radial-gradient(circle, #febb69, #5fa69c), /* Top layer */
                url("images/moroccan-flower-bg-15pcnt.png");   /* Bottom layer, path relative to index.html */
            background-blend-mode: multiply;
            /* Ensure other background properties like repeat/size are as desired for the pattern.
               By default, the pattern will repeat. The gradient will cover the element. */
        }

    
    </style>
    <script>
// ...existing code...

Explanation of Changes:

1. background-image:
   • It now lists two image sources:
     • radial-gradient(circle, #febb69, #5fa69c): This is your peach-to-teal radial gradient, and it will be the top layer.
     • url("images/moroccan-flower-bg-15pcnt.png"): This is the pattern image. This will be the layer beneath the gradient.
2. background-blend-mode: multiply;:
   • This property defines how the top background image layer (the radial gradient) blends with the layer(s) beneath it (the pattern image). The multiply mode will typically result in darker colors.

Important Considerations:

• Path to Pattern Image: Ensure the path to moroccan-flower-bg-15pcnt.png is correct relative to index.html.
• Base Background Color: The background-color from site-styles.css will be the ultimate base layer.
• Pattern Repetition and Size: The pattern image will repeat by default. You can specify multiple values for background-repeat, background-size, etc., if needed.

GitHub Copilot:

Okay, I'll update the div#introDiv with a short explanation, the image, and the caption, floating the figure to the right.

Here's the suggested change:

// ...existing code...
        <div id="primaryContent" class="container bg-light visually-hidden">
            <div id="introDiv" class="container-fluid text-dark mb-4 py-2 bg-warning-subtle">
                <figure class="float-end ms-3" style="max-width: 200px;">
                    <img src="images/fireflyLetterLoom.jpg" alt="Letter Loom Visual" class="img-fluid rounded">
                    <figcaption class="text-center fst-italic small">Weaving Letters</figcaption>
                </figure>
                <p>Welcome to <strong>Letter Loom</strong>! This fun little app takes any phrase you enter and artfully rearranges the letters in each word using a unique "weaving" algorithm. Type in your favorite quote, a secret message, or just a random jumble of words and see how they get transformed. It's a playful way to explore text manipulation!</p>
                <p>Give it a try below by entering a phrase and clicking "Encrypt".</p>
            </div><!-- end introDiv -->

            <div id="row1ContainerDiv" class="container-fluid bg-success-subtle">
// ...existing code...

Explanation of Additions:

• <figure class="float-end ms-3" style="max-width: 200px;">: Floats right, adds margin, constrains width.
• <img src="images/fireflyLetterLoom.jpg" alt="Letter Loom Visual" class="img-fluid rounded">: Image with alt text, responsive, rounded corners.
• <figcaption class="text-center fst-italic small">Weaving Letters</figcaption>: Centered, italic, small caption.
• Paragraphs: Added explanatory text.

GitHub Copilot:

Okay, I'll add the "Clear" and "Default" buttons next to the "Encrypt" button and implement their functionalities.

Here are the changes:

1. Modify the HTML in div#r1c1Div to add the new buttons:

// ...existing code...
                    <div id="r1c1Div" class="peach col-sm-6">
                        <!-- Input block for encryption -->
                        <label for="phraseInput" class="form-label mt-2">Enter a phrase to encrypt:</label>
                        <input type="text" id="phraseInput" class="form-control mb-2" value="THE WORLD DOESNT ALWAYS MAKE SENSE">
                        <button id="encryptBtn" class="btn btn-primary mb-2">Encrypt</button>
                        <button id="clearBtn" class="btn btn-secondary mb-2 ms-1">Clear</button>
                        <button id="defaultBtn" class="btn btn-info mb-2 ms-1">Default</button>
                        <div id="inputHelp" class="form-text">Try your own phrase!</div>
                    </div><!-- end r1c1Div -->
// ...existing code...

2. Add JavaScript event listeners for the new buttons within the DOMContentLoaded listener:

// ...existing code...
        window.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('phraseInput');
            const btn = document.getElementById('encryptBtn');
            const output = document.getElementById('outputDiv');
            const clearBtn = document.getElementById('clearBtn');
            const defaultBtn = document.getElementById('defaultBtn');
            const defaultPhrase = "THE WORLD DOESNT ALWAYS MAKE SENSE AT FIRST GLANCE";

            // Encrypt the default value on load (or the current input value if modified)
            output.textContent = firstGlance(input.value);

            btn.addEventListener('click', function() {
                const phrase = input.value;
                output.textContent = firstGlance(phrase);
            });

            clearBtn.addEventListener('click', function() {
                input.value = "";
                output.textContent = "";
            });

            defaultBtn.addEventListener('click', function() {
                input.value = defaultPhrase;
                output.textContent = firstGlance(defaultPhrase);
            });
        });

    </script>
// ...existing code...

GitHub Copilot:

Okay, I'll add a Bootstrap modal that appears if the input field is empty when the "Encrypt" button is clicked.

Here are the steps:

1. Add the HTML for the Bootstrap Modal:

// ...existing code...
        </div><!-- end primaryContent -->

        <!-- Modal for Empty Input Warning -->
        <div class="modal fade" id="emptyInputModal" tabindex="-1" aria-labelledby="emptyInputModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="emptyInputModalLabel">Input Required</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Please enter a phrase in the input field before encrypting.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            
        <footer class="my-0 mt-auto bg-light px-4">
// ...existing code...

2. Modify the JavaScript for the "Encrypt" button:

// ...existing code...
        window.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('phraseInput');
            const btn = document.getElementById('encryptBtn');
            const output = document.getElementById('outputDiv');
            const clearBtn = document.getElementById('clearBtn');
            const defaultBtn = document.getElementById('defaultBtn');
            const defaultPhrase = "THE WORLD DOESNT ALWAYS MAKE SENSE AT FIRST GLANCE";
            const emptyInputModal = new bootstrap.Modal(document.getElementById('emptyInputModal')); // Initialize modal

            // Encrypt the default value on load (or the current input value if modified)
            if (input.value.trim() !== "") {
                output.textContent = firstGlance(input.value);
            }

            btn.addEventListener('click', function() {
                const phrase = input.value.trim(); // Trim the input
                if (phrase === "") {
                    // If input is empty, show the modal
                    emptyInputModal.show();
                } else {
                    // Otherwise, proceed with encryption
                    output.textContent = firstGlance(phrase);
                }
            });

            clearBtn.addEventListener('click', function() {
                input.value = "";
                output.textContent = "";
            });

            defaultBtn.addEventListener('click', function() {
                input.value = defaultPhrase;
                output.textContent = firstGlance(defaultPhrase);
            });
        });

    </script>
// ...existing code...

GitHub Copilot:

You're getting the error emptyInputModal.show is not a function because emptyInputModal was likely not initialized as a Bootstrap Modal JavaScript object, or the initialization was not in scope/done correctly. The .show() method belongs to the Bootstrap Modal instance, not directly to the DOM element.

You need to create an instance of the Bootstrap modal using new bootstrap.Modal() and then call .show() on that instance.

Here's the corrected JavaScript within your DOMContentLoaded event listener:

// ...existing code...
        // Wait for the DOM to load before adding event listeners
        window.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('phraseInput');
            const btn = document.getElementById('encryptBtn');
            const output = document.getElementById('outputDiv');
            const clearBtn = document.getElementById('clearBtn');
            const defaultBtn = document.getElementById('defaultBtn');
            const defaultPhrase = "THE WORLD DOESNT ALWAYS MAKE SENSE AT FIRST GLANCE";
            // Correctly initialize the Bootstrap Modal instance
            const emptyInputModalElement = document.getElementById('emptyInputModal');
            const emptyInputModal = new bootstrap.Modal(emptyInputModalElement);

            // Encrypt the default value on load (or the current input value if modified)
            // Ensure input is not empty before calling firstGlance
            if (input.value.trim() !== "") {
                output.textContent = firstGlance(input.value);
            }


            btn.addEventListener('click', function() {
                const phrase = input.value.trim(); // Trim the input
                if (phrase === "") {
                    // If input is empty, show the modal
                    emptyInputModal.show();
                } else {
                    // Otherwise, proceed with encryption
                    output.textContent = firstGlance(phrase);
                }
            });

            clearBtn.addEventListener('click', function() {
                input.value = "";
                output.textContent = "";
            });

            defaultBtn.addEventListener('click', function() {
                input.value = defaultPhrase;
                // Ensure defaultPhrase is not empty (it isn't here, but good practice)
                if (defaultPhrase.trim() !== "") {
                    output.textContent = firstGlance(defaultPhrase);
                } else {
                    output.textContent = "";
                }
            });
        });

    </script>
// ...existing code...

Key changes:

1. Modal Initialization:
   • const emptyInputModalElement = document.getElementById('emptyInputModal'); gets the DOM element.
   • const emptyInputModal = new bootstrap.Modal(emptyInputModalElement); creates the Bootstrap Modal instance.
2. Initial Encryption Check: Added a check before the initial call to firstGlance.
3. Default Button Check: Added a similar check for the default button.

GitHub Copilot:

Okay, this involves several steps: adding a new "Display" button, creating a new modal for the formatted output, and implementing the JavaScript logic for showing/hiding the button, populating the modal, and handling the "Copy" functionality.

Here are the suggested changes:

1. Add HTML for the "Display" button (initially hidden) below outputDiv:

// ...existing code...
                    <div id="r1c2Div" class="teal col-sm-6">
                        <!-- Output block for encrypted phrase -->
                        <label class="form-label mt-2">Encrypted Output:</label>
                        <div id="outputDiv" class="alert alert-secondary" style="min-height:2em;"></div>
                        <button id="displayFormattedBtn" class="btn btn-success mt-2 d-none">Display Formatted</button> <!-- Initially hidden -->
                    </div><!-- end r1c2Div -->
// ...existing code...

2. Add HTML for the new "Display Formatted" Modal:

// ...existing code...
        </div><!-- end primaryContent -->

        <!-- Modal for Empty Input Warning (existing) -->
        <!-- ... (modal HTML as before) ... -->

        <!-- Modal for Displaying Formatted Output -->
        <div class="modal fade" id="displayFormattedModal" tabindex="-1" aria-labelledby="displayFormattedModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="displayFormattedModalLabel">Formatted Output</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="formattedOutputBody" style="text-align: center;">
                        <!-- Formatted words will be injected here by JavaScript -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="copyFormattedBtn">Copy</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            
        <footer class="my-0 mt-auto bg-light px-4">
// ...existing code...

3. Update the JavaScript:

// ...existing code...
        window.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('phraseInput');
            const btn = document.getElementById('encryptBtn');
            const outputDiv = document.getElementById('outputDiv'); // Renamed for clarity
            const clearBtn = document.getElementById('clearBtn');
            const defaultBtn = document.getElementById('defaultBtn');
            const defaultPhrase = "THE WORLD DOESNT ALWAYS MAKE SENSE AT FIRST GLANCE";
            
            const emptyInputModalElement = document.getElementById('emptyInputModal');
            const emptyInputModal = new bootstrap.Modal(emptyInputModalElement);

            const displayFormattedBtn = document.getElementById('displayFormattedBtn');
            const displayFormattedModalElement = document.getElementById('displayFormattedModal');
            const displayFormattedModal = new bootstrap.Modal(displayFormattedModalElement);
            const formattedOutputBody = document.getElementById('formattedOutputBody');
            const copyFormattedBtn = document.getElementById('copyFormattedBtn');

            function updateDisplayButtonVisibility() {
                if (outputDiv.textContent.trim() !== "") {
                    displayFormattedBtn.classList.remove('d-none');
                } else {
                    displayFormattedBtn.classList.add('d-none');
                }
            }

            // Encrypt the default value on load
            if (input.value.trim() !== "") {
                outputDiv.textContent = firstGlance(input.value);
            }
            updateDisplayButtonVisibility();


            btn.addEventListener('click', function() {
                const phrase = input.value.trim();
                if (phrase === "") {
                    emptyInputModal.show();
                } else {
                    outputDiv.textContent = firstGlance(phrase);
                    updateDisplayButtonVisibility();
                }
            });

            clearBtn.addEventListener('click', function() {
                input.value = "";
                outputDiv.textContent = "";
                updateDisplayButtonVisibility();
            });

            defaultBtn.addEventListener('click', function() {
                input.value = defaultPhrase;
                if (defaultPhrase.trim() !== "") {
                    outputDiv.textContent = firstGlance(defaultPhrase);
                } else {
                    outputDiv.textContent = "";
                }
                updateDisplayButtonVisibility();
            });

            displayFormattedBtn.addEventListener('click', function() {
                const textToFormat = outputDiv.textContent;
                if (textToFormat.trim() === "") return;

                const words = textToFormat.split(' ');
                formattedOutputBody.innerHTML = ''; // Clear previous content

                words.forEach(word => {
                    const p = document.createElement('p');
                    p.style.fontWeight = 'bold';
                    p.textContent = word.toUpperCase();
                    formattedOutputBody.appendChild(p);
                });
                displayFormattedModal.show();
            });

            copyFormattedBtn.addEventListener('click', function() {
                const paragraphs = formattedOutputBody.getElementsByTagName('p');
                let textToCopy = "";
                for (let p of paragraphs) {
                    textToCopy += p.textContent + "\n";
                }
                textToCopy = textToCopy.trim(); // Remove trailing newline

                navigator.clipboard.writeText(textToCopy).then(function() {
                    // Optional: Feedback to user
                    const originalText = copyFormattedBtn.textContent;
                    copyFormattedBtn.textContent = 'Copied!';
                    setTimeout(() => {
                        copyFormattedBtn.textContent = originalText;
                    }, 2000);
                }).catch(function(err) {
                    console.error('Failed to copy text: ', err);
                    // Optional: Alert user about failure
                    alert("Failed to copy text. Please try manually.");
                });
            });
        });

    </script>
// ...existing code...

GitHub Copilot:

Okay, I can help you with that. We can add JavaScript to dynamically adjust the font size of the phraseInput field based on its width. This will involve:

1. Creating a function that calculates and applies the new font size.
2. Calling this function initially when the page loads and the input field is visible.
3. Calling this function whenever the window is resized, as this might change the input field's width.

<!-- filepath: c:\Users\kpendleton\OneDrive - trinity christian academy\Subjects\Programming\CopilotCS2025\FirstGlance2025\FirstGlance-CPTNT2025-05-18-Stg2\index.html -->
// ...existing code...
<script>
    var lastUpdate = "05/18/2025";
    var stageNoStr = "2";
    var aDate = new Date();
    var currentYear = aDate.getFullYear();
    let phraseInputElementForSizing; // To store the input element for font sizing

    /**
     * Adjusts the font size of the phraseInput element based on its current width.
     */
    function adjustInputFontSize() {
        if (!phraseInputElementForSizing) {
            // console.warn("phraseInputElementForSizing not initialized for font adjustment.");
            return;
        }

        const inputWidth = phraseInputElementForSizing.clientWidth;

        // Do not adjust if the input is not visible or has no width (e.g., clientWidth is 0 or 1 due to visually-hidden)
        if (inputWidth <= 1) {
            return;
        }

        let newSize = inputWidth / 25; // Factor to determine font size. Adjust this value as needed.
        const minSize = 12; // Minimum font size in pixels
        const maxSize = 18; // Maximum font size in pixels (Bootstrap's default is often 1rem, ~16px)

        newSize = Math.max(minSize, Math.min(newSize, maxSize));
        phraseInputElementForSizing.style.fontSize = newSize + 'px';
        // console.log(`Input width: ${inputWidth}px, New font size: ${newSize}px`); // For debugging
    }

    function init(){
        console.log("...init...");
        var updateSpan = document.getElementById("updateSpan");
        updateSpan.innerHTML = lastUpdate;
        var stageNoSpan = document.getElementById("stageNoSpan");
        stageNoSpan.innerHTML = stageNoStr;
        var loadingPara = document.getElementById("loadingPara");
        loadingPara.classList.add("visually-hidden");
        var primaryContent = document.getElementById("primaryContent");
        primaryContent.classList.remove("visually-hidden");

        var copyrightSpan = document.getElementById("copyrightSpan");
        var copyrightInfo = "&copy; 2015-" + currentYear;
        copyrightInfo += " TechNoviceTools (TNT)";
        copyrightSpan.innerHTML = copyrightInfo;

        //loads the validator button if not on localhost
        pageURL = document.URL;
        validateLi = document.getElementById("validateLi");
        validateLink = document.getElementById("validateLink");
        console.log("pageURL = " + pageURL);
        if(pageURL.includes("localhost")){
            validateLi.classList.add("d-none");
            console.log("validateLi = " + validateLi);
        }else{
            var currentHref = validateLink.href;
            currentHref += "?doc="+pageURL;
            console.log("currentHref = " + currentHref);
            validateLink.href = currentHref;
        }

        // Call adjustInputFontSize after the input element is visible and its dimensions are stable.
        // phraseInputElementForSizing should have been assigned in DOMContentLoaded by this point.
        if (phraseInputElementForSizing) {
            adjustInputFontSize();
        }
        
    }//end init

    /**
     * Encrypts a phrase by applying the mixup function to each word.
// ...existing code...
    // Wait for the DOM to load before adding event listeners
    window.addEventListener('DOMContentLoaded', function() {
        console.log("...DOMContentLoaded...");
        
        // Assign the input element to the global variable for font sizing
        phraseInputElementForSizing = document.getElementById('phraseInput');

        // Get references to the elements
        const input = document.getElementById('phraseInput'); // Can keep using local 'input' for other event handlers
        const btn = document.getElementById('encryptBtn');
        const outputDiv = document.getElementById('outputDiv'); // Renamed for clarity
        const clearBtn = document.getElementById('clearBtn');
        const defaultBtn = document.getElementById('defaultBtn');
        const defaultPhrase = "THE WORLD DOESNT ALWAYS MAKE SENSE AT FIRST GLANCE";
        
        const emptyInputModalElement = document.getElementById('emptyInputModal');
        const emptyInputModal = new bootstrap.Modal(emptyInputModalElement);

        const displayFormattedBtn = document.getElementById('displayFormattedBtn');
        const displayFormattedModalElement = document.getElementById('displayFormattedModal');
        const displayFormattedModal = new bootstrap.Modal(displayFormattedModalElement);
        const formattedOutputBody = document.getElementById('formattedOutputBody');
        const copyFormattedBtn = document.getElementById('copyFormattedBtn');

        // Add resize event listener to adjust font size dynamically
        window.addEventListener('resize', adjustInputFontSize);

        function updateDisplayButtonVisibility() {
// ...existing code...
        // Encrypt the default value on load
        if (input.value.trim() !== "") { // 'input' here refers to the locally scoped const
            outputDiv.textContent = firstGlance(input.value);
        }
        updateDisplayButtonVisibility();


        btn.addEventListener('click', function() {
            const phrase = input.value.trim(); // 'input' here refers to the locally scoped const
// ...existing code...
        clearBtn.addEventListener('click', function() {
            input.value = ""; // 'input' here refers to the locally scoped const
// ...existing code...
        defaultBtn.addEventListener('click', function() {
            input.value = defaultPhrase; // 'input' here refers to the locally scoped const
// ...existing code...
    });

</script>
// ...existing code...

Key changes:

1. A global variable phraseInputElementForSizing is declared to hold a reference to your input field.
2. A new function adjustInputFontSize() is created. This function:
   • Checks if phraseInputElementForSizing is set.
   • Gets the current width (clientWidth) of the input field.
   • Calculates a new font size based on the width (using a division factor of 25, which you can tweak).
   • Clamps the font size between a minimum (12px) and maximum (18px) to keep it reasonable.
   • Applies the new font size to the input field.
3. In the DOMContentLoaded event listener:
   • phraseInputElementForSizing is assigned the phraseInput element.
   • An event listener for the window's resize event is added, which calls adjustInputFontSize() to update the font size when the window (and potentially the input field) changes size.
4. In your init() function (which runs on body.onload):
   • A call to adjustInputFontSize() is added. This ensures that the font size is set correctly once the input field is visible and has its proper dimensions. Since init() runs after DOMContentLoaded, phraseInputElementForSizing will be initialized.

GitHub Copilot:

Sure, here's a proposed directory structure for a Static Web Page project app:

letter-loom-app
└── letter-loom-app
|   ├── styles
|       └── site-styles.css
|   ├── scripts
|       └── app.js
|   ├── index.html
|   ├── dialog_documentation.html
|   └── README.md

GitHub Copilot:

Okay, I will create a new HTML file named dialog_documentation.html in the same directory as index.html. This new file will replicate the general structure and navigation of index.html but will be dedicated to documenting our conversation.

(The content of this dialog_documentation.html file is then generated here.)