Feat: Add NProgress page loader and fix input box bug

abhishekjaiswar221 · abhishekjaiswar221 · commit fee692a40a43 · 2024-06-07T18:05:11.000+05:30
diff --git a/index.html b/index.html
@@ -7,13 +7,13 @@
   <title>GitHub Data Finder</title>
   <meta name="description" content="Get github users data and information">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <meta property="og:title" content="">
+  <meta property="og:title" content="Github Data Finder">
   <meta property="og:type" content="">
   <meta property="og:url" content="">
   <meta property="og:image" content="">
-
+  <meta name="theme-color" content="#fafafa">
   <link rel="manifest" href="site.webmanifest">
+
   <!-- Place favicon.ico in the root directory -->
   <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
 
@@ -25,7 +25,6 @@
   <!-- BootStrap Icons CDN -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
 
-  <meta name="theme-color" content="#fafafa">
 </head>
 
 <body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,5 +17,8 @@
     "eslint": "^8.57.0",
     "parcel-bundler": "^1.12.4",
     "prettier": "^3.2.5"
+  },
+  "dependencies": {
+    "nprogress": "^0.2.0"
   }
 }
diff --git a/scripts/main.js b/scripts/main.js
@@ -1,18 +1,30 @@
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
 let form = document.querySelector(".form-control");
 let username = document.querySelector("#username");
+const emptyInput = document.querySelector("#username");
 
 form.addEventListener("submit", (e) => {
   e.preventDefault();
   let value = username.value;
   fetchGitData(value).then(() => console.log("Data Fetched"));
+  emptyInput.value = "";
 });
 
+//Disable the NProgress spinner
+NProgress.configure({ showSpinner: false });
+//Start the progress bar
+NProgress.start();
+
+//API Call
 async function fetchGitData(username) {
   try {
     let data = await window.fetch(`https://api.github.com/users/${username}`);
     console.log(data);
     console.log(data.type);
     let finalData = await data.json();
+    console.log(finalData);
     let mainRight = document.getElementById("main-right");
     let {
       avatar_url,
@@ -83,3 +95,5 @@ async function fetchGitData(username) {
     console.log(error);
   }
 }
+//Stop the progress bar
+NProgress.done();
diff --git a/scripts/theme.js b/scripts/theme.js
@@ -3,4 +3,4 @@ let theme = document.getElementById("theme-slider");
 theme.addEventListener("click", (evt) => {
   let themeMode = document.body;
   themeMode.classList.toggle("switch-theme");
-})
+});
diff --git a/styles/main.css b/styles/main.css
@@ -543,3 +543,7 @@ body {
 .cursor-type {
   cursor: pointer;
 }
+.bar {
+  background: #6e40c9 !important;
+  height: 0.14rem !important;
+}
diff --git a/styles/theme.css b/styles/theme.css
@@ -32,7 +32,7 @@
   bottom: 0;
   background-color: #ffffff;
   border: 1px solid #161c26;
-  transition: .4s;
+  transition: 0.4s;
 }
 
 .slider:before {
@@ -42,21 +42,26 @@
   width: 22px;
   left: 4px;
   bottom: 4px;
-  background: linear-gradient(180deg, rgba(183, 52, 179, 0.15) 0%, rgba(164, 46, 156, 0) 100%), #6e40c9 !important;
-  -webkit-transition: .4s;
-  transition: .4s;
+  background: linear-gradient(
+      180deg,
+      rgba(183, 52, 179, 0.15) 0%,
+      rgba(164, 46, 156, 0) 100%
+    ),
+    #6e40c9 !important;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
-input:checked+.slider {
+input:checked + .slider {
   background-color: #161c26;
   border: 1px solid #f7f7f7;
 }
 
-input:focus+.slider {
+input:focus + .slider {
   box-shadow: 0 0 1px #161c26;
 }
 
-input:checked+.slider:before {
+input:checked + .slider:before {
   transform: translateX(22px);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -17,5 +17,8 @@`
`17`	`17`	`"eslint": "^8.57.0",`
`18`	`18`	`"parcel-bundler": "^1.12.4",`
`19`	`19`	`"prettier": "^3.2.5"`
	`20`	`+ },`
	`21`	`+ "dependencies": {`
	`22`	`+ "nprogress": "^0.2.0"`
`20`	`23`	`}`
`21`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -543,3 +543,7 @@ body {`
`543`	`543`	`.cursor-type {`
`544`	`544`	`cursor: pointer;`
`545`	`545`	`}`
	`546`	`+.bar {`
	`547`	`+ background: #6e40c9 !important;`
	`548`	`+ height: 0.14rem !important;`
	`549`	`+}`