I tried the Challenge in my workspce but nothing happened. Isn't the messages suppose to show up in my console?

Hi Alana!

I hope I am understanding your question

I can't see exactly what you are seeing, but the console Guil is talking about is the one you'd get by previewing the code in the browser (with the little eye in the upper right corner of the workspace and then right-clicking on the page and clicking Inspect in the menu). The workspace console is not what is used here.

I hope that helps.

Stay safe and happy coding!

Sorry, Alana!?!

I had to take a closer look at the video - it was 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.

Then 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!

Thank you Peter. :)

After writing code in a workspace:

1. Save changes (ctrl+s) / if the file isn't saved then in the tab is displayed red dot;
2. Click preview workspace (eye in the top-right corner)
3. console.log will be displayed in console in the preview-> to see it you have to inspect the page in Chrome (ctrl+shift+i) and change tab from "elements" to "console"