My Flatiron phase 1 project! I did not think the first project would come this fast but here we are. Going into this project I felt a little overwhelmed. Some of the requirements seemed daunting and I had to ask myself if I was even prepared for this. I will admit that I did give quitting a thought, but I knew deep down that was not an option. I began to read over the requirements and simplify it so it was much more manageable. Once I could look at this project without being overwhelmed, I scheduled a meeting with my instructor to talk over some ideas I had. After taking some time to have a conversation with my instructor, I felt even more relief. I finally had an idea on where to start!
This project requires you to pick a public API and build your app around that. Additionally, this API must return at least 5 objects with 3 attributes.There are many more functionalities that this app needed to have but I will discuss just a few a little later.
Right off the bat I picked an API called bored API. I thought this would be great for my project and I even coded most of the app using this API. Essentially, the app I coded gave a random activity to a user with the click of a button.This app was pretty cool in my mind but After taking a small break from coding, I realized that this idea was not going to work the way I planned. The API I choose did not have enough data. I had to start over from scratch!
The API I finally chose for my project was the Rick and Morty API. I love Rick and Morty, so this was perfect. Before I could start my project, I needed to do a few things. The most important thing I needed to do was make it so my project could be pushed to GitHub. A requirement I was given for my project, was to have at least 30 commits in GitHub. What even is a commit? I will explain all the steps I took to set up my project Repository below:
Step 1: Create a new repository
A repository is a place where you can store your code and collaborate with others. To create a new repository, click on the "+" button in the top-right corner of your GitHub dashboard and select "New repository." Give your repository a name and a description.
Step 2: Clone the repository
In order to push your work to GitHub, you will need to clone the repository to your local machine. Now copy the URL of your repository. Next, open a terminal on your local machine and head to the directory where you want to store your code. Type this command below to clone the repository:
Git Clone [Repository Url]
Step 4: Add your files
Once you have cloned the repository, you can add your files to it. Navigate to the directory where you cloned the repository and add your files. You can do this manually or by using the command line:
git add [filename]
Step 5: Commit your changes
Committing your changes creates a snapshot of your code at that point in time. To commit your changes, use the these commands:
git add .
git commit -m "commit message"
Replace "commit message" with a brief description of the changes you made.
Step 6: Push your changes to GitHub
To push your changes to GitHub, use the this command:
git push
This will push your changes to the remote repository on GitHub. You may be prompted to enter your GitHub username and password.
Step 7: Verify your changes
Once you have pushed your changes, go to your repository page on GitHub to verify that your changes have been successfully pushed. You should see your files listed in the repository.
Now that my project was all set up, I was ready to code! My next step was to set a constant variable and assign it to the API. This is what that would look like:
This line of code was the key to accessing all the information I needed for my project.
My Originally plan with this API, was to make an app that displayed character information from the show. I quickly realized that this API actually has the data for every version of every character. I thought this was so cool! At this point in the project I was more excited than I have ever been with learning to code.
This project required many things, but a requirement I found the very interesting was that I had to incorporate 3 distinct event listeners. This meant that I couldn't just add 3 click events, I needed to get more creative. so I did.
An Event listener I added that I thought was useful, was a "keydown" event. This event listener would give users the ability to search with the click of the enter button. I like this functionality because it is much easier to hit enter instead of taking the time to click the search button on the application. Here is was that function looks like:
The next thing I did was create an event listener that updates the search results as a user types. This functionality is very cool, it makes the app feel more alive and responsive! This is what that code looks like below:
To close, this project really made me realize that I can do a lot more than I think. This has been a common theme for me when learning how to code. Almost every time I see a challenging problem, I have a little voice telling me to quit because its to too hard. Every time though I persevere and I always complete the challenge!
If you would like to check out my project, I will provide the GitHub link below:
Top comments (0)