Digital Solutions

Coin Flip

coinflip.html

<!DOCTYPE html>
<html>
<head>
    <title>Coin Flip</title>
    <link rel="stylesheet" type="text/css" href="coinflip.css">
</head>
<body>
    Keep clicking the image:<br>
    <img src="https://digisoln.com/resources/atari.gif"
            id="coin" onclick="flip()">
    <script src="coinflip.js"></script>
</body>
</html>

coinflip.css

body{
    background-color: snow;
}

coinflip.js

function newRandom(maxValue){
    return Math.floor(Math.random()*maxValue)+1;
}

function flip(){
    side = newRandom(2);
    imageString = "";
    switch(side){
        case 1:
            imageString = "https://digisoln.com/resources/coins/heads.png";
            break;
        case 2:
            imageString = "https://digisoln.com/resources/coins/tails.png";
            break;
        default:
            //This should never happen:
            imageString = "https://digisoln.com/resources/atari.gif";
            break;
    }
    document.getElementById("coin").src = imageString;
}

Turn into a dice roll (with images)
Can you add a second coin (or dice)?
Can you add a "result" span below the images, that adds up and displays the total of the two dice?
If the two dice or coins are matching, can you use this line of JavaScript to alert the user? the line is: alert("pair found!");.
Can the user guess the total value of the dice or value of the coin being chanced? You can get input via var guess = prompt("What do you think will be the total or outcome?");, and then compare that guess to the total amount..