Weekend Reading - JavaScript30 - 30 Day Coding Challenge

30 Day Vanilla JS Coding Challenge
For Beginner to Intermediate developers and designers who want to become comfortable with both JavaScript fundamentals and working in the DOM without a library.

https://javascript30.com/

These videos are free as a thank-you to everyone who has supported my premium courses as well as because I believe in giving back to the community. I see a huge need for these videos and I really think it will help many of you become comfortable creating with JavaScript.

8 Likes

Hoping that at least a few are taking advantage of Wes Bos’s free challenge. I’m going through it rather slowly, but daily, at any length. Finding it highly enlightening having very little ES2015 or ES6 under my belt. Very much an eye opener. Loved the Flex build in Day 5 (yes, I know this is CSS). Awesome stuff that is right at our fingertips, with no external libraries.

In Day 6, I noticed that once we’re done viewing a result, if we empty out the search field we get the entire data set (1000 lines) displaying in the browser. The change event is still firing.

Rather than preclude it, since it is useful to have as an artefact, I added a reset to restore the original suggestions. It took two steps, of course.

The callback:

function resetSuggestions() {
  // permit reset when entire db is displaying while form is empty
  if (searchInput.value === "") {
    suggestions.innerHTML = '\
      <li>Filter for a city</li>\
      <li>or a state</li>\
    ';
  }
}

The listener:

searchInput.addEventListener('blur', resetSuggestions);

To reset the suggestions, clear the form, (this will present the full list), then click away from the form. This will restore the opening screeen.

Inspect

    <ul class="suggestions">
      <li>Filter for a city</li>
      <li>or a state</li>
    </ul>

Very much looking forward to moving along with this. It’s been a great ride so far and I certainly hope more folks will join in on the fun.

2 Likes