The Meme Picker project is part of the "Essential JavaScript Concepts" module from the Scrimba Frontend Career Path course. This app allows users to select an emotion and get a matching cat image or GIF, displayed in a modal. The app uses JavaScript to dynamically render the available emotions, filter the cats by selected emotion, and randomly display an image or GIF.
- Get emotions from
catsData- Extract all emotion tags from the catsData array.
- Filter out duplicate emotions
- Ensure only unique emotions are used.
- Render emotions as radio inputs
- Dynamically create a radio button and label for each unique emotion.
- Highlight the selected emotion
- When a radio button is selected, highlight the corresponding label.
- Filter cat images and GIFs based on the selected emotion
- Use the selected emotion and filter catsData to get the matching cats.
- Randomly select a cat
- If multiple cats match the selected emotion, randomly pick one.
- Render the selected image or GIF in a modal
- Display the randomly selected cat’s image or GIF inside a modal.
- Close the modal
- Provide a function to close the modal when the close button is clicked.
🔳 for...of loop: For iterating over arrays and objects.
🔳 import/export: For modularizing code across files.
🔳 Radio & checkbox inputs: How to work with form inputs and their checked states.
🔳 querySelector: For selecting DOM elements dynamically.
🔳 getElementsByClassName: For accessing groups of elements and applying bulk actions.
🔳 classList.remove: For manipulating class names and changing styles.
🔳 Array methods like .includes() and .filter(): Essential methods for array filtering and searching.
🔳 Nested CSS: Writing cleaner and more modular CSS by nesting styles for better organization.
🗃️ Frontend Career Path by Scrimba
✨ Frontend Mentor - @medezpvi
✨ X (formerly Twitter) - @medezpvi