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.
If you really want to learn something fun, try using the terminal!
mkdir css && mkdir js
'touch' is the easiest way to create new, empty files
'mkdir' is the easiest way to create new, empty folders
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.
In this section we will be building out the functionality of the application.
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?"
-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
If you're wondering about querySelector();
Here's a link!
If you're wanting to understand addEventListener();
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 :).
What is XMLHttpRequest?
More info here.
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.
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.
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!