Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
The repeater is a popular interface within a WordPress meta box. It allows your client to dynamically create new custom fields for a specific piece of content. In this hands-on lab, you’ll dive deep into JavaScript as you build your own repeater from scratch.
This is our last task. We need to change the icon when clicking on the visible message. You’ll use the jQuery.data() construct to grab the data attributes off of the icon element. Hum, we originally coded those attributes onto the visible message. Let’s rethink that. It makes more sense to put them onto the icon element. Why? It’s easier for us to get the values in our script. Then you and I will work through the rest of the change icon function. And you get to learn that JavaScript doesn’t wait for functions to get done before running the next […]
Okay, now it’s time to talk about the sliding animation. You learned the basics of .slideUp() and .slideDown() in Episode 7 of the Introduction to jQuery lab. Let’s explore the options and see what these constructs do to the inline CSS for the elements.
Let’s talk about how we check if the hidden content is showing or not. You’ll use the is.(‘:visible’) jQuery construct. You’ll see the difference between using visibility, opacity, and display to set the content is hidden. There is a difference.
The way we setup the HTML markup, the elements line up one-to-one. Therefore, if we grab the index of the clicked element, then we will be able to grab each of the needed elements. This strategy allows us to reduce our code as well as minimize hits to the DOM. We can go fetch the elements we need when the page loads and store those into a variable. That means, we don’t have to traverse the DOM on every click event. You’ll also get a quick explanation of this in JavaScript.
Let’s build the code that runs when the visible content is clicked. You’ll start by thinking about everything that needs to happen. Let’s lay out the sequence. Then we’ll start building each part of it. In this episode, you are rewriting a little bit of code. It’s a good exercise in the plugin development thought process. As you develop, you want to think about how to improve your code.
Let’s do some refactoring to make our JavaScript easier and remove the redundancy. The script doesn’t care that one is a marketing teaser and the other is a Q&A. Right? The script handles both of the same way. Why? Both will slide down to reveal the hidden content upon clicking the visible part. The animation and changing of the icon will be the same. Therefore, let’s do some refactoring. You’ll change the class attributes to serve both the styling and JavaScript. And let’s talk about the thought process as we do it.
In this episode, you will create the jQuery script file and build the basic structure. You’ll code the IIFE, initialization function, and each of the basic functions. Then you’ll cache the elements into variables. You’ll learn about mapping a click event to a function and passing additional data to it. Let’s get started working and learning about jQuery and JavaScript. I’ll also share my process on defining functions and laying out scripts. If you need a refresher on function definitions, go back and watch this episode: Functions – Introduction to jQuery (and JavaScript).
Let’s figure out what we need our jQuery script to do and how we want to accomplish each task. We’ll talk about how to write more performant code, caching DOM lookups, and using the index of the clicked element to go grab the rest of the elements without having to search the DOM again. If you need a refresher on jQuery, go back and watch the applicable parts of this lab:
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.