I’m a terrible programmer! Yes, really!

I’m a terrible programmer. I am.

Don’t get me wrong, I’m keen, able and willing to learn. To learn about ways to better myself and learn how to do cool things with the internet through programming. But when it comes down to it, there are people who have better programming brains than me.

It’s not that I can’t do it. I’m not trying to undersell myself. Not being able to do something is an entirely different matter. And I’m not saying I won’t take a programming job on on the knowledge I currently have. Said knowledge is growing.

But if you take me on, you’re taking on a fellow with coding issues and quirks that will not go away.

My memory and stubbornness for example.

Just tonight, I’ve been getting to grips with mixing AJAX, which is but one aspect of JavaScript and getting it to “talk” to a websites API (Which was a simpler task than I ever thought possible, by the way).

Like on other occasions, I find myself far too often racking my brains over a problem I really thought was not there because, naturally I got my code all right. It really looks that way to your own eyes when you’re writing your own code.

This is where my stubbornness comes into play. I really will just stare at the screen looking for solutions that will pass me and my brain by, before I even think about opening the JavaScript console.

Suddenly, in seconds, problem solved! Minutes, sometimes hours of my life I’ll never get back because I really must try and do it on my own. It works sometimes, but most times it does not.

I can open up code I’ve done previously before and probably walk you through what’s going on in the code. I can read good code and understand it quite well. I’m just not always good at writing it.

It’s confidence issue for sure, but it’s also a memory issue. It’s that feeling I get when I’m trying something I haven’t before. What if I’m getting it wrong. What if I don’t get it right first time? Am I somehow inadequate or weak if I don’t do it?

Such thinking is of course, folly. But it’s how I feel when I write code.

You’re probably wondering why I’m telling you all of this. Why I’m laying down all my apparent weaknesses and shortcomings.It’s because I believe in being absolutely honest with everybody, even if it’s not necessarily going to win me business, I think people respect someone who is 100% about what they do; what they think they can achieve; what kind of work someone is going to get from another’s endeavours.

I have shortcomings, and I’m sure I’m not the only one. But how do I get past them.

By keeping pressure off myself. By telling myself I don’t have to remember every last line of code I’m presented with.

Learning what I need to do and the tools I need and have a general idea of the code I need to solve a problem.

By knowing how to read developer documentation and knowing expanding myself all the time.

All so I can equip myself to be a better web design professional, so I can apply myself a wider I range of tasks with confidence. I may be a terrible programmer in the sense that I don’t always know my code inside out like the next coder but I will learn enough to get work done and make it an honest piece of work and work of quality.

Advertisements

Making a To-do list application with Javascript. #4

Welcome to the last post in this series where I’m trying to get to grips with the JavaScript code required to build a good “to-do” list application.  I’ve been following the code ably built by Treehouse’s Andrew Chalkley, and I’ve been trying to make sense of it.

So far I created elements that previously did not exist in the index.html web page by manipulating the DOM (Document Object Model).

I’ve traversed elements (which to my mind means moved about the tree structure of HTML a little bit) in order to bind to the elements we need to create the application.

I also tackled Event handling and how to trigger actions that the application will perform.

Parents, again

So it’s almost ready. But there’s still a few kinks to the armour to get through.

The “add” button does not provide the correct styling and elements thus far and needs to be sorted out. It doesn’t create the 2 buttons required or retrieve any text what task the user types in so it’s got nothing to actually display.

So the elements need to be modified so they show up correctly and are easily manageable.

To sort this out, we start with the editTask function.

        var listItem = this.parentNode;

Here just like the other functions, we’re just making sure the listItem is the parent element and applying the this keyword so that the edit button is synonymous with its checkbox.  listItem goes all the way back to when we selected the list item (li) element with getElementById.

The code below should be quite familiar. We have to use querySelector traversal property again.

       var editInput = listItem.querySelector("input[type=text]");
       var label = listItem.querySelector("label");

Searches the first matched element in the CSS3 selector string and returns that element so it will be compatible.

Formatting

So we already have a section in the code to modify the elements. We need to modify one of the elements to turn it into a checkbox, because the addTask function doesn’t do that for us.

We turn another into an editable text box. Another 2 to change 2 elements into buttons with appropriate labels.

checkBox.type = "checkbox";
editInput.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";

