Week 6: jQuery and Flexbox layouts

A couple weeks ago, I posted about being overwhelmed by trying to get the basics of JavaScript. Don’t get me wrong, it’s still intimidating, but this week, I met jQuery and it made JavaScript a little more friendly. The syntax is a lot simpler and more intuitive, for me anyway.

I remember reading a book for an English class in high school (don’t ask me what book, that was a little while ago) and it took like three pages to get the message across that it snowed. That’s how JavaScript feels to me, as a beginner.

So anyway, at the end of the jQuery course, I was feeling so confident that I got this big idea for a program. On the signup page for my Party Parrot Fan Club site, I wanted to add a multiple choice question asking for the user’s favorite party parrot. Then, depending on which one they chose, I wanted a gif of that parrot to appear. Simple, right?

Yeah, not really.

Here’s what the first bit of code I wrote looked like:

Screen Shot 2018-06-16 at 3.21.27 PM
In my mind, clicking on the radio button with the ID of coffeeParrot would show the div with the class of parrotGif.

And, nothing happened. I’m used to that by now. I played around with it in class on Thursday night, and a massive amount of Google searching didn’t bring me any closer to the solution.

This was a later version of my code, written after reviewing the Treehouse course:

Screen Shot 2018-06-16 at 3.33.58 PM

So I posted the question to the Code Louisville JavaScript Slack channel. (God bless Slack!) Almost immediately, someone pointed out that I hadn’t linked any jQuery to my site, so even if I’d written the perfect code, it wasn’t going to run.

Then it was pointed out that I’d forgotten a parenthesis. So I fixed it. But still no success.

Ultimately, one of the mentors suggested this solution, using the change event and slideToggle method, which I’d never seen:

Screen Shot 2018-06-16 at 3.37.45 PM

And it worked!

Screen Shot 2018-06-16 at 3.40.22 PM

Well, sort of. Notice that that’s not a coffee parrot, plus there are a couple other issues to work out. But when you click a button, a thing happens. And that’s progress.

My point in telling you all this is that it took a LOT of patience and persistence just to get a silly thing like this to work. And I had to have several people help me. Trying to let go of the idea that I should be able to solve everything on my own.

To get it to work like I envisioned, I’ll still have to add gifs for all the choices in this list and get those to work when clicked too. I’m trying so, so hard to be patient with myself here. I feel like I’m doing a lot, but have little to show for it. I want beautiful websites and useful, functional applications in my portfolio, and I don’t have either of those. Yet.

Flexbox layouts were also in the syllabus this week, but I finished that course a while ago and covered it in my last post, so there’s not much new to say on the project front. Coming up this week is Bootstrap, so I’m guessing that might change the look of my project significantly. We’ll see.

Meanwhile, if any developers are reading this, I would love to hear about your beginning projects and how long it took you before you felt even kind of confident in your work.

 

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 )

w

Connecting to %s