Reponse handled and multiple size icons added

susw12 · Oct 3, 2017 · fd69c7a · fd69c7a
1 parent 2245c12
commit fd69c7a
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 33 deletions.
diff --git a/icon128.png b/icon128.png
diff --git a/icon16.png b/icon16.png
diff --git a/icon48.png b/icon48.png
diff --git a/icon.png → logo.png b/icon.png → logo.png
diff --git a/manifest.json b/manifest.json
@@ -3,11 +3,15 @@
   "version" : "1.1",
   "description" : "Check your Hacktoberfest 2017 progress here. It is a fan made chrome extension and is not affiliated to hacktoberfest officially.",
   "permissions": [
-    "storage"
   ],
   "browser_action": {
-     "default_icon": "icon.png",
+     "default_icon": "icon48.png",
      "default_popup": "popup.html"
   },
-  "manifest_version": 2
+  "manifest_version": 2,
+  "icons": {
+          "16": "icon16.png",
+          "48": "icon48.png",
+          "128": "icon128.png"
+        }
 }
diff --git a/popup.css b/popup.css
@@ -1,6 +1,8 @@
 body{
   min-width: 300px;
   min-height: 400px;
+  background-color: #29328f;
+  color: white;
 }
 
 #header{
@@ -9,13 +11,12 @@ body{
   text-align: center;
   height: 20%;
 }
-
-#main{
-  margin-top: 50px;
+#header > a >img{
+  width: 300px;
 }
 
-#savedAccounts{
-
+#main{
+  margin-top: 10px;
 }
 
 .eachSavedAccount{
@@ -29,20 +30,40 @@ body{
 }
 
 #newAccount{
-  margin-top: 50px;
-  height: 100px;
+  min-height: 100px;
 }
 
 #githubHandle{
-  height: 40px;
-  width: 170px;
+  height: 30px;
+  width: 160px;
+  padding: 5px;
 }
 
 #check{
   height: 40px;
   width: 170px;
+  background-color: #fe615f;
+  border: 0px;
+  color: white;
+  font-size: 16px;
 }
 
 #result{
   margin-top: 20px;
+}
+
+#resultHandle{
+  text-decoration: underline;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+#prCompleteCount{
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+#message{
+  font-size: 18px;
 }
diff --git a/popup.html b/popup.html
@@ -4,34 +4,19 @@
     <title>Hacktoberfest</title>
     <link href="popup.css" rel="stylesheet">
     <link href="flex.css" rel="stylesheet">
-    <script src="popup.js"></script>
     <meta http-equiv="Cache-control" content="no-cache">
   </head>
   <body>
     <div id="header">
-      Hacktoberfest 2017
+      <a href="https://hacktoberfest.digitalocean.com" target="blank"><img src="logo.png"></a>
     </div>
     <div id="main" class="flex-column align-center justify-center">
-      <div id="savedAccounts" class="flex-row align-start justify-start">
-        <div class="eachSavedAccount">
-          adeora7
-        </div>
-        <div class="eachSavedAccount">
-          Aditya19956
-        </div>
-        <div class="eachSavedAccount">
-          Cryzek
-        </div>
-      </div>
       <div id="newAccount" class="flex-column align-center justify-space-around">
         <input type="text" placeholder="Github Username" id="githubHandle">
         <button id="check">Check Progress</button>
       </div>
       <div id="result" class="flex-column justify-start align-center">
-        <div>Display pic</div>
-        <div id="prCompleteCount">1/4</div>
-        <div id="message">Still long way to go</div>
-        <div id="prDetails" class="flex-column justify-start align-start">
+        <!-- <div id="prDetails" class="flex-column justify-start align-start" style="display: none">
           <div class="eachPr">
             CSS for subscribe button changed, description, Open
           </div>
@@ -44,8 +29,10 @@
           <div class="eachPr">
             CSS for subscribe button changed, description, Open
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
+
+    <script src="popup.js"></script>
   </body>
 </html>
diff --git a/popup.js b/popup.js
@@ -1,4 +1,28 @@
-// Query  //
+var inputHandle = document.getElementById("githubHandle");
+var btn = document.getElementById("check");
+
+inputHandle.onkeydown = function(event){
+	if(event.keyCode == 13)
+	{
+		btn.click();
+	}
+}
+btn.onclick = function()
+{
+	console.log("hello world");
+    var handle = document.getElementById("githubHandle").value;
+	console.log(handle);
+	var result = document.getElementById("result");
+	if(handle != "" && handle != null)
+	{
+		result.innerHTML = "Loading...";
+		getData(handle);
+	}
+	else
+	{
+		result.innerHTML = "Please enter a valid Github Username";
+	}
+}
 
 function getData(handle){
 
@@ -7,9 +31,13 @@ function getData(handle){
 
   var req = new XMLHttpRequest();
   req.onreadystatechange = function(){
+  	var res = "";
     if(this.readyState == 4 && this.status == 200){
       var data = JSON.parse(req.responseText);
-      document.getElementById("prCompleteCount").innerHTML = (data['total_count']>4?"4":data['total_count'])+ "/4";
+      // document.getElementById("resultHandle").innerHTML = handle;
+      res +="<div id='resultHandle'>"+handle+"</div>";
+      var count = (data['total_count']>4?"4":data['total_count'])+ "/4";
+      res +="<div id='prCompleteCount'>"+count+"</div>";
       var message = "";
       switch(data['total_count']){
         case 0:
@@ -28,7 +56,8 @@ function getData(handle){
           message = "Congratulations, you have completed hacktoberfest 2017.";
 
       }
-      document.getElementById("message").innerHTML = message;
+      res +="<div id='message'>"+message+"</div>";
+      document.getElementById("result").innerHTML = res;
     }
   };
   req.open("GET", reqUrl, true);