Parks and Recreation is a TV show depicting the lives of employees working in the Parks and Recreation department in the fictional town of Pawnee, Indiana. In this series, we follow Leslie Knope and her coworkers through their journeys in public service and their personal lives. The show ran for 7 seasons from 2009 to 2015, and was critically acclaimed.
One of the main characters is named Ron Swanson, played by Nick Offerman, who is a strong libertarian and extremely masculine, and who, counterintuitively, greatly dislikes government. Although he is not the main character, he is considered the breakout star of the show, and one of the best characters on TV due to his deadpan personality and specific character traits. In addition, he has many iconic quotes which speak to his traits.
For this project, I decided to make a website which would generate a quote from Ron Swanson every time the page was called. In order to solve this project, I decided to attempt to use new methods of making a web app, in order to further diversity my skill set. In addition, due to this project being more visually-oriented, it challenged my HTML and CSS skills.
Some big questions that I'm hoping to answer in this project are
This project offered me two different avenues in creating this webpage - either hardcoding in quotes and choosing one at random every time the webpage was loaded, or calling an API that gives quotes getting the result, and displaying that on the website. I went with the latter option, due to successfully finding an API which, whenever you refresh the page, prints out another quote of Ron Swanson's. My project was designed to create a more elevated and fancy version of this API, and finding this affected my decision on what character to get quotes from. The dataset has many quotes said by Ron Swanson throughout the series, although the episode they are from is not listed. In addition, I was not able to see how many quotes comprised the full API.
To set up the web app, I downloaded various libraries, including json, requests, and various aspects of flask and flask_bootstrap. After downloading these libraries, I set up the flask app, using Flask and Bootstrap. Next, I called the API, got the response using requests.get(), and converted that to a JSON response. The JSON version allowed it to be formatted as an array with one element - the quote. I also experimented with calling more than one quote from the array, and sending that to the next step, but eventually landed on only calling for one quote, as I am only printing out one quote to the page every time that it is called - creating an array with multiple quotes is possible, but unnecessary.
After creating the basic web app, I decided to start on creating the basic web page. For this, I decided to look at basic CSS code, and see how that differed from HTML - in terms of its syntax and how it is used. Afterwards, I decided to create a very basic page that would serve a very similar purpose as the API, except would print out 3 quotes, along with a picture of Ron Swanson and a black and white radial background (testing out more complicated CSS backgrounds). I soon got that to work, and then moved on to the next step in my process - setting up my website on Heroku.
Heroku is a service on which you can deploy various applications in different languages, such as Python (my usage for it), Ruby, Java, and more. These applications are usable on heroku, and you will get a url ending in "herokuapp.com". For this project, I chose to use Heroku, as that would allow me to learn another method for deploying a web app. To set up my webpage on Heroku, I created a remote branch on it, and then pushed my code there, where it loaded on the page. Afterwards, every change that I made, I was able to push directly to Heroku, and the web page would automatically update.
At this point, I decided to start improving the appearance of my website. I spent some time thinking about an aesthetic way to display the quotes, as that was the main purpose of my project. In this process, I thought about the layout of the website - where I wanted to put things, how the organization would work, and being creative, while still being aware of the limits of my HTML/CSS knowledge, and what I actually had the ability to create. After some deliberation, I decided to make a quote bubble, which I found online, (link) and put the quote and name in their respective positions. Below, I decided to put a GIF of Ron Swanson, which would get a new quote if you clicked on it.
I spent a lot of time formatting the website to the specific items that I wanted, and added new CSS elements as I created different elements. I have made a short list of things that I tried below, some of which are in the final website.
If you want to access my website, click here, or go to "https://swansonquotes.herokuapp.com/". The first time that you run the website, it will take a few seconds for the page to load, but once you refresh it to get a new quote, it will run almost immediately.
This project was helpful in starting to work on web development, as I had to be much more aware of the presentation of the website. In addition, I also got practice with calling an API, and using new services, such as Heroku.
These are some main takeaways that I had from this project, and will be carrying into my future projects.
The balance of spending time to make it look nice without wasting time is something that I found myself struggling with with this project, as I wanted to make it look as nice as possible, but as a result, found myself sinking time into finding the perfect color combination and font choices, along with trying to incorporate a deeper message into it. As a result, I quickly learned that I had to be happy at some point, as I could continue forever looking for perfection without finding it, and I am proud of my final website.
All in all, this project gave me exposure to new services like Heroku, allowed me to understand how to get information from an API, and improved my skills in web design. If I could do this project again, I would look into choosing a different format for the quotes, or changing the colors up. However, I am happy with the product that I have created.