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.
Let's Begin!!
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.
We have the classes there as well because we will be using them to style the application and use the elements in JavaScript as you'll see later on.
Building out the JavaScript
In this section we will be building out the functionality of the application.
4.) Scaffold
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.asp
https://www.youtube.com/watch?v=JlgLDfINXvY
If you're wanting to understand addEventListener();
https://www.w3schools.com/jsref/met_document_addeventlistener.asp
https://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.
What is XMLHttpRequest?
XMLHttpRequest is a built-in browser object that allows to make HTTP requests in JavaScript.
More info here.
https://javascript.info/xmlhttprequest
https://www.youtube.com/watch?v=rjmtYkRK1nM
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!
We're done!!!!
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!
Top comments (9)
Not sure why you wouldn't use fetch or promises --caniuse.com/#feat=fetch
caniuse.com/#search=Promises
You could have easily included a polyfill from a cdn.
Question: why do you use both
ems andpxs in your CSS? A base font-size is not defined inhtml{}, body{}or any parent element.As I stated earlier in the article "I decided to use this instead of fetch simply due to browser compatibility. I thought it'd be great to support older browsers and not have to deal with polyfills." I'm fully aware there's a polyfill. Also, fetch is a sugar coated method and having a xhrHttpRequest in my opinion pinned down on the learning aspect of this tutorial. As stated at the end "As nice as this app seems there is much more you can do to improve this application." I took that into account when building it out. The person reading this article should purposely look further into improving the code. That's the point behind that statement! If you see something wrong build it make it better. :)
You are aware that the ES6 features like
Arrow FunctionsandString Template Literals, that "you" used do not work in older browsers without a JS compiler like, Babel. Did you even test "your" code in an older browser, I'm guessing not.Are you Allstate's mayhem web dev?
Yup! Fully aware of Babel. Again if you see something that can be improved, build it out yourself. Instead of trying to attack someone, try to be a bit more constructive man! No, i'm not Allstate's mayhem dev. We all make mistakes and I definitely should've put babel into this project. I thought about a lot of things to do including that but I decided not to due to how long it was. It's my first article homie, I'll make sure I improve on the next ones! Regardless, thanks a ton for your feedback :). I do appreciate it!
I do not understand Walterbarris criticizing Austin here. And especially his quite insulting and mocking style. At least Austin puts up an effort here. It is easy to criticize. The hard part is to criticize constructively and the hardest part is to do something yourself. Where are Walterbarris tutorials?
Nice!
Thank you very much!
Nice starter project. It would be nice to tell folks the project pre-requisites. For example, the "touch" keyword is only available once you install the npm package.
Thanks for the feedback!!