Gerst20051/CrystalCollectors.js

## CrystalCollectors.js
<!DOCTYPE html>
<html>
<head>
    <title>CrystalCollectors</title>
    <style>
        .crystal-image {
            cursor: pointer;
            height: 100px;
            margin: 10px;
            width: 100px;
        }
    </style>
</head>
<body>
    <h1>CrystalCollectors!</h1>
    <div>
        <p>You will be given a random number at the start of the game.</p>
        <p>There are four crystals below. By clicking on a crystal you will add a specific amount of points to your total score.</p>
        <p>You will win the game by matching your total score to random number, you lose the game if our total score goes above the random number.</p>
        <p>The value of each crystal is hidden from you, click on it.</p>
        <p>Each time when the game starts the game will change the value of each crystal.</p>
    </div>
    <div id="randomNumber"></div>
    <div>wins:</div>
    <div>losses:</div>
    <div id="crystals"></div>
    <div>Your total score is:</div>
    <div id="yourScore"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function getRandomInt(min, max) {
          // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        var targetNumber = getRandomInt(19, 120);
        $("#number-to-guess").text(targetNumber);
        var counter = 0;

        for (var i = 0; i < 4; i++) {
            var imageCrystal = $("<img>");
            imageCrystal.addClass("crystal-image");
            imageCrystal.attr("src", "http://cdn.playbuzz.com/cdn/35910209-2844-45c0-b099-f4d82878d54f/00261fda-4062-4096-81fd-8cf96b9034e8.jpg");
            imageCrystal.attr("data-crystalvalue", getRandomInt(1, 12));
            $("#crystals").append(imageCrystal);
        }

        $(".crystal-image").on("click", function () {
            var crystalValue = parseInt($(this).attr("data-crystalvalue"));
            counter += crystalValue;
            alert("New score: " + counter);
            if (counter === targetNumber) {
                alert("You win!");
            } else if (counter >= targetNumber) {
                alert("You lose!!");
            }
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CrystalCollectors</title>
	<style>
	.crystal-image {
	cursor: pointer;
	height: 100px;
	margin: 10px;
	width: 100px;
	}
	</style>
	</head>
	<body>
	<h1>CrystalCollectors!</h1>
	<div>
	<p>You will be given a random number at the start of the game.</p>
	<p>There are four crystals below. By clicking on a crystal you will add a specific amount of points to your total score.</p>
	<p>You will win the game by matching your total score to random number, you lose the game if our total score goes above the random number.</p>
	<p>The value of each crystal is hidden from you, click on it.</p>
	<p>Each time when the game starts the game will change the value of each crystal.</p>
	</div>
	<div id="randomNumber"></div>
	<div>wins:</div>
	<div>losses:</div>
	<div id="crystals"></div>
	<div>Your total score is:</div>
	<div id="yourScore"></div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	function getRandomInt(min, max) {
	// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	var targetNumber = getRandomInt(19, 120);
	$("#number-to-guess").text(targetNumber);
	var counter = 0;

	for (var i = 0; i < 4; i++) {
	var imageCrystal = $("<img>");
	imageCrystal.addClass("crystal-image");
	imageCrystal.attr("src", "http://cdn.playbuzz.com/cdn/35910209-2844-45c0-b099-f4d82878d54f/00261fda-4062-4096-81fd-8cf96b9034e8.jpg");
	imageCrystal.attr("data-crystalvalue", getRandomInt(1, 12));
	$("#crystals").append(imageCrystal);
	}

	$(".crystal-image").on("click", function () {
	var crystalValue = parseInt($(this).attr("data-crystalvalue"));
	counter += crystalValue;
	alert("New score: " + counter);
	if (counter === targetNumber) {
	alert("You win!");
	} else if (counter >= targetNumber) {
	alert("You lose!!");
	}
	});
	</script>
	</body>
	</html>