How the party parrot is teaching me patience and programming languages

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.

You know what I don’t love, at least not yet? JavaScript. I’m almost to the end of the front end web development course in the Code Louisville program, and JavaScript still seems entirely foreign to me. However, I’m trying really, really hard not to say that things are terrible, or I’m terrible at them, just because I don’t understand them yet. I wrote a few weeks ago about how jQuery made a lot more sense to me than plain JavaScript, so I decided to start a new project there.

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:

layout

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:

hovered

And then this:

clicked

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:

showparrots

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:

firstattempt

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:

secondattempt

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:

solution

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

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s