Exercise: Fortune Teller – Advanced Web Development

Once you get the hang of basic Javascript and arrays, this knowledge can be put to use in many, and sometimes strange, ways. In this lesson, you are going to learn how to create a basic fortune telling application with just a few lines of code.

Create a basic HTML document and name it fortune.html or something else appropriate. Copy and paste this starter code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fortune Teller</title>
</head>
<body>

  <h1>Fortune Teller</h1>

  <input type="text" id="namehere" placeholder="Enter your name">
  <button onclick="fortune()">Reveal My Fortune</button>

  <div id="result">Your fortune will appear here...</div>

  <script>
    // Your JavaScript will go here
  </script>

</body>
</html>

Between the <script> tags create a string array with at least five outcomes named outcomes. Here is an example:

let outcomes = [
  "You will have an amazing day.",
  "Something surprising is coming your way.",
  "A new opportunity is just around the corner.",
  "Good news is on the horizon.",
  "Be open to unexpected advice today."
];

On the next line create a new function named fortune like this:
```
function fortune() { }
```
Add a few lines between the brackets of your function.
On the first line of your function, create a variable named ‘name’ and tie it to the value of the #namehere textfield as shown below. This variable grabs user input to use in the rest of the function.
```
  // Step 1: Get the name from the input field
  let name = document.querySelector('#namehere').value;
```
Our next task is to create a random number generator that we can use to pick one of those fortunes, well, randomly. Javascript has a random number feature (Math.random) that generates a value between 0 and 1. In this lesson, we multiply that value times the length (number of values in) the outcomes array. Then we use math.floor to round that value down to the nearest integer (whew). In any event, we end up with a random integer that ranges from 0 to the number of items in the array minus 1, which is exactly what we need!
```
// Step 2: Pick a random index number
  let randomIndex = Math.floor(Math.random() * outcomes.length);
```
On the next line we create a variable named selectedFortune that uses the random index number generator to call a random fortune.
```
// Step 2: Pick a random index number
  let randomIndex = Math.floor(Math.random() * outcomes.length);
```

The last line of our function displays the random fortune in our #result div.

// Step 4: Display the result in the #result div
  let result = document.querySelector('#result');
  result.innerHTML = name + ", your fortune is: " + selectedFortune;
}

Now we put the power of that full function in one button in the html.

  <button onclick="fortune()">Reveal My Fortune</button>

Once you get it to work, your job is to make it look magical. Fonts, colors, crystal balls, etc!