The only thing running for me was "Boom!". Where were we supposed to insert the alerts? I inserted inside body brackets

Insert alerts in parentheses, not brackets. Like this: alert("3...")

Hi Angelica!

This an issue I have encountered before and there is an obvious flaw in the video.

As depicted in the video, the code will not work as written.

It's a timing issue.

There are (at least) two ways to solve it.

Notice that step 3 targets a DOM element.

If all four steps are in the script.js file (which is in the head of the file), step three will try to target an element that does not yet exist (it'll execute BEFORE the DOM is fully loaded) and will cause an error (in the console).

The first and simplest way to fix it is just to move steps 3 and 4 to the app.js file (which executes AFTER the DOM is fully loaded.

I commented this out in app.js, too:

//alert("Another message from inside index.html"); // It's not really needed!?!

Another way to do it would be to leave all four steps in the script.js but then you'll have to wrap steps 3 and four in code that will delay the execution until the DOM is fully finished loading, like this:

// 1. Display an alert dialog with the content: "Warning! This message will self-destruct in"
alert("Warning! This message will self-destruct in");

// 2. Display a "3... 2... 1..." countdown using 3 alert dialog boxes
alert("3..."); 
alert("2..."); 
alert("1..."); 

// embed code in a function
const ready = function() {
  // 3. This statement selects the <h1> element and replaces its text with "BOOM!".
  document.querySelector("h1").textContent = "🔥BOOM!🔥";

  // 4. Log "Message destroyed!" to the console
  console.log("Message destroyed!");
}

// ready is now a callback function that will execute AFTER the DOM is loaded
document.addEventListener("DOMContentLoaded", ready);

// And just for clarification (you can comment this out, too, if you want smoother execution)
alert('"Message destroyed!" will be logged to the console.\n\nRight click, inspect, and click the console tab in the browser devtools to see it.\n\nIt and 🔥BOOM!🔥 will appear after this alert box is closed...')

(Copy and paste that code into the script.js file and run it.)

It's actually an issue that can happen often in the real world and is often not easy to spot right off the bat. But pretty much any time DOM manipulation does not execute as intended similar timing issues may be the problem, especially if your JS is adding and/or modifying DOM nodes. Part of your JS code might be trying to manipulates nodes that don't exist yet, such as with certain asynchronous operations (Keeping a tight watch on the console can help - for error catching.)

I hope that helps.

Stay safe and happy coding!