JS Interactivity
Down below are a few things I'd like you to pimp using all of our JS knowledge, NO BOOTSTRAP ALLOWED! Feel free to dive in, however: You might have noticed a lightMode and darkMode class in the CSS. If the white is a bit too bright for your eyes, you could use the button in the downright corner to switch between dark and light mode!
I want a working parallax carousel here! Controls are optional.
I want a collage here, and if I click the image, it will enlarge and give me a short description!
Monkey holding a banana, wanting a dog to eat it but the dog does not want the banana.
Two monkeys holding hands.
A cute little monkey in overalls.
A monkey getting a haircut.
A monkey wearing a cool shirt.
A manga drawing of a very handsome gorilla, dashing through the streets of Tokyo.
Group of monkeys discussing the political and economical circumstances of our world.
A screenshot of an episode of Spongebob where a man in a gorilla-suit comes out of his Patrick-suit, scaring Patrick and Sandy.
A very fashionable monkey that was spotted in front of an Ikea.
Mark Zuckerberg and his colleagues looking like normal human beings that breathe and like music.
a monkey getting a haircut
a monkey getting a haircut
a monkey getting a haircut
a monkey getting a haircut
a monkey getting a haircut
a monkey getting a haircut
When I hover a Pokemon's name, I want to get a small popup image above it to see what it looks like!
The flying/normal type pokemon Pidgeot the water type pokemon Magikarp The water/psychic type pokemon Slowpoke The flying/normal type pokemon Farfetch'd
It is stated in multiple Pokédex entries that some Pokémon are known to eat others, such as Pidgeot swooping down to catch a Magikarp meal from the water. Humans have also been implied to eat Pokémon, with the player's Mom's Cinnabar Volcano Burgers and Team Rocket's plot to sell Slowpoke Tails as a sweet treat. Farfetch'd itself is based on a specific manner for preparing a meal of duck, with its rarity in the wild being a result of overhunting.
See this red circle in the box? I want you to make this a chasing circle, it will run after your cursor as long as it is in the box!
See this green circle in the box? I want you to make this a running circle, it will run away from your cursor as long as it is in the box!
As a final challenge, I want you to get creative! All the following letters in the box are inside of spans with the same class. Based on key inputs or mouse movements I want you to make them do weird stuff. It could be anything! For example, you can make all the "e" letters disappear if you press said key. You could make all letters move / rotate when you move the mouse, based on which letter it is! Go crazy!
💡