I don’t know how I originally discovered the party parrot emoji on Slack, but it was love at first sight. Apparently it is for a lot of people. The ridiculous emoji and all its variations have quite the cult following.
I think I love the party parrot because I am so not the party parrot. The party parrot would actually go to parties, and stay past 11 p.m. The party parrot is not constantly requesting for music to be turned down. And the party parrot has good dance moves.
My idea for the project was a fairly simple one. It’s a site where you can click your birth month and it tells you which variation of the party parrot you are. If you just want to see the site, here it is: Which Party Parrot are you?
If you want to know how I created it, keep reading.
The layout (which is always my favorite part) of the site is pretty simple. Just a header and a grid with 12 squares. I did take the extra time to learn CSS grid layout (which wasn’t in the course syllabus) for this one, which was totally worth it. Here’s what I ended up with:
My plan for the interactive portion was to have the user click the square with their birth month, then make a gif of the parrot and some text describing the parrot appear. I also wanted to have each square change color when hovered, to add visual interest. So it looks like this:
And then this:
I also wanted to create an effect where the parrot and its accompanying text faded in, showed up for two seconds, then faded out. Putting all this together took multiple views of the jQuery courses on Treehouse, a LOT of questions to people on the Code Louisville Slack channels, a lot of Googling, and a metric crap ton of patience. I had to constantly remind myself to break things down into small tasks, and only focus on one task a time.
I started with this code, which hides the parrots and text on page load, and creates the purple hovered effect:
That was the easy part. After that came the difficulties. My first solution to get the parrot animation effect was to target each one specifically. So I had something that looked like this, written 12 times:
This only kind of worked. It showed the parrot, but the button didn’t reappear at the end. Plus, it was ridiculously repetitive. So I came up with something like this:
This cut out the repetitiveness, but didn’t entirely work either. The parrot sometimes showed up on the first click, but sometimes you had to click twice. It did fade in, delay, then fade out, though. Which was pretty cool. But the solution I tried to get the button to reappear at the end still didn’t work.
After some asking around on Slack, one of the mentors (who I haven’t met in person, but am super grateful for) suggested this:
And it worked!! Quite honestly, I’m still reading through it line-by-line and working on understanding it. The part of this I struggle most with is the variables. But it helps to be able to look at them in my own project, which I understand otherwise. It’s much more helpful than talking about variables as an abstract concept in a class, anyway.
Also, I guess it’s important to remember that I’m only like 11 weeks into this, and can keep piecing things together as I go. I know a heck of a lot more about coding than I did a couple months ago!
As always, if you want to see all the code for this project, you can check out the repository on GitHub: https://github.com/amytalbott/spiritParrot