United States Senators Project

I created this project for people like me can find information about any current United States senator and be able to select and follow those senators. This project is only part of a larger project I am building. Some future features will be a list of bills the senator supported as well as more detailed information about each senator. This came about because I was unable to find sufficient information about bills a particular congressman or congresswoman supported.

I used the API from ProPublica.org, a nonprofit investigative journalism website. For this version of the project, I am using to make a request to receive a JSON response of the U.S. senators. I then use a loop and the method to copy the JSON response into an Array.

and are both variables. I used the function to the JSON result into the global array. Each senator “record” is an object in that array. Since I need to keep track of which senators will be “followed”, I used the same function to add a new key:value pair to each senator and set its initial value to “false”.

I used the event listener, so my script will wait to run after the DOM is loaded:

document.addEventListener('DOMContentLoaded, event => getSenators())

To separate the senators by party, I used the array method, which I call by a click event on the associated party’s button:

The is used to clear any existing lists called by another party button. The filtered party members are saved in their respective array: , and . These arrays are then passed to the function.

The function, is admittedly very long and could be broken down into several specialized functions. That is something I will edit later. For now, the function deals with DOM manipulation. It contains a loop to iterate through each element of the array passed to it as a parameter. This is where I create the HTML elements, add class names for CSS and create the structure for each member of Congress.

In order to add the headshot picture for each member, I created a function named

This function creates an image tag and adds event listeners on it as well as setting the opacity of the image to 70%. Since some of the senators don’t have photos, I did a request using and used the response of the request in an statement to determine which URL to use. If the status of the request was 200, use that URL, otherwise use the silhouette URL.

The final function in this project is named , which just creates and displays the HTML tags and details for each senator.

In this function, since I am using the result of the , I had to remove the event listeners for the opacity changes I made to each image.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store