add exit button, redirections

Author: viditvarshney

index.html

@@ -20,7 +20,10 @@
             Your Best Time: <span id="best" style="color: blue;"></span>
 
         </p>
-        <div><button id="rules" style="text-align: center; width: 150px; margin-left: 800px; border-radius: 10px;">Tip</button></div>
+        <div>
+            <button id="rules">Tip</button>
+            <a href="/intro.html"><button id="exit">Exit</button></a>
+        </div>
 
         <div id="shape"></div>
         <canvas id="myCanvas" width="1500" height="300">

script.js

@@ -1,75 +1,83 @@
-var bestTime = 10; 
-var start = new Date().getTime();
-document.getElementById("rules").onclick = function () {
-    alert("Try to click the shapes as soon as possible to increase your score");
-}
-
-function getRandomColor() {
+window.onload = function () {
 
-    var x = Math.floor(Math.random()* 256);
-    var y = Math.floor(Math.random()* 256);
-    var z = Math.floor(Math.random()* 256);
-    
-    var randomColorMaker = "rgb(" + x + "," + y + "," + z + ")";
+    var bestTime = 10; 
+    var start = new Date().getTime();
+    document.getElementById("rules").onclick = function () {
+        alert("Try to click the shapes as soon as possible to increase your score");
+    }
 
-    document.getElementById("shape").style.backgroundColor = randomColorMaker;
-}
+    function getRandomColor() {
+        
+        var x = Math.floor(Math.random()* 256);
+        var y = Math.floor(Math.random()* 256);
+        var z = Math.floor(Math.random()* 256);
+        
+        var randomColorMaker = "rgb(" + x + "," + y + "," + z + ")";
 
-function makeShapeAppear() {
-    
-    var top = Math.random()* 200;
-    
-    var left =Math.random()* 1150;
-    
-    var width = (Math.random()* 400) + 100;
-    
-    if(Math.random() > 0.5) {
+        document.getElementById("shape").style.backgroundColor = randomColorMaker;
+    }
+
+    function makeShapeAppear() {
 
-        document.getElementById("shape").style.borderRadius = "50%";
-    } else {
+        var top = Math.random()* 200;
 
-        document.getElementById("shape").style.borderRadius = "0";
+        var left =Math.random()* 1150;
+        
+        var width = (Math.random()* 400) + 100;
+        
+        if(Math.random() > 0.5) {
+            
+            document.getElementById("shape").style.borderRadius = "50%";
+        } else {
+            
+            document.getElementById("shape").style.borderRadius = "0";
+        }
+        
+        document.getElementById("shape").style.top = top + "px";
+        document.getElementById("shape").style.left = left + "px";
+        document.getElementById("shape").style.width = width + "px";
+        document.getElementById("shape").style.height = width + "px";
+        
+        document.getElementById("shape").style.backgroundColor = getRandomColor();
+        
+        document.getElementById("shape").style.display ="block";
+        start = new Date().getTime();
     }
-    
-    document.getElementById("shape").style.top = top + "px";
-    document.getElementById("shape").style.left = left + "px";
-    document.getElementById("shape").style.width = width + "px";
-    document.getElementById("shape").style.height = width + "px";
-    
-    document.getElementById("shape").style.backgroundColor = getRandomColor();
-    
-    document.getElementById("shape").style.display ="block";
-    start = new Date().getTime();
-}
 
-function Timeout() {
-    
-    setTimeout(makeShapeAppear, Math.random()* 2000);
-    
-}
-Timeout();
+    function Timeout() {
+        
+        setTimeout(makeShapeAppear, Math.random()* 2000);
+        
+    }
+    Timeout();
 
 
-document.getElementById("shape").onclick = function() {
-    
-    
-    document.getElementById("shape").style.display = "none";
-    
-    var end = new Date().getTime();
-    
-    var timeTaken = (end - start) / 1000;
-    
-    document.getElementById("timeTaken").innerHTML = timeTaken + " sec";
-    
-    if(timeTaken < bestTime) {
-        bestTime = timeTaken;
-        document.getElementById("best").innerHTML = bestTime + " sec";
+    document.getElementById("shape").onclick = function() {
 
 
-    }    
-    
-    
-    
-    
-    Timeout();
+        document.getElementById("shape").style.display = "none";
+        
+        var end = new Date().getTime();
+        
+        var timeTaken = (end - start) / 1000;
+        
+        document.getElementById("timeTaken").innerHTML = timeTaken + " sec";
+        
+        if(timeTaken < bestTime) {
+            bestTime = timeTaken;
+            document.getElementById("best").innerHTML = bestTime + " sec";
+            
+            
+        }    
+        
+        
+        
+        
+        Timeout();
+    }
+    // exit function
+    exit.onclick = function(e) {
+        score = bestTime*1000;
+		alert("Great, You Best Score till now is: " + score);
+	}
 }

style.css

@@ -11,3 +11,9 @@ position: relative;
 font-weight: bold;
 color:red;
 }
+button {
+    text-align: center; 
+    width: 150px; 
+    margin-left: 800px; 
+    border-radius: 10px;
+}