-
An image of the slider and the first few news articles for the "Leaning Liberal" bias.
-
An image of the "Take Action" form and the first few representatives for this location.
Inspiration
We were inspired by the current political climate which results in many people in the electorate either only viewing news sources that they agree with and taking no part in activism in order to improve their own country. We wanted to create a website that empowers citizens to view news sources sorted by bias in order to understand different perspectives, as well as have a simple and efficient way to contact their legislators.
What it does
This web app has a slider near the top that displays top articles from news sources based on that source's bias, based on a scale of extremely liberal, leaning liberal, moderate, leaning conservative, and extremely conservative. At first, only 3 articles are displayed, but by clicking the "Show More" button, more articles can be displayed. The "Take Action" button brings up a form asking for Street Address and Zip Code, which are used to display that location's representatives and contact information. Furthermore, there is an About Us page in the header that explains our mission, method, and future.
How we built it
We built this web app mainly using HTML, CSS, JavaScript, and Bootstrap. The News API was used in order to get information about and links to articles from various news sources, which are displayed if the sources bias level matches that of the slider. We programmed the "Take Action" section of the app by retrieving representatives through the Phone2Action API, displaying relevant information, and creating links to their Facebook and Twitter accounts to allow for quick and easy contact.
Challenges we ran into
Occasionally, linking CSS and JS was frustrating with more dynamic CSS elements, especially with the slider input, which we originally wanted to change colors depending on the selected bias, but had to drop the idea due to the complicated CSS. Additionally, managing permissions and security was a bit difficult while using ajax to make a GET request to the Phone2Action API. Surprisingly, we ran into very few difficulties between each other as teammates. The few discontinuities between our visions for the web app were resolved quickly.
Accomplishments that we're proud of
We are very proud of the use of the Phone2Action API, partly because of the parsing and hyperlinks, but especially of the set up of the API. In the past, we had only dealt with public APIs, with simple URL headers. This hackathon we learned how to use private APIs, requiring authentication with a beforeSend header. Something else we did was document our progress over time, and just seeing how the web app progressed over time, in about one hour intervals over the course of the hackathon, makes us feel really proud of the progress we've made.
What we learned
Not only did we learn how to use the News API and Phone2Action API; we also learned how to create Bootstrap grids dynamically through JavaScript. This implementation required creating container, row, and column div tags in Javascript, some of which contained other div tags, urls, strings, etc. from the News and Phone2Action APIs.
What's next for Find Bias - Take Action
We intend to eventually bring functionality where we can connect users with other advocates and campaigns through Phone2Action, to further expand the reach of the user. We would also like to expand upon our range of sources, especially on the right side of the political spectrum.
Log in or sign up for Devpost to join the conversation.