pass in a string to its label using taskString  e.g.

label.innerText = taskString;

When I reviewed the createNewTaskElement, I suspected we’d need the modify the “Some new task” string that was it’s argument.  Indeed we do.  it should be taskInput.value because taskinput picks up the add button and .value retrieves the text for the input box.

So we pass this in as the argument instead.

label.innerText = taskString;

The reference to the label variable is very important. without it, you won’t get any text retrieved and displayed to the screen.

It’s added to the code but has no way of knowing how or where to display to the screen.

So all adds up to be nothing more than a case of knowing which variables and properties to use and assigning them appropriate string values.   If you are practised in this it is quite straight forward.

e.g. newParagraph.innerText = "Javascript is enabled";

In the documentation we have a property called classList. returns a list of classes in which certain manipulations can be done.  addremove and toggle of classes. See if it contains a particular class.

listItem.classList.contains.

editMode is a class name we can use because it’s used as a class name in the HTML.

below everything else in the editTask function, the classList property is added to the script, assigned to a variable.

Toggle

var containsClass = listItem.classList.contains("editMode");

Remember this is variable use at its best.  Not just storing simple values but complicated statements that can be used in loops or condition statements.

if(containsClass) {

}

So containsClass is the condition. it;s testing if the value of the containsClass variable is true or false and keeps it simple by allowing us to only use the variable as a reference in the condition.

if(containsClass) {
      label.innerText = editInput.value;
 } else {

      editInput.value = label.innerText;
}
listItem.classList.toggle("editMode");

The condition statement, has a simple else statement, basically switches between modes based on the above is checking for a class that contains “editMode” class so we know it can be toggled.  Needs to be editMode so it works.

Class list. In the simplest possible way, classList is a DOM property that has a collection of associated  methods.

  • add
  • remove
  • toggle
  • and contains

It is very flexible and allows us to do many things with an element that has a certain class applied to it.

listItem.classlist.toggle("editMode");

And to break it down.

listItem – li new elements are added, manipulated and all the action happens

classList is the property with toggle being the method which takes a string of the appropriate value.

And in review

In my last blog, I’ll post the entire code and try to tie it all together, but a quick summary of all I’ve learned below.

I’m happy to say that doing this blog series has increased my understanding of JavaScript. I’m no longer as mystified as I was when I first started the “Interactive Web Pages with JavaScript” course. I’m more equipped than I would have been even a week ago. That’s great.

But I need to get over my fears and just start coding anything.  Anything to get into the practice and get those skills honed in my brain.  That’s what it’s all about.

… about using JS to manipulate the DOM

… about gaining confidence in using the documentation to find properties and methods and use them correctly

Finally for a bit of attribution, if you’ve enjoyed this series, know that the knowledge didn’t come from me but from the knowledge of Andrew Chalkley and Teachers at Treehouse.  If you found this useful and/or interesting, sign up for a free trial.   🙂

Making a To-do list application with Javascript. #3

There’s been a lot I’ve been trying to get my head around over the passed few days as I ponder this next blog in my series. If you want to follow along I can post the code or as much as i can in these blogs or you can sign up at Treehouse where the code and application comes from.  Follow the Interactive Web Pages Javascript Course.
This is perhaps the most exciting stage of the course so far because here things start to happen and the application takes shape.

What we’ve done so far…. 

I began by talking about selecting events using JS methods such retrieving an element by it’s ID value or name attribute or just by it’s element name.

Before that, we selected our elements dynamically assigning them to variables like this.  var taskInput = document.getElementById(“new-task”);

We’ve Traversed Elements to make sure we’re using the right elements to to make our application work.

I also explored the topic of event handling and making something happen as a result of some user interaction like a click event.

Finally I broke down various sections of the application into functions ready to be called later

This code is binding

In this blog, we will be creating and binding elements to move them across different parts of the to-do list. That’s the laymens version of what the code will do and it’s about as technical as I think I can make it get.

I feel like I get what the code is doing but I’m not sure how to explain it in words.

That said, I’m starting to see why we needed the parameters in the bindTaskEvents function and why they were declared as parameters so soon.

      var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
