My penultimate project for Flatiron School is called “Crime After Crime.” Since the beginning of the program, I’ve wanted to incorporate my fascination of all things true crime. I have tried to mold the topic into each project thus far. I haven’t had the toolkit to accomplish exactly what I wanted, until now. I have scoured the internet for a decent true crime API. With no such luck, I decided to create my own.
Crime by Crime allows you to view cases categorized by several case types. If you’re looking for a case, and cannot find it, you can add a case to our database.
Once you click on a particular category, you will be presented with a list of case names.
When you select a case you’d like to learn more about, you will be presented with a card that displays the biography of the selected criminal.
I’ve iterated over ‘cases’ which is an array that all of my Case objects are pushed into. I took the iterated items, and wrapped them in button tags so I can display the modal on click.
I gave life to the button, with adding addEventListener that takes in an event as an argument. Then it sifts through all of the cases in the Case class and matches what resides in the database with the event of the click. I go ahead and create a modalDiv, changing the innerHTML to what I would like displayed on the card. For these cards, I am displaying the name, and the biography of the specified case. The last part of code activates and deactivates the modal upon the respective clicks. Of course , the final step is creating some snazzy CSS to spruce up the page a bit.