Crystal Game Feedback

game.js

// ADINA: 
// First, a couple notes on your index.html:
// The layout looks good but it might be nice to see everything on one screen (now I have to scroll down to see the crystals).
// The problem with linking to your js script file was that this linke:  
  // <script type="text/javascript" src="assets/javascript/game.js"></script>

// should always be placed directly before your closing </body> tag. This is because of the order in which the page loads.

  $("#startButton").on("click", function() {
  

                                                                 
    // ADINA: You can use your randomNumber function here like this:
    //     targetNumber = randomNumber(61,28);
    var targetNumber = Math.floor(Math.random()*61) + 28;      //generates random number between 28 -89                                         
 
    var counter = 0;  

    var win = 0;

    var loss = 0;  
    

    function randomNumber(seed, selectNumber) {
            return Math.floor(Math.random()*seed) + selectNumber; 
    }

      var numberOne = randomNumber(3,1);             

      var numberTwo = randomNumber(7,4);         

      var numberThree = randomNumber(10,2);

      var numberFour = randomNumber(12,3);        

      var numberOptions = [numberOne,numberTwo,numberThree,numberFour];

      $("#number-to-guess").text(targetNumber);  //two values, writes to the id number to guess at the top an uses the same number to calculate
        
        $("#crystals").empty();  // dumps images to start over

        for (var i = 0; i < numberOptions.length; i++) 
            {

          var imageCrystal = $("<img>");                //create an image var
 
              imageCrystal.addClass("crystal-image");   //CSS the image
              
              if (i === 0) {                            //pulls different images
                imageCrystal.attr("src", "assets/images/crystalblue.jpg");
              } else if (i === 1) {
                imageCrystal.attr("src", "assets/images/redcrystal.jpg");
              } else if (i === 2) {
                imageCrystal.attr("src", "assets/images/whitecrystal.jpg");
              } else if (i === 3) {
                imageCrystal.attr("src", "assets/images/greencrystal.jpg");
              }
    
              imageCrystal.attr("data-crystalvalue", numberOptions[i]);  // gives each image a value from the 

              $("#crystals").append(imageCrystal);                      // each crystal image gets added to the view
    
            }  // closes the for loop for crystal image placement click

         
          $(".crystal-image").on("click", function()            // onclick function for each crystal
          
          {

              var crystalValue = ($(this).attr("data-crystalvalue"));  // new varable of crystal value

                crystalValue = parseInt(crystalValue);       // changes the crystalValue to an numeric value if it is in a string
                counter += crystalValue;
                $("#counter").html(counter);  // displays the total amount adding up to the magic number


                if (counter <= targetNumber)  // if the counter is less than the magic number, start the loop of display
                    {
                      var amountLeft = (targetNumber - counter); 

                          if(amountLeft >= 0); {
                                  
                          $("#amountLeft").html(amountLeft);}
                    }  // closes the display showing the amount left or countdown

                if (counter === targetNumber) // once the counter is the same as the magic number, the user wins
                  {
                    win++;
                    $("#win").html(win);
                    counter = 0;
              // ADINA: I would add text to thse alerts to inform the user of what's going on.
                    alert(counter);
                    amountLeft = 0;
                    alert(amountLeft);
                    $("#amountLeft").html(amountLeft);
                  }  // closes the if statment for win

              // ADINA: I think you just want > here, since = would be a win.
                else if (counter >= targetNumber) 
                  {
                    loss++;
                    $("#loss").html(loss);
              // ADINA: I see these lines repeated above, meaning they could be extracted in to a function.
                    counter = 0;
                    alert(counter);
                    amountLeft = 0;
                    alert(amountLeft);
                    $("#amountLeft").html(amountLeft);
                  }  // closes the loss loop

  });
});