checkBoxEventHandler requires its own separate and different event handler because of the way it interacts when you use the keyboard. The application will sort tasks in between completed and incomplete tasks at the click of a checkBox which could get annoying if you’re not trying to interact with just the mouse.
The second parameter, taskListItem is a variable assigned to a property of querySelector so it matches the first selected element of the CSS selector that is used as a query string. And we know which element we want to make this selection to because we’ve already referenced it in the variable declaration.
So we define the interactions with statements like this
        var checkBox = taskListItem.querySelector("input[type=checkbox]");
        var editButton = taskListItem.querySelector("button.edit");
        var deleteButton = taskListItem.querySelector("button.delete");
and finish it here with event handlers.
   editButton.onclick = editTask;
   //bind deleteTask to delete button
   deleteButton.onclick = deleteTask;
   //bind taskCompleted to checkbox
   checkBox.onchange = checkBoxEventHandler;

There’s another new property to talk about in this blog and it’s the create createElement property.  The use of the property is self explanatory really. It simply creates element which is identified by a string of the same name.

We use the createElement property by supplying it with a string that matches the HTML element you want to create.  Then it’s appended by passing in the variable which the elements are assigned. This is done in order they are created
So the list items are created so that elements that previous did not exist now do so, and things can be done with them.
      var listItem = document.createElement("li");
      //input (checkbox) 
      var checkBox = document.createElement("input");
      //label    
      var label = document.createElement("label");
      //input (text)    
      var editInput = document.createElement("input");
     //button.edit    
      var editButton = document.createElement("button");
     //button.delete    
      var deleteButton = document.createElement("button");
I think this idea is to create a new list item element, modify the structure of the HTML dynamically and append this to the parent unordered list element.   (ul)
      //Each elements needs modifying
      listItem.appendChild(checkBox);
      listItem.appendChild(label);
      listItem.appendChild(editInput);
      listItem.appendChild(editButton);
      listItem.appendChild(deleteButton);
     
      //Each element needs appending    
      return listItem;
Now that’s been done, and we’ve tested that each interaction has actually been detected by Javascript, It’s time now to start telling the browser what to do with those interactions.
This is a function that has a string as a parameter. The string value in the function will retrieve the value put into the text box but for now it has a default string as it’s call return value.  So an empty function and its call.
var createNewTaskElement = function(taskString) {


}

var listItem = createNewTaskElement("Some New Task");
The function call value I’m pretty sure at this point will be changed but like the console.logs in the various functions, it’s a nice stop gap and debugging technique while the application is in development.
So to recap, what looks like has happened is we’re adding a new function that when triggered adds a new checkbox to the application so the user and create a new task. But there’s no functionality yet to actually put that on the to do list. The elements at this stage need a bit of fine tuning. That’s for another time.
it looks like some chain functionality is going on here.
The createNewElementFunction seems to be linked into the addTask Function which is already being triggered by an event handler
e.g. listItem.appendChild(checkBoxEventHandler);
where list item is an example of a variable and checkBoxEventHandler is an example of a variable where the element being dynamically retrieved is stored. it is assigned in the variable referenced.

Appending

Now we move on to appending task to the completed or incomplete tasks .  This is when we start to make things actually happen.

var taskCompleted = function() {
   console.log("Task complete...");
   //When the checkbox is checked
     //Append the task list item to the #completed-tasks
      var listItem = this.parentNode;
      completedTasksHolder.appendChild(listItem);    
      bindTaskEvents(listItem, taskIncomplete);
      }

We revisit the 2 functions taskCompleted and taskIncomplete.

The console.log is simply a line to test that when triggered the function will perform the actions.

We declare a variable listItem we assign it to the selected checkbox by using the parent node.

We know that completedTasksHolder is useful and which part of the document it’ll affect because we’ve already selected it via it’s ID attribute.

this.parentNode is a property that searches the element interacted with. This function binds the 2 functions so it makes the checkboxes that already exist usable; so users can switch a task from an incomplete task to a completed task and vice versa.

A new variable is declared,  listItem and it is assigned to the parentNode, the clicked checkbox and since a child element is appended to that function, it is moved to the bottom of that list.

They link to each other by calling each others function names interchangeably so the taskIncomplete calls the taskCompleted function

