Hulks Super Secret Website

Function

A function is like instructions for a LEGO set. When you run a function, it goes through each of the steps until it reaches the end.

function hint() {
  // Do some things.
}

Alert

On the click of the button, run the hint function.

<html>
  <body>

    <!-- HTML code -->
    <button onclick="hint()">
      Click here
    </button>

    <script>
      // JavaScript code
      function hint() {
        alert("What is green, very very very handsome and is the best Avenger?");
      }
    </script>

  </body>
</html>

Variable (var)

A variable is like a computers memories. It stores information that can be used or changed later on in the code.

In the code below we are asking the browser to get the id of passwordInput from the HTML and store it in a memory called password. By doing this we can now add JavaScript to the input.

<html>
  <body>

    <input id="passwordInput" />

    <script>
      var password = document.getElementById("passwordInput");
    </script>

  </body>
</html>

true/false

In JavaScript we use true and false a lot. We can tell the computer to do different things depending on if the result is true or false.

In the image below, is Hulk green?

Yes Hulk is green so that means it's TRUE.

Is Hulk green and is hulk wearing pants?

Yes Hulk is green and wearing pants, so that means it is also TRUE.

Is Hulk red?

No Hulk is not red so that means it's FALSE.

Is Hulk red and NOT wearing pants?

Hulk is not red and is wearing pants. So that means it is also FALSE.

equals, and, or

If Hulk is equal to (==) green then it's TRUE! So run the code that is inside the curly braces { }

if (Hulk == Green) { /* Do something. */ }

If Hulk is green and (&&) wearing pants then it's TRUE! So run the code that is inside the curly braces { }

if (isHulkGreen && isHulkWearingPants) { /* Do something. */ }

If Hulk is green or (||) wearing pants then it's TRUE! So run the code that is inside the curly braces { }

if (isHulkGreen || isHulkWearingPants) { /* Do something. */ }

if, else if, else

If something is true then do this. If something is false then do something else.

if (isHulkGreen) {
  alert('Hulk is green!');
  return true;
}

else if (isHulkRed) {
  alert('Hulk is red!');
  return true;
}

// If Hulk is any other colour such as blue, then return false.
else {
  return false;
}

Let's write some code!

Now that you know some of the basics of JavaScript, it's time to write your own code.

Click on the Remix button below to get started.

remix button

Now write some code! Write whatever you like. Instead of Hulk maybe write some code for one of your favourite Superheroes or cartoon characters?

Below is what your code should look like. Use the below code as a guide to help you.

<html>
  <body>

    <!-- This is the password input. -->
    <input id="passwordInput" type="text" placeholder="Enter password here" />

    <!-- On click of the button run the checkPassword function. If the function returns true then redirect to the secret-page. -->
    <a href="/secret-page.html" onclick="return checkPassword();">
      Click here to submit password
    </a>

    <script>
      function checkPassword() {

        // Get passwordInput from the HTML and store it in a variable called password.
        var password = document.getElementById("passwordInput");

        // Set the name variable to be the value of the passwordInput text. 
        // If you entered "Hulk" into the input, then "Hulk" is the password.value
        var name = password.value;

        // If the name variable is equal to "Hulk" or equal to "hulk" then the password is true.
        if (name == "Hulk" || name == "hulk") {
          return true;
        }

        // If the name variable is equal to "Thor"
        else if (name == "Thor") {
          alert("Access denied! Go away Thor!");
          return false;
        }

        // If name is equal to "Ernest"
        else if (name == "Ernest") {
          alert("Access denied! Nice try Ernest!");
          return false;
        }

        // If no matches above then it's false.
        else {
          alert("Access denied! HULK SMASH! 👊");
          return false;
        }

      }
    </script>

  </body>
</html>