Flatiron School Phase 1 Project
Hi, my name is Raaj Ali and I am a Software Engineering Student at Flatiron School.
I had first began at Flatiron School knowing nothing about the field I am getting myself into. I had graduated from University of Houston with an Economics degree and a minor in Business Administration, so to some me joining this school for the field of Software Engineering was completely out of the blue.
Some things I really liked at Flatiron School is how much the staff actually seems to care about you. Getting Discord DM’s and emails about keeping track with assignments is something new to me being fresh out of college where you had to manage your time yourself with no one watching over your shoulder. I had joined the Flex Program where everything is designed for you to do at your own pace but the staff makes sure you don’t use that to your advantage completely. It makes me glad that they want me to keep at a healthy pace and for me to complete the course with an open schedule rather than waiting for the last opportune moment.
Onto my first project with Flatiron… It was weird getting to complete my own project with no set of instructions in an IndexTest.js file, whereas, I had to show my own set of instructions. I chose an API that listed 20 characters from the animated TV show “Rick and Morty.” My project must include certain aspects of JavaScript, HTML, and CSS. These 3 together made messing around with JavaScript very enjoyable.
The idea behind my webpage was to create a directory of the 20 characters listed in the API I chose to use and present 5 objects that would be returned, the character name, the status of their current life, their gender, their species, and an image of each character. You can also choose to add likes to each character of your choosing and also reset the number of likes on each character.
Since this app uses a json-server, you can install the json-server globally by running npm install -g json-server. You may then use json-server — watch db.json to run the API. Once this is complete, you may open index.html in your browser to oversee any changes made to the webpage.
Get Raaj Ali’s stories in your inbox
Join Medium for free to get updates from this writer.
The next step was to add the characters from the API onto the db.json file:
Next up, located in the index.html file, we must link the JavaScript file to the HTML file:
Moving onto Index.js, we begin with our const variables. The character bar will be displayed with all 20 character names as clickable spans. The rest of the const variables will display their corresponding information upon clicking any specific character.
Next up we have an event listener that makes sure that the code only runs when we have the DOM fully loaded. We have also linked the API to make sure the program fetches the character data from the API and so all the character names are displayed in the character bar. The first character will also be displayed by calling out displayCharacters.
These next set of variables, mouseover and mouseout, make sure the text color of the character names change in the character bar while the mouse is hovering over them. In this case the text color is normally yellow but turns to white while hovering over a character name.
To trigger a click event for each span under displayCharacters, we added a span element to make sure character names are displayed upon clicking on any character name in the character bar.
The function below for displayCharacters updates the character details and image when a character is selected. The data-id attribute is set to the charNames element of the character’s ID found in the API. The text content of the characters names, status, species, and genders are updated as well as the src of the characters image to be presented. An event listener was also added to create an alert function upon clicking the characters image.
The alert function triggers a pop up alert saying “Hit the sack, Jack” upon clicking the characters image. Its just one of Ricks catchphrases from the TV show, nothing important of course.
2 additional buttons were also added, 1 for voting likes and another for resetting the likes. e.preventDefault() prevented the forms default submission behavior. This function retrieved the value entered in the votes field which was renamed to the likes under CSS. The console would then log the votes until eventually reset by the user via the reset button. This was made possible by calling handleVotes with votesAdded and setting currentVotes to 0.
These codes made it possible for me to create a webpage where the character bar listed all 20 character names that would wrap to the next row if space had ran out in the current rows and display a character image in an oval shape. I had changed all fonts on the webpage to a custom font I had found online accustomed the the Rick and Morty font format found in the actual show. I have to say, CSS made this project very enjoyable, far much more than it was with JavaScript and HTML already. Messing around with the fonts, dimensions, paddings, colors, and backgrounds made it seem like I was in far more control over my webpage than I was already before.
I will see you again upon completion of my Phase 2 Project. “Hit the sack, Jack!”
