Rick and Morty Parasite Detector

Rick and Morty Parasite Detector. Based off the Total Rickall episode of Rick and Morty. Select a character and see if you know the correct answer to if they are real or a parasite.

Live Project at: https://brettcrafton.com/Portfolio/Rick-and-Morty/index.html

How It's Made:

Tech used: HTML, CSS, JavaScript

Lots of hard coded JS. Event listeners for button clicks. Most clicks change (add/remove/toggle) classes to complete changes to the rendered DOM. Characters are saved in an array pulled from the HTML class "characters". At same time character array is created, event listeners are added to each of those elements. Each of those events listeners, on click, cause the complex conditional function to determine which character was pressed and what to display. Similar interaction is determined by different functions when answer is choosen for that character.

Optimizations:

Remove redundancies. Implement functions to do repetitive actions. Change box with answer output to changing CSS and data instead of hiding boxes with it applied already. Could get classy and do OOP. Create array of objects with key to answer of parasite or real instead of implemented way of checking HTML for class. Remove complex conditional with previous. Add more/better comments.

Lessons Learned:

I ultimately learned the hardway to do simple things. I learned event listeners, query selectors, adding/removing classes from HTML from JS, creating arrays from HTML classes, and then utilzing that array. Some creative choices for responsiveness.