modifications

viditvarshney · viditvarshney · commit 93bfad5e2089 · 2020-04-03T14:53:08.000+05:30
diff --git a/index.html b/index.html
@@ -1,23 +1,32 @@
 <html>
     <head>
         <title>Reaction Time Game</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1"> 
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
         
         <link rel="stylesheet" type="text/css" href="style.css">
     </head>
     
     <body>
         
-        <h1>Test Your Reactions!</h1>
-        <h2>Click On The Boxes And Circles As Quickly As You Can! </h2>
-        <h3>Your best time and the current time is displayed before</h3>
         
-        <p class="bold">Your Time: <span id="timeTaken"></span></p>
         
-        <p class="bold">Your Best Time: <span id="best"></span></p>
+        <p class="bold">
+            Your Time: <span id="timeTaken" style="color: green;"></span>
+            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 id="shape"></div>
-        
-        <script type="text/javascript" src="script.js"></script>
+        <canvas id="myCanvas" width="1500" height="300">
+
+            <script type="text/javascript" src="script.js"></script>
+        </canvas>
         
     </body>
 
diff --git a/intro.html b/intro.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reaction-timer Intro</title>
+    <style>
+        body {
+            text-align: center;
+            background-color: lightgray;
+            font-size: 25px;
+        }
+        a {
+            text-decoration: none;
+            border: 2px solid darkgray;
+            padding: 20px;
+            font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            border-radius: 10px;
+        }
+        a:hover {
+            background-color: blue;
+            color: white;
+            
+        }
+        div {
+            margin-top: 300px;
+            min-height: 791px;
+            min-width: 691px;
+        }
+
+    </style>
+</head>
+<body>
+    <div>
+        <h1>Test Your Reactions!</h1>
+        <h2>Click On The Boxes And Circles As Quickly As You Can! </h2>
+        <h3>Your best time and the current time is displayed before</h3>
+        <a href="/index.html">Play Game!</a>
+    </div>
+    
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -1,5 +1,8 @@
 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() {
     
