Demo Gif

Author: kumaresan-in

README.md

@@ -1,5 +1,6 @@
-# github-api
+# Github Profile Search App using Github Api
 
+<img src="github-lwc" alt="githubapp">
 Here will be some information about the app.
 
 ## How to start?

lwc-services.config.js

@@ -1,5 +1,5 @@
 // Find the full example of all available configuration options at
 // https://github.com/muenzpraeger/lwc-create-app/blob/master/packages/lwc-services/example/lwc-services.config.js
 module.exports = {
-    resources: [{ from: 'src/resources', to: 'dist/resources' }],
+    resources: [{ from: 'src/resources', to: 'dist/resources' }]
 };

src/modules/my/app/app.css

@@ -1,8 +1,7 @@
-.search{
+.search {
     text-align: center;
- 
 }
-.search input{
+.search input {
     border-radius: 41px;
     height: 50px;
     padding: 10px;
@@ -11,30 +10,29 @@
 }
 .search input:focus,
 .search input:active,
-.search input:hover{
+.search input:hover {
     background: transparent;
     outline-color: transparent;
 }
-.search-results{
+.search-results {
     border: 1px solid #9e9e9e38;
     height: 70px;
     width: 300px;
     border-radius: 10px;
     display: inline-block;
     margin: 10px;
 }
-.search-results p{
+.search-results p {
     font-size: 20px;
     margin-left: 10px;
     display: inline-block;
     text-transform: capitalize;
 }
-.search-results img{
+.search-results img {
     height: 50px;
     width: auto;
     border-radius: 50px;
     float: right;
     margin-top: 10px;
     margin-right: 10px;
-
-}
+}

src/modules/my/app/app.html

@@ -1,21 +1,21 @@
 <template>
-    
     <div class="search">
-            <input type="text" name="name"  placeholder="Search" onchange={handleSearchKeyChange}>
+        <input
+            type="text"
+            name="name"
+            placeholder="Search"
+            onchange={handleSearchKeyChange}
+        />
     </div>
 
     <div if:true={profiles}>
-            <ul>
-                    <template for:each={profiles.items} for:item="profile">
-                                <div key={profile.id} class="search-results">
-                                       <p>{profile.login}</p> 
-                                        <img src={profile.avatar_url} alt="" >
-                                       
-                                </div> 
-                    
-                    </template>
-                </ul>
-
+        <ul>
+            <template for:each={profiles.items} for:item="profile">
+                <div key={profile.id} class="search-results">
+                    <p>{profile.login}</p>
+                    <img src={profile.avatar_url} alt="" />
+                </div>
+            </template>
+        </ul>
     </div>
-
 </template>

src/modules/my/app/app.js

@@ -1,7 +1,6 @@
 import { LightningElement, track } from 'lwc';
 
-const QUERY_URL =
-    'https://api.github.com/search/users?q=';
+const QUERY_URL = 'https://api.github.com/search/users?q=';
 
 export default class MiscRestCall extends LightningElement {
     @track searchKey = 'Kumaresan';
@@ -13,7 +12,6 @@ export default class MiscRestCall extends LightningElement {
 
         fetch(QUERY_URL + this.searchKey)
             .then(response => {
-
                 if (!response.ok) {
                     this.error = response;
                 }