Hello everyone! It's me again coming to talk about the first project I have done to date. Well technically the only project in this boot-camp I have done... so far. Let me just tell you how fun this was, and by fun I mean so much fun I wanted to pull my hair out the whole time.
Just kidding.... kinda...
Anyway, we were given a task to create a webpage that contains a HTML, JavaScript, and a CSS file. The parameters were to create three event listeners and use a public API. Oh, and the entire app had to run on a single web page meaning only one HTML page. Not that difficult right? Well you would be correct except when you are given this task on your own. As in the only piece you are given is a git repository to fork.
So, step one, fork your code. Easy enough I think. Perfect, now the fun part. you have to create your HTML, CSS, and JS which is also easy enough with a simple google search.
Ok, now for the real interesting part. figuring out what you want your website to look like and finding a public API to use. I will take a second to stress how important it is to plan out your website. What it looks like and what exactly you want it to do. You know, like the old saying measure twice cut once. I learned that particular lesson the hard way. Just, you know, do what I say not what I do.
Anyway, I decided upon a GitHub API that projects random pictures of cats on the screen. Perfect. I essentially decided on creating a "click me" button that when pressed would pull up pictures of cats. Yes, you guessed it, this is where that event listener comes into play! Now if you're wondering where the event listener goes, well let me tell you. You first have to create a button tag in the HTML (because "click me" is in the form of a button), then you can link it in the JS.
Voila you have an event listener. I know what you're thinking, Sheridan you said you have to have at least three to pass this project. Yes, you are correct, that's why I put in a comment section where you would be able to leave a comment about the cats. I also put in a heart button where you can, you guessed it, like the page. We are just cruising alone here, look at us go! I will go ahead and say I am making this sound like a walk in the park but trust me when I tell you, creating that heart button and trying to get it to work had me question my sanity multiple times. It was a shit show to be frank. I think I literally screamed in pure joy when it finally worked. Back to my process.
Ok, so what do you think is next up? Well, you have already put buttons into your HTML for the "click me", the "submit", and the "heart button". We have added our event listeners to the JS. If you were thinking that we have to actually get our API working you would be correct. So in all honesty I would suggest ensuring the API works to begin with. It is fantastic to get your HTML set up in a way that you understand and makes the website pleasing to the eye, but, if your API does not work then you will end up having to start from scratch.
Guess what I had to do...
Yep, that's right. The API I had originally set out to use ended up now working properly so I had to scrap my idea and start from scratch. Fun. So, take my advice, make sure the URL for your API works. Once you ensure it does it is time to fetch it. Fetching an API can be done a few different ways. I chose to fetch mine in the JS and honestly it worked out swimmingly for me. Did I have to reach out to my instructor a little for this, maybe, but no shame in that game. I learned something from it and that is all that matters.
The last thing I did was add finishing touches. Such as making sure all the buttons were centered and looking nice. I decided to put the "Click me" button in a black box that would separate it from the heart and submit button. At the end of the day it is all personal preference.
If I had to do this project again I would absolutely give myself more time to think about the layout and specific spacing of things. I think I would also add some more fancy things like a like button for each individual photo in the API, but there was no way I was going to have time for that. I would also have put a column to the side where the most liked photos would be. But, again that would mean I would also have to set a like button to each picture. Not impossible, just way too time consuming and complicated for the level I am at currently.
Anyway, I hope this blog was helpful and made you feel like you could conquer your own website/ app. See ya on the next one!
Top comments (0)