Javascript reaction tester project

<!--    code for the Javascript reaction tester project
     written according to The Complete Web Developer course of Udemy.com
-->

<!doctype html>

<html>

<head>

    <title>JavaScript Reaction Test</title>

    <meta charset    = "utf-8" />
    <meta http-equiv = "content-type" content="text/html; charset=utf-8" />
    <meta name       = "viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">

        .redBox{

            width:200px;
            height:200px;
            background-color:red;
            color:white;
            text-align: center;
            padding: 20px;
            display:none;

        }

    </style>


</head>

<body dir         = "auto" >

        <p>Your Time: <span id="time">0.0 </span> seconds!</p>

        <div class="redBox" id="magicBox">

            <h1>Click me </h1>

            <p>Your Time: <span id="showTime">0.0 </span> seconds!</p>

        </div>

    <script type="text/javascript">


        var clickedTime;
        var createdTime;
        var reactionTime;

        function getRandomColor(){

            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i=0; i<6; i++){

                color+= letters[Math.round(Math.random() * 15)];
            }

            return color;
        }

        function makeBox(){

            var time=Math.random(); // a random number between 0 and 1

            time=time*3000;

            setTimeout(function(){

                if (Math.random()>0.5){

                document.getElementById("magicBox").style.borderRadius= "50%"
                }   else{

                document.getElementById("magicBox").style.borderRadius= "initial";

                }

            document.getElementById("magicBox").style.backgroundColor=getRandomColor();

            document.getElementById("magicBox").style.display="block";

            createdTime=Date.now();

            }, time);   // 3,000 milliseconds = 3 seconds

        }

        document.getElementById("magicBox").onclick=function(){

            clickedTime=Date.now();

            reactionTime=(clickedTime-createdTime)/1000;

            document.getElementById("time").innerHTML=reactionTime;

            document.getElementById("showTime").innerHTML=reactionTime;

            this.style.display="none";

            makeBox();

        }

        makeBox();

    </script>

</body>

</html>