Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

JavaScript Challenge Solution

1:45 with Guil Hernandez

This video covers one solution to the JavaScript practice challenge.

Self-destructing Message Solution

// 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..."); 

// 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!");

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Hi how did it go? 0:00
    Hopefully, you were able to complete all or 0:02
    most of this practice challenge successfully. 0:03
    If not, that's okay. 0:06
    Now, I'll show you my solution which you can also copy from the teacher's 0:07
    notes with this video. 0:11
    To create the self-destructing message program, I first use the alert 0:12
    command to pop up an alert dialog that displays the message, Warning! 0:17
    This message will self-destruct in. 0:22
    The alert message, as you've learned, should be between quotation marks. 0:25
    And it doesn't matter for now if they're either single or double quotation marks. 0:29
    I used double-quotes. 0:33
    Next, I displayed the 3, 2, 1 countdown using a series of three alert commands. 0:35
    The first alert displays 3, the second 2 and the third 1. 0:42
    The next part of the program includes a statement that selects the h1 0:47
    element on the page and replaces its text content with Boom! 0:53
    Again, you were not required to change this code or 0:59
    worry about what any of it means. 1:02
    But if you were curious and looked it up to learn more about it, that's great too. 1:04
    Finally to display Message destroyed!, 1:08
    in the console after the message self destructs. 1:11
    I use the console dot log command. 1:14
    And between quotes, I provided it the text Message destroyed! 1:17
    All right. 1:30
    Now that you've got some of the basics down, 1:30
    it's time to jump into a code challenge, then get into more complex programming. 1:33
    In the next stage, you'll learn how to store and 1:37
    keep track of different information in your program using variables. 1:40
    See you soon. 1:43

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up