JavaScript Strings Popcorn Hacks & Homework

Popcorn Hack #1 - Secret Password

Instructions:

  1. Create three string variables named secretBase, codeWord, and symbol. • Each should contain text inside quotes (“ “ or ‘ ‘).
  2. Find the number of characters in the secretBase string. • Use the .length property to count how many characters are in the string. • Store this value in a new variable called baseLength.
  3. Change all the letters in the codeWord string to uppercase. • Use the .toUpperCase() method and store the result in a variable named fullCode.
  4. Combine all the strings together to reveal the full secret message. • Use the + operator to concatenate secretBase, fullCode, and symbol. • Save it to a variable named fullSecret.
  5. Print your results using console.log(). • Display both the string length and the full secret message in the console.
%%html

<div id="outputPH1">Results will appear here:<br></div>

<script>
(() => {
    const output = document.getElementById("outputPH1");

    // Task 1: Create new variables
    let secretBase = "TopSecretBase42 ";
    let codeWord = "eagleEye";
    let symbol = "#";

    // Task 2: Find the number of characters in secretBase
    let baseLength = secretBase.length;

    // Task 3: Change codeWord to uppercase
    let fullCode = codeWord.toUpperCase();

    // Task 4: Combine all strings
    let fullSecret = secretBase + fullCode + symbol;

    // Task 5: Output results using DOM
    output.innerHTML += "Number of characters in secretBase: " + baseLength + "<br>";
    output.innerHTML += "Full secret message: " + fullSecret + "<br>";

    // Also log to console
    console.log("Number of characters in secretBase:", baseLength);
    console.log("Full secret message:", fullSecret);
})();
</script>
Results will appear here:

Popcorn Hack #2 - Grocery Store

Instructions:

  1. Define your variables and string values • Each should contain text inside quotes (“ “ or ‘ ‘). • Your variables should include: ingredient, price, and store.
  2. Write a message using template liberals. • Using mlti-line strings and interpolation, create a complex sentence writing an automated message advertising a discounted item. • Use backticks!!
  3. Use interpolation to check the amount of characters in the lesson! • Use ${} and .length to help.
  4. Print your results using console.log(). • Display both the string length and the full secret message in the console.
%%html

<div id="outputPH2">Results will appear here:<br></div>

<script>
(() => {
    const output = document.getElementById("outputPH2");

    // Task 1: Define your variables and strings
    let ingredient = "Caramel Popcorn";
    let price = "$3.99";
    let store = "Popcorn Palace";

    // Task 2: Write the complex sentence using a template literal (backticks)
    const snackMessage = `
Hey Snack Lovers! 🍿

Get your ${ingredient} now for just ${price} at ${store}!
Hurry, this delicious deal won't last long!
`;

    // Task 3: Check the length of the full message
    const messageLength = snackMessage.length;

    // Task 4: Output results using DOM
    output.innerHTML += "The full message is " + messageLength + " characters long.<br>";
    output.innerHTML += snackMessage + "<br>";

    // Also log to console
    console.log(`The full message is ${messageLength} characters long.`);
    console.log(snackMessage);
})();
</script>
Results will appear here:

Homework

Objective: Apply string concepts (const, quotes, .length, .toUpperCase(), and template literals) to format game data.

🏷️ Part A - String Variables & Quotes

Create a constant variable named UPGRADE_NAME and assign it the string value "Lucky Seven". Print this variable to the console.

Create a variable named cost and assign it the number value 7777. Print this number to the console.

Create a variable named EMOJI and assign it the emoji string value “🍀”.

Create a variable named BUTTON_CLASS and assign it the string value: bg-green-500 hover:bg-green-600 text-white.

📏 Part B – Length and Modification

Using the UPGRADE_NAME variable from above, create a new constant variable named DISPLAY_NAME that converts the name to all uppercase letters. Print DISPLAY_NAME.

Create a constant variable named NAME_LENGTH that stores the total number of characters (including spaces) in the original UPGRADE_NAME. Print the length to the console with a label like: “Name Character Count: [Count]”.

Create a variable named message that stores the exact string below.

“Insufficient Cookies”

✨ Part C – Template Literal Interpolation

Use string concatenation (the + sign) to combine the EMOJI, UPGRADE_NAME, and cost variables into the following exact output. Print the result. Challenge (extra credit): Use String Interpolation

🍀 Lucky Seven (7777 Cookies) Now, rewrite the entire message from problem 8 using a template literal (backticks `) and interpolation (${}). Store the result in a new variable called shopButtonText. Print shopButtonText.

The Final Message: Create a constant variable named errorDisplay that uses a template literal to combine the following three variables into one clean message: EMOJI, UPGRADE_NAME, and message.

Error: 🍀 Lucky Seven purchase failed: “Insufficient Cookies” Hint: The quote marks around Insufficient Cookies must be part of the final output string.

🌟 Extra Credit Challenge (Optional) Create a variable named HINT_TEXT that stores the following exact quote: The “Lucky Seven” upgrade multiplies your clicks by 7.

%%html

<div id="outputHW">Results will appear here:<br></div>

<script>
(() => {
    const output = document.getElementById("outputHW");

    const UPGRADE_NAME = "Lucky Seven";
    output.innerHTML += `UPGRADE_NAME: ${UPGRADE_NAME}<br>`;
    console.log("UPGRADE_NAME:", UPGRADE_NAME);

    let cost = 7777;
    output.innerHTML += `Cost: ${cost}<br>`;
    console.log("Cost:", cost);

    let EMOJI = "🍀";
    output.innerHTML += `EMOJI: ${EMOJI}<br>`;
    console.log("EMOJI:", EMOJI);

    let BUTTON_CLASS = "bg-green-500 hover:bg-green-600 text-white";
    output.innerHTML += `BUTTON_CLASS: ${BUTTON_CLASS}<br><br>`;
    console.log("BUTTON_CLASS:", BUTTON_CLASS);

    const DISPLAY_NAME = UPGRADE_NAME.toUpperCase();
    output.innerHTML += `DISPLAY_NAME: ${DISPLAY_NAME}<br>`;
    console.log("DISPLAY_NAME:", DISPLAY_NAME);

    const NAME_LENGTH = UPGRADE_NAME.length;
    output.innerHTML += `Name Character Count: ${NAME_LENGTH}<br>`;
    console.log("Name Character Count:", NAME_LENGTH);

    let message = "Insufficient Cookies";
    output.innerHTML += `Message: ${message}<br><br>`;
    console.log("Message:", message);

    let concatenatedText = EMOJI + " " + UPGRADE_NAME + " (" + cost + " Cookies)";
    output.innerHTML += `Concatenated Text: ${concatenatedText}<br>`;
    console.log("Concatenated Text:", concatenatedText);

    let shopButtonText = `${EMOJI} ${UPGRADE_NAME} (${cost} Cookies)`;
    output.innerHTML += `shopButtonText: ${shopButtonText}<br>`;
    console.log("shopButtonText:", shopButtonText);

    const errorDisplay = `Error: ${EMOJI} ${UPGRADE_NAME} purchase failed: "${message}"`;
    output.innerHTML += `errorDisplay: ${errorDisplay}<br><br>`;
    console.log("errorDisplay:", errorDisplay);

    let HINT_TEXT = `The "${UPGRADE_NAME}" upgrade multiplies your clicks by 7.`;
    output.innerHTML += `HINT_TEXT: ${HINT_TEXT}<br>`;
    console.log("HINT_TEXT:", HINT_TEXT);

})();
</script>
Results will appear here: