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 the
push method to copy the JSON response into an Array.
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:
members.innerHTML = ‘’ is used to clear any existing lists called by another party button. The filtered party members are saved in their respective array:
independentsFilter. These arrays are then passed to 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
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 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
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.