Crime after Crime
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.
To display these handy dandy cards, I used Javascript modals. A modal is a dialog box/popup window that is displayed on top of the current page. To create these mythical beasts, you can peak at my code below.
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.
Coming from Ruby and Rails, I was very confident heading into Javascript. My confidence soon dwindled amidst frustration of trying to translate what I’ve already learned into an entire new language. I struggled a lot leading up to this project week. I was having trouble grasping some of the newly introduced concepts. This project has rebuilt the confidence I lost early on. Through many errors in the console, many debuggers, and console.log()’s I learned little by little how Javascript truly works. Sometimes failing teaches you the most valuable lessons. For these hard lessons, I am always truly grateful for.
