Advice Generator (Phase 1)
For my Phase 1 (JavaScript) project I went with a bit of a basic website. While it may be basic though I am very proud of it! In this blog I’m going to go over how I built it getting in depth a bit with the different languages I used. There are only three HTML, CSS ,and JavaScript! While I do plan on building on this website after it’s all said and done for practice ,I’m here to guide you along how and why I built it as it is now!
Website Concept & How it works
The website is a fully functioning advice generator (or randomizer) that generates random quotes of advice that are pulled from an external API.
When you load into the website there will already be the first bit of advice there for you already! In the middle of the page you will see that there are three buttons to choose from. “Fresh Advice” button when clicked will pull a random piece of advice from the external API and display it on your page. “Helpful Advice” button when clicked will transfer that piece of advice that you , the user, find helpful ,and move it into a list where you can keep all of the advice you find helpful stored. “Unhelpful Advice” button when clicked will have all of the same functionality of the helpful button except it will move it into the Unhelpful Advice list to be stored! Let’s be honest not all advice can be good or applicable! If you find that a piece of advice you thought was good no longer sits well with you ,then fret not you can just go down to your list of saved helpful advice click on it and it will be removed! That is the overview of the website! Now let’s get into the stuff you came here for!
The Fetch & The API
The API used for this website is one that was pulled off of GitHub as a public API. It provides an object called a slip when fetched and that slip contains the advice. When writing the code for it in all the functions instead of just going straight to <data.advice> I would always need to make sure that the JavaScript was seeing that the advice was contained inside the slip object. The fetch go the HTTP API I had provided as a source request the information ,and then return that information as a response. Now, upon receiving this response it would <.then> convert the response into the JSON communication format. All of the fetch’s functionality is captured inside a function getAdvice( ) which will be called multiple times!
The “Fresh Advice” Button
Adding the first event listener on the page was the “Fresh Advice” button. Upon clicking the button the Javascript will proceed to run the getAdvice function so it can retrieve its new piece of advice from our API. Then the data that was received back would be assigned to an empty object called currentAdvice! Once that data would be defined down by using dot notation down the piece of information we want to grab (our advice) it would be assigned to fill in the innerHTML of the element we had ID’d to be where our advice will go.
The “Helpful/Unhelpful” Advice buttons & lists
Following the “Fresh Advice” button would be two buttons the “Helpful/Unhelpful Advice” buttons. When clicked those buttons that would fire an event listener that called a function that will take what our getAdvice button was currently getting. The currentAdvice and push that into an empty array, every single time that the button is clicked. Inside the function it would also use the <document.createElement(‘li’)> method to create a list item for the designated unordered list HTML element. It would be assign to a new variable <helpLi> and that variable would be given the action of taking the slip object and appending it in the innerHTML of our designated list container! And BOOM now you are sorting by good and bad advice! When working correctly displayed after the buttons are pressed accordingly you will see the displayed list of what you thought helpful and unhelpful advice where. Now at the end of the function there is another event listener. This event listener would be on the look out to remove a targeted even based on the click action that would take place inside its function (or the list). That is how the functionality of removing and adding to the list. After that its just pressing buttons and clicking on list items!
My Thoughts at the end of Phase 1 & Project
Now this being my first technical blog I hope that I did well! I’m new to blogging entirely and its a whole new world ,but one that I am enjoying now that I am in it!.
Phase 1 for learning JavaScript has been a ride and a half! This project as well has ,but I cannot imagine learning these concepts with this difficulty at this pace at any other school then Flatiron. While people may roll their eyes and think I’m sucking up or plugging the school. I feel the need to credit the school and the incredible school that has immaculate sense of community, helpful instructors, interactive lessons everything just works so well. All to accomplish one goal ,and that is for that student to succeed! It is a good feeling that if I’m stuck or feeling alone and not getting something that this school has an entire team behind you with almost endless resources! As well as, thinking of everything that could apply to my future career and helping me prepare for it. Every single thing I have done in school has felt like it has had a purpose no time is wasted ,and its a very reassuring feeling. Phase 1 was tough and it’s not completely over ,but I’m excited and ready for the challenges of Phase 2.
Have an incredible day & don’t forget to tell someone you love them!