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 fetch to make a GET request to receive a JSON response of the U.S. senators. I then use a forEach() loop and thepush method to copy the JSON response into an Array.

senateMembers and propublicKey are both variables. I used the returnedData() function to push the JSON result into the allSenators 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 DOMContentLoaded 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 filter() method, which I call by a click event on the associated party’s button:

The members.innerHTML = ‘’ is used to clear any existing lists called by another party button. The filtered party members are saved in their respective array: democratsFilter, republicansFilter and independentsFilter. These arrays are then passed to the memberList function.

The memberList() function, is admittedly very long and could be broken down into several specialized functions. That is something I will edit later. For now, the memberList() function deals with DOM manipulation. It contains a for of 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 namedrenderHeadshot().

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 get request using fetch and used the response of the request in an if else statement to determine which URL to use. If the status of the get request was 200, use that URL, otherwise use the silhouette URL.

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

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