like this
bindTaskEvents(listItem, taskIncomplete);
And a similar function to make sure the same task can be done the other way round.
//Mark a task as incomplete
 var taskIncomplete = function() {
   console.log("Task incomplete...");
   //When the checkbox is unchecked
     //Append the task list item to the #incomplete-tasks
 var listItem = this.parentNode;
      incompleteTasksHolder.appendChild(listItem)
      bindTaskEvents(listItem, taskCompleted);
      }

Removals

This last piece of code is simple enough. How I understand it is that the this.parent node is bound to the delete button, the “current” selected button

The ul variable is a new variable and the task is removed completely from the task using the removeChild property.

var deleteTask = function() {
   console.log("Delete task...");
  
      var listItem = this.parentNode;
      var ul = listItem.parentNode;
  
      //Remove the parent list item from the ul
      ul.removeChild(listItem);
 }

Bound in the same way using the parent node so the delete button knows which task to delete from the task list..  This makes sure the checkbox clicked, whether it is newly created or provided by default is removed completely from the screen.

As the opposite of addChild it removes elements from the screen so they disappear dynamically as there’s nothing to display.

Wrapping up this blog post

Most of what I’ve talked about here is pretty straight forward. I’ve gone into some specifics about what it is to dynamically add HTML elements to a document using DOM properties and methods and what it is to create some cool interactivity on your browser screen.

My biggest struggles are

  • Knowing how to navigate the MDN developer documentation and how to interpret the information provided.
  • Understanding the difference between a property and a method and putting that into practice when building my own projects.

Overall, have I built up a better understanding of JavaScript in this course so far?  Yes I think so. Practice required but I’m more confident about it now than I was when first introduced to the script.

But it’s not yet over. There’s still a bit more work required in adding tasks and making sure they appear correctly and I believe that’s coming up next to unravel and demystify.

Making a To-do list application with Javascript. #2

Looking back!

In the first of my series of blogs on making a To-do list application with JavaScript, I began by talking about selecting events using JS methods such retrieving an element by it’s ID value or name attribute or just by it’s element name.

I also explored the topic of event handling and making something happen as a result of some user interaction like a click event.

Finally I broke down various sections of the application into functions ready to be called later.

All of which was a nice simple start to the development of this application. From here on, it gets a little trickier. Now we start to delve a little deeper into concepts like “binding” and traversing to access the elements we need.

This was one of those moments in my Treehouse education where I began to experience brain rot and perhaps not taking properly what I was being taught. Everything always seems that little bit better to understand.

There are 3 new aspects to the script I’m focusing on tonight. A function and 2 for loops.

Staying functional

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
 console.log("Bind list item events");
}

This is a function that takes 2 parameters. I’m not entirely sure what these are for at this point. In fact, as an experiment I took them out and it had no effect on my code so far. I can only assume they’re going to be really important later on in the program and they’re here for ease of reference who whoever is programming it. But for now, it’s just a variable within which is assigned a function with 2 parameters logging a simple message to the JavaScript console.

Going loopy for traversing

Next up we have a couple of for loops in which a fair few things happen.

for(var i=0; i < incompleteTasksHolder.children.length; i++) {
 bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

In the DOM Tree. Elements can be parents or children of another element. Moving around the document from one element to another is known as traversal or traversing the DOM.

At the top level, by my understanding, the unordered list element that has the id “incomplete-tasks” is referenced by its associated variable, and then Traversed or to put another way moved so the elements we want can be searched. If we’re searching an element, we can often assume it has multiple children. The children. property is an HTMLCOLLECTION compatible property which means we can search it like an array.

So much like what happened when addButtons was selected in part 1, So in this example. it’s referencing a list of incomplete tasks in list items which are .children of an unordered list. (child elements of an unordered list).

It’s also a little clearer in my mind what’s happening in the for loop. If you spend a little more time scanning and matching the names to the variable names you can see how the script comes together.

 bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted)

bindTaskEvents is the reference to the bindTaskEvents function with the 2 parameters. Inside the brackets the unordered list element is passed in via the reference it of its variable name.

It is then traversed with the children property.to element incompleteTasksHolder. the i is array index of of the list items which is our collection of HTML elements. It is bound to taskCompleted by passing through a reference to the function in a similar way.

The key difference as I understand it is that bindTaskEvents is the “glue” that binds the different interactions of our task list, editing, adding, completed tasks etc. Or it will be when the function is completed.

