Today we worked with a common email inbox template feature: selecting multiple items between two clicked items while holding down “shift”.
In today’s exercise, we were prompted to try and figure the whole thing out on our own before following along with the video. Despite my doubts, I went ahead and took the steps I knew I could. First, I read through the starter code to get the lay of the land. We had input tags with the “type” of checkbox, and we had a CSS pseudoclass of “:checked”, which was applied to the associated <p> tags. This applied a line-through effect and background color change when the neighbor checkbox was ticked.
Next, I thought through the essence of the problem and a few ways in which I could address it, which I jotted down by hand. I thought maybe it made sense to organize the inputs numerically, so that we could set some sort of “span” between the two clicked boxes that would apply selection and “:checked” styling to the items between. I knew this would involve adding some sort of event listener for holding down the shift key, and I read through some articles about “onkeydown” and the keyboard event “shiftKey”. I tried recreating these effects in JSBin and CodePen, however, whenever I tried using “e.shiftKey”, I received a type error which said that it couldn’t be read. Unfortunately, even when copying/pasting W3 “Try It Yourself” exercises into JSBin, I got error messages. Time to check out Stack Overflow and see what the people have to say!
Upon a fairly quick Stack Overflow skim, I’m starting to see the pieces my initial thought process was missing. My idea to assign numeric values to the input items would actually result in pretty “fragile” code, which could be affected by any small changes made in the HTML. I’m going to go ahead and work through with the video now, and see what I can glean.
- There is a built-in “.checked” property in JS for when an input tag with the type of “checkbox” is, indeed, checked, and you can use it to produce a boolean value. Once you have the true/false, you can use it as condition in related functions, like whether to fire a function on a click or not. In this project, we wanted to fire handleCheck only when the box was not checked to begin with.
- It will be helpful for me to practice writing out pseudocode for these exercises moving forward. Wes writes pseudocode as we go through the projects and while I’m not confident yet that I can get the code syntax and elements completely right, I think I need to start prioritizing my own thought process as I approach the problems. This exercise has been illuminating!
- Here’s the daily edition of the most baffling code block! It was the function that assessed for the first and last checked checkbox, then applied a variable of “inBetween” to the items between the two. I found it helpful to write out the forEach() syntax by hand, so that I could understand better how the “checkbox” is used almost like an object (I think?) in the forEach() method, and could therefore be referred to as “this”. Setting inBetween to equal its own opposite has me a bit muddled though — I suppose it’s just saying “if this condition is true, set inBetween(which is currently false) to true”.
- “inBetween” was referred to several times as a “flag variable”. I feel I could benefit from looking into this term more closely!
Revisiting a topic from Friday’s post, I looked a bit closer into the Fetch API .then method, but I’ve realized I could spend several days (and likely several *ahem* years) learning about server requests, responses, promises, etc. Because JS30 sometimes feels beyond my current skill/comprehension level, I’m going to leave myself a resource about fetch .then right about here, and move on to my foundational JS classes for the afternoon.
Here’s my commented code from today’s challenge! Back tomorrow!