← Return to Homepage
Let's build a Github Profile Search Web App
Web Project Series:
A tutorial for using the Github API
As my first blog post I thought i'd be great to be able to try and start posting a series of weekly projects for developers looking to build small fun web apps to add to their portfolio.
Today I thought i'd be great to start it off with building something fairly interesting. Bulding a Github Profile Search Web App using the Github API.
1.) First create a folder structure like this. css/styles.css js/scripts.js index.html
If you really want to learn something fun, try using the terminal!
touch index.html mkdir css && mkdir js touch css/styles.css touch js/scripts.js
'touch' is the easiest way to create new, empty files 'mkdir' is the easiest way to create new, empty folders
2.) Setup our HTML
3.)Next we need to setup our app skeleton
We've create a two main div's. The first div is for our input field and search button. The second div is where we will be displaying the returned information from the call we make to the github api.
Before you build out anything it's always great to get an idea of what you should be writing before you sink time into coding. Ask yourself, "what are we trying to accomplish?"
Tasks: -Grab search element -Grab div that will display the data -When we click search we want: -Grab data from the text input field -Use that data to grab user info from the Github API -Display the response data from the Github API
It should look a little something like this!
5.) Grab our elements and create search call
If you're wondering about querySelector(); Here's a link! https://www.w3schools.com/jsref/met_document_queryselector.asphttps://www.youtube.com/watch?v=JlgLDfINXvY
If you're wanting to understand addEventListener(); https://www.w3schools.com/jsref/met_document_addeventlistener.asphttps://www.youtube.com/watch?v=F3odgpghXzY
6.) Grab our data from our input field and setup our call to the Github API
Okay now whoa. There's a lot going on here you're probably wondering and to be honest. You are absolutely correct so let's break it down :).
When we click we need to grab the most recent data from our input field. If we declare in the global scope of our file it will
Secondly let's take a look at this GET request.
I decided to use this instead of fetch simply due to browser compatibility. I thought it'd be great to support old browsers and not have to deal with polyfills. Take a look here. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Browser_compatibility
If you'd like to use fetch instead, feel free to!
7.)Next we have to check and use our response data.
You can check the contents of the response by doing a console.log(response) where we are suppose to display the data.
Now we populate our data in our HTML
8.) Now we add styling!
Hopefully you made sure you're weren't getting any errors along the way and you've attached your scripts and style sheet as well!
As nice as this app seems there is much more you can do to improve this application.
Here's a list: -**Look into alternatives for using innerHTML and understand why using it isn't the best practice -Add CSS animations for the card -Add error handling to our call -Use CSS Grids or Flexbox for the layout -Convert the CSS into Sass
That'll keep you busy for a bit. Have fun and enjoy your week!