We’ve already used incompelteTasksHolder when we selected with getElementById. So we’re not really doing anything new. Now we’re referencing it again in order to traverse it to cycle through its list item children.

A similar thing happens in this second function. Spot the difference.  One function binds the function for incomplete tasks in the to list, the other, binds the functon for complete tasks.

 for(var i =0; i < completedTasksHolder.children.length; i++) {
 bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
 //select its children
 }

And that’s it for tonight. The console output for the code is as follows.

(2) Bind list item events app.js:58
Bind list item events app.js:58

So another breakthrough I think. I struggled enough getting this far first time round. Experience tells me though that the program gets even tougher later on but I’m already feeling confident that these blogs and this approach to practice will help demistify this application even further.  🙂

//Problem: User interaction doesn’t provide desired results.
//Solution: Add interactivty so the user can manage daily tasks.

var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementsByTagName("button")[0]; //first button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
var completedTasksHolder= document.getElementById("completed-tasks"); //completed-tasks
//Add a new task
var addTask = function() {
 console.log("Add task...");
 //When the button is pressed
 //Create a new list item with the text from #new-task:
 //input (checkbox)
 //label
 //input (text)
 //button.edit
 //button.delete
 //Each elements, needs modified and appended
}
//Edit an existing task
var editTask = function() {
 console.log("Edit task...");
 //When the Edit button is pressed
 //if the class of the parent is .editMode
 //Switch from .editMode
 //label text become the input's value
 //else
 //Switch to .editMode
 //input value becomes the label's text
 
 //Toggle .editMode on the parent
}
//Delete an existing task
var deleteTask = function() {
 console.log("Delete task...");
 //When the Delete button is pressed
 //Remove the parent list item from the ul
}
//Mark a task as complete
var taskCompleted = function() {
 console.log("Task complete...");
 //When the checkbox is checked
 //Append the task list item to the #completed-tasks
}
//Mark a task as incomplete
var taskIncomplete = function() {
 console.log("Task incomplete...");
 //When the checkbox is unchecked
 //Append the task list item to the #incomplete-tasks
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
 console.log("Bind list item events");
 //select its children
 //bind editTask to edit button
 //bind deleteTask to delete button
 //bind taskCompleted to checkbox
 
}
//Set the click handler to the addTask function
addButton.onclick = addTask;
//cycle over incompleteTasksHolder ul list items
 for(var i =0; i < incompleteTasksHolder.children.length; i++) {
 bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
 //select its children
 }

Making a To-do list application with Javascript. #1

Treehouse has given me the drive to attempt, not for the first time to gain more understanding of what it is to program.  Something; mainly confidence issues has always knocked me back and I’ve talked about this a few times before.

Treehouse brought out a new course recently called Interactive Web Pages with JavaScript.   A great tutorial in making a To-do list application using pure JavaScript. An example of actual use of JavaScript in an fun way.  Looking back, I think this might be the first time I’ve actually put a full on web application together in a programming language and all with the help of fellow Englishman Andrew Chalkley and his JS course.

But it wasn’t all plain sailing. It’s a pretty intensive and at times brain melting road to the end and of course once done you’re encouraged to enhance the application and your skills to make it do more; to go the extra mile.  Except, I didn’t feel I was ready.

I spent hours of debugging time and hours typing the code but never felt I’d really understood it.   So here I am again. Eager as I am to move on and finally learn a bit of Ajax, I thought I’d take a pause and start a series of blogs on the subject of Interactive Web Pages and see if I could bring the wisdom of the Treehouse experts to my own brain and to the written word and make sense of what is a fun interactive program.

The Building Blocks

I’ve already touched upon the Prepare, Plan Perform and Perfect approach.  But at this point I’m familiar with how the application works, or will work.  So zipped straight ahead and started following along without the the preparation comments and followed on meticulously with the video.

I have something of a handle now on selecting elements and finding out how to the locate them with the API.  I learned the difference between the JavaScript programming language and the Application Programming Interface (API) that supports it.

What we do to begin the program first is to select the elements dynamically by assigning them to variables. This is done by accessing the Document Object of the interface and searching the given elements by certain criteria.

Example.

var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementsByTagName("button")[0]; //first button
var incompleteTasksHolder = document.getElementById("incomplete-task");; //ul #incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); // completed-tasks

Here, HTML elements are accessed element ID, by tag name with specific access via an array index.  getElementById and getElementByTagName are methods used by JavaScript that take string values corresponding to the value of HTML attributes.

So to get the value of the taskInput variable you reference with either a class or an id depending on what it wants.

<p>
 <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
 </p>

Breaking it down again

Simple enough so far.

We then simply create as many functions as we need for all the interactions we’ll need to perform in this To-do List application. We’ll need for example to click a button to add tasks. to the list.  We want to edit task currently on the list. We want to delete task on the list. We want to mark certain tasks as complete, and likewise mark completed tasks as incomplete.  Those last 2 are probably the most difficult parts of the code.

But for now all we’re doing is breaking down and compartmentalising different parts of our script.

var addTask = function () {
 console.log("Add Task!"); }

And likewise for deleteTask, editTask, completedTasks and taskCompleted and taskIncomplete. When each function is triggered, for now all it will do is print a message to the console so that we’re sure the function is correctly configured.

Handling things

The next step of my learning process was getting a handle (pun intended) on what exactly event handlers are and how to use then.

Were they the different lines of code you put in a function and hence how you handle what the function does?  Is it a simple function call? Well apparently it’s neither of those.

An event handler is a trigger of an action, in this case a function, based on how the user interacts with the application.  It could be a mouse click or the press of a button on your keyboard. They’re the most common ones. And in its simplest form it looks something like this.

addButton.onclick = addTask;

Where addButton is the reference to the variable that holds the element we want to interact with.  In this example it’s the button element we click when we want to add a new task.

Where .onclick is the event handler. We’re performing a click event on the add button. Do something when the user clicks the mouse.

addTask is the reference to the function we want to perform. It will perform whatever task you tell the browser to execute by giving the correct function name and is assigned using the assignment = operator.

And for now it is a simple as that. But we haven’t really got starred yet.  I intend to put more hours in getting used to the more complex aspects of this program and hopefully when I do, I’ll be far more confident in putting these skills to the test new programming situations.

Prepare, Plan, Perform, Perfect with jQuery.

In my latest blog, I wanted to do another code run through. Not necessarily to help me memorise code I’m about to show, but to help me think in the way a jQuery programmer should. To break down a problem, think about the methods needed to solve the problem and become more comfortable with those techniques.

One of the things I have to get over is my tendency to just give straight into a project, without thinking about a plan. Call it brave, call it naive, call it stupid, it’s my default setting. I have little sense of planning, preparation, performing and perfecting and when I say that I don’t mean sense of the importance, but of the doing. I just jump straight in like a swimmer jumping in the pool for the first time without swimming aids.

This little project is a jQuery driven responsive menu. On the face of it, it’s a standard HTML navigation menu, nothing else. That’s because the HTML for the responsive mobile part is actually added dynamically thanks to the magic of jQuery.

How does that happen?

Plan

Firstly the planning. This example takes a lot of planning, and it was a little daunting having to take this all in at first. Just for the planning stage. But

 

//Problem: It look gross in smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation

Once that is done, you then break the task down into steps.

//Create a select and append to menu
//cycle over menu links
//options value is the ref
//options text is the text of the clear Interval
//append option to select

//Create button
//Bind click to button
//go to click to go to selects location.
//modify CSS to hide links on small resolution/widths
//Also guides select and button on harder resolutions/widths
//Deal with selected options depending on current page

These steps then form jQuery code as the output. With practice, you might be able work out for yourself what the correct code should be. Or failing that, you can work it out by looking at the jquery documentation. api.jquery.com.

It’s not a cheat, although it might feel like it, it often does to me. It’s what the documentation is designed for. With the steps broken down, you can work out the steps into actionable code, like working out the pieces in a jigsaw puzzle.

If you know you want to add something to an element or object, you can find it from the documentation. If it’s possible in jQuery you’ll know from the documentation.

After a bit of time, the documentation is beginning to feel a little less daunting to me. It’s a bit easier to not get bogged down by seemingly endless lists of jQuery methods. What I want to do, is to be able to teach my brain to think about a problem, have the confidence to think what can possibly be done to fix a problem, which method, and how it can be adapted to each unique problem. This is the approach Anderw Chalkley takes on Treehouse and my jQuery confidence is growing! 🙂