Day 2: Code Player Challenge (JavaScript / jQuery)

Today I did the walkthrough on how to create a CodePlayer (like jsbin.com). I am proud that I got as far as I did without the walkthrough.

Leading up to executing this exercise, I was a bit intimidated by the complexity, and it was true that we didn’t learn a lot of code required to complete this exercise.

Many times it was mentioned that we had not learned a piece of required code before this walkthrough, and so it was time to Google it.

I have no problem Googling what I need, but sometimes I don’t even know what term to use in Google to find what I am looking for, so the fact that I got as far as I did (erroneously, compared to the official walkthrough, but I my jQuery togglers get some of the job done), feels good.

Unfortunately, even with the walkthrough I could not make the code in my panels correspond to the code in my output panel.

This was the first project where there were moments that I was like, “I’m not sure what I’m typing here, but I’ll follow along.”

For that reason I will most likely be going through this JavaScript/jQuery section again in the future.

Before I do, I will probably go back to The Odin Project to do their JavaScript/jQuery section first, but then return to Udemy to do this CodePlayer project again.

I am noticing that it helps if I learn a subject (like JavaScript) intensely for a short span of time and then return to it a little later after learning something else.

For that reason, I will be moving onto Bootstrap now, which I have been looking forward to for quite some time.

(As I worked my way the walkthrough for the CodePlayer project, I took notes (below). They are really meant to be reminders to myself for the next time I return to the project, but if you care to read them, I have posted them below.)

My version in GitHub.

Rob’s version.

My Notes from the CodePlayer Exercise


The differences between Rob’s version and my own (Notes to self):

(1) He put the buttons in the header in divs, I put them in a table.

(2) He took off the right border of all of those divs completely, I only took it off my “output” cell. It would have helped to have known how to use border-radius specifically for the upper-top-right, upper-top-left, etc. I spent a lot of time trying to figure that out.

(3) He created the jQuery hover before adding the lower part of the page. I tried to use jQuery UI button function to add the hover (unsuccessfully) when I really only needed basic jQuery. I also didn’t know about “handlein/handleout” terminology.

(4) Like me, Rob also initially had wrapping of the last column when setting the width to 50%. I though it was because my width was wrong but it was actually because the height was set to 100% of the user’s page and we want it set to 100% of user’s window. Rob used jQuery for this. He also subtracted some pixels from the width and created iframe.

(5)The iframe is how he is displaying the code in “outputPanel” using this code: $(“iframe”).contents().find(“html”).html(‘My html’); which was then changed to $(“iframe”).contents().find(“html”).html($(“htmlPanel”).val()); to pull in the html.

(6)Rob Googled: jquery event when textarea updated . This is how to have the value (val) in the “htmlPanel” change the content immediately in the iframe.

(7) I was really frustrated because my panels would not display and hide when I clicked the corresponding button. NOTE TO SELF: I AM STILL NOT COMPLETELY CLEAR WHY CHANGING “panel” to “Panel” IN LINE 164 GOT THE TOGGLE WORKING PROPERLY. No where else in the document is Panel capitalized unless it is an ID that is named something like “htmlPanel”

var panelID = $(this).attr(“id”) + “Panel”;

(8) Changing the code in my panels does not change the outputPanel… Not sure what is incorrect. I have read my code over several times.