9/2/2017 - 2:08 PM

Crystal Collector Game: Setting variables as dom elements / .addClass / .attr / .text / .append / parseInt /

Crystal Collector Game: Setting variables as dom elements / .addClass / .attr / .text / .append / parseInt /

<!DOCTYPE html>
  <title>simple crystal game</title>
  <style type="text/css">

    .crystal-image {
      width: 300px;
      height: 300px;


  <h1>Number to Guess: <span id="number-to-guess"></span></h1>

  <!-- Note that this div is now empty. We will fill it dynamically -->
  <div id="crystals">

  <!-- JAVASCRIPT  -->
  <!-- ========================================= -->
  <script type="text/javascript" src=""></script>

  <script type="text/javascript">

  var targetNumber = 53;


  var counter = 0;

  // Now for the hard part. Creating multiple crystals each with their own unique number value.

  // We begin by expanding our array to include four options.
  var numberOptions = [10, 5, 3, 7];

  // Next we create a for loop to create crystals for every numberOption.
  for (var i = 0; i < numberOptions.length; i++) {

    // For each iteration, we will create an imageCrystal
    var imageCrystal = $("<img>");

    // First each crystal will be given the class ".crystal-image".
    // This will allow the CSS to take effect.

    // Each imageCrystal will be given a src link to the crystal image
    imageCrystal.attr("src", "");

    // Each imageCrystal will be given a data attribute called data-crystalValue.
    // This data attribute will be set equal to the array value.
    imageCrystal.attr("data-crystalvalue", numberOptions[i]);

    // Lastly, each crystal image (with all it classes and attributes) will get added to the page.

  // This time, our click event applies to every single crystal on the page. Not just one.
  $(".crystal-image").on("click", function() {

    // Determining the crystal's value requires us to extract the value from the data attribute.
    // Using the $(this) keyword specifies that we should be extracting the crystal value of the clicked crystal.
    // Using the .attr("data-crystalvalue") allows us to grab the value out of the "data-crystalvalue" attribute.
    // Since attributes on HTML elements are strings, we must convert it to an integer before adding to the counter
    var crystalValue = ($(this).attr("data-crystalvalue"));
    crystalValue = parseInt(crystalValue);
    // We then add the crystalValue to the user's "counter" which is a global variable.
    // Every click, from every crystal adds to the global counter.
    counter += crystalValue;

    // All of the same game win-lose logic applies. So the rest remains unchanged.
    alert("New score: " + counter);

    if (counter === targetNumber) {
      alert("You win!");

    else if (counter >= targetNumber) {
      alert("You lose!!");