OpenSouce-LNMIIT · viditvarshney · Oct 11, 2018 · Oct 11, 2018 · Oct 11, 2018 · Oct 11, 2018
diff --git a/Reaction-Timer/README.md b/Reaction-Timer/README.md
@@ -0,0 +1,32 @@
+# Reaction-Timer-
+This is the game based on javascript which notes your reaction time , you have to very attentive towards it ......  So  check and play .
+
+
+# 
+***
+# Welcome to the **"Reaction-Timer"**
+***
+
+This is the game which will make you attentive with the game . It is very interesting when you bored ...
+***
+
+
+## You have to click the shapes as fast  as you can , your time of response wil be automatically noted and displayed on the left hand side
+
+***
+> Here are the screenshots of the Game !...
+
+  ![reaction](https://user-images.githubusercontent.com/34159717/43367366-62ade7a8-9369-11e8-9d52-aabe76f742d7.JPG)
+Screenshot 1
+
+![reaction1](https://user-images.githubusercontent.com/34159717/43367367-63108aca-9369-11e8-96a6-ba5fc79201bb.JPG)
+Screenshot 2
+
+## You are most welcome to modify and give the suggestions .. If You find any mistake or error then make a pull request or inform to me ..
+***
+Leave your Error or anything want to know , get connected on gitter Click the Link
+[![Join the chat at https://gitter.im/Reaction-Timer/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Reaction-Timer/Lobby)
+
+# Programming Languages Used Here Are :
+* Javascript
+* HTML & CSS 
diff --git a/Reaction-Timer/cc b/Reaction-Timer/cc
@@ -0,0 +1 @@
+
diff --git a/Reaction-Timer/index.html b/Reaction-Timer/index.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang = "en">
+    <head>
+        <title>Reaction Time Game</title>
+
+        <link rel="stylesheet" type="text/css" href="style.css">
+
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    </head>
+
+
+    <body>
+
+        <div class="container">
+
+            <div class="navbar navbar-expand-lg bg-light">
+
+                <div class="navbar-brand">
+
+                    <div id="mySidenav" class="sidenav">
+                          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+                          <a class="dropdown-btn" href="#">About 
+                            <i class="fa fa-caret-down"></i>
+                          </a>
+
+                          <div class="dropdown-container">
+                                <a href="#">Link 1</a>
+                                <a href="#">Link 2</a>
+                                <a href="#">Link 3</a>
+                          </div>
+                          <a href="#">Services</a>
+                          <a href="#">Clients</a>
+                          <a href="https://gitter.im/Reaction-Timer/Lobby">Contact</a>
+                    </div>
+
+                    <div id="main">
+
+                          <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
+                    </div>
+
+                    <a id="Logo" class="nav-link" href="">Reaction-Timer</a>
+
+                </div>
+
+                <ul class="navbar-nav">
+
+
+                    <li id="contact" class="nav-item">
+                        <a href="https://gitter.im/Reaction-Timer/Lobby"><i class="fa fa-fw fa-envelope"></i><span id="largerText">Contact</span></a>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://github.com/viditvarshney"><img id="github" src="github.JPG"></a>
+                    </li>
+
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://www.facebook.com/vidit.varshney222"><img  src="Capture.JPG"><span id="profile">Profile</span></a>
+                    </li>
+
+                </ul>
+
+            </div>
+
+
+        </div>
+
+
+
+
+
+        <p class="bold">Your Time: <span id="timeTaken"></span></p>
+
+        <p class="bold">Your Best Time: <span id="best"></span></p>
+
+        <div id="shape"></div>
+
+        <canvas id="canvas1" width="500" height="900">
+
+            <script type="text/javascript" src="script.js"></script>
+
+        </canvas>
+
+    </body>
+
+
+</html>
diff --git a/Reaction-Timer/script.js b/Reaction-Timer/script.js
@@ -0,0 +1,72 @@
+            var start = new Date().getTime();
+
+            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 + ")";
+
+                document.getElementById("shape").style.backgroundColor = randomColorMaker;
+            }
+
+            function makeShapeAppear() {
+
+                var top = Math.random()* 400;
+
+                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();
+            }
+
+            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 + " sec";
+
+                document.getElementById("timeTaken").innerHTML = timeTaken;
+
+                    var bestTime = 0; 
+
+                    if (timeTaken < bestTime) {
+
+                        bestTime = timeTaken;
+                        document.getElementById("best").innerHTML = bestTime + " sec";
+                    } else {
+
+                        document.getElementById("best").innerHTML = timeTaken + " sec";
+                    }
+
+
+                Timeout();
+            }
diff --git a/Reaction-Timer/style.css b/Reaction-Timer/style.css
@@ -0,0 +1,13 @@
+            #shape {
+
+                width:200px;
+                height:200px;
+                background-color: green;
+                border: 1px solid blue;
+                display: none;
+                position: relative;
+            }
+            .bold {
+                font-weight: bold;
+                color:red;
+            }