This was a Scrimba project. We were tasked to build a cat meme generator. The application displays a list of emotions. The visitor can click on an emotion to select it and then click on a checkbox to indicate if they only want to view animaged memes. Once those selections have been made, clicking the "Get Image" button rewards the visitor with a cat meme associated with the selected mood and animation/non-animation choice.
The application uses an array of local cat meme images, not an API.
Deployed at: https://vish213-cat-memes.netlify.app/
- variables
- arrays
- .filter()
- .includes()
- .length()
- .push()
- objects
- for loops
- for...of loops
- if statements
- NOT operator (!)
- return
- JavaScript modules
- module imports
- module exports
- document.getElementById()
- .parentElement
- document.getElementsByClassName()
- document.querySelector
- input[]:checked
- element.innerHTML
- element.classList
- .add
- .remove()
- element.checked
- element.style.display
- display = "flex"
- display = "none"
- event listeners
- addEventListener()
- "change" event
- "click" event
- addEventListener()
- string/template literals
- Math.floor()
- Math.random()
- display: flex
- align-items: center
- justify-content: center
- flex-direction: column
- gap
- selector:first-child
- selector:last-child
- cursor: pointer
- input[type="radio"]
- width: unset
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- accent-color
- display: none
- position: fixed
- top
- left
- right
- position: absolute
- background-color: transparent