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="results1"></div>

<script>
(() => { 
	// Task 1
	let secretBase = "Samarth's top secret base ";
	let codeWord = "samarth";
	let symbol = "?";

	// Task 2
	let baseLength = secretBase.length;

	// Task 3
	let fullCode = codeWord.toUpperCase();

	// Task 4
	let fullSecret = secretBase + fullCode + symbol;

	// Task 5
	console.log("Base Length: " + baseLength);

	console.log("Full Secret: " + fullSecret);

	document.getElementById("results1").innerText = 
	"Base Length: " + baseLength + "\n" + "Full Secret: " + fullSecret;
})();
</script>

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="output2"></div>

<script>
(()=>{
	// Task 1
	let ingredient = "High-performence gaming laptop"; 
	let price = "$2324.99";
	let store = "Amazon";

	// Task 2
	const snackMessage = `
	Want to buy a ${ingredient}?

	Get it today at ${store} for only ${price}!!!
	Discounted price is only available for a limited time.
	`;

	// Task 3
	function writeOutput(msg) {
		console.log(msg);
		document.getElementById("output2").innerText += msg + "\n";
	}

	// Usage
	writeOutput(snackMessage);
	writeOutput(`The full message is of ${snackMessage.length} length (in characters).`);
})();
</script>

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"></div>

<script>
// --- Start Your Code Here ---

// Part A
const UPGRADE_NAME = "Random Upgrade";
console.log(UPGRADE_NAME);

let cost = 7777;
console.log(cost);

let EMOJI = "🍀";
let BUTTON_CLASS = "bg-green-500 hover:bg-green-600 text-white";

// Part B
const DISPLAY_NAME = UPGRADE_NAME.toUpperCase();
console.log(DISPLAY_NAME);

const NAME_LENGTH = UPGRADE_NAME.length;
console.log(`Name Character Count: ${NAME_LENGTH}`);

let message = "Insufficient... You need more cookies!";

// Part C
let combinedMessage = EMOJI + " " + UPGRADE_NAME + " (" + cost + " Cookies)";
console.log(combinedMessage);

let shopButtonText = `${EMOJI} ${UPGRADE_NAME} (${cost} Cookies)`;
console.log(shopButtonText);

const errorDisplay = `Error: ${EMOJI} ${UPGRADE_NAME} purchase failed: "${message}"`;
console.log(errorDisplay);

// Extra Credit!
let HINT_TEXT = `The "Random Upgrade" upgrade does something random.`;
</script>