Watch This Week’s Episode On Our YouTube Channel

Video Transcript

Welcome to Learn, Love, Live, Code – a show where I teach short coding tutorials in 5 minutes or less! This week, I will walk you through adding some style to dropdowns using CSS3. Then, we will create a JavaScript object including a key value pair and loop through the object to populate our dropdown with both value and text. Finally, we will implement some ninja error handling to make sure our sort function runs properly.

The code for the static web page we will begin with in this lesson is the code we ended with last week. You can also the code from the transcript of this episode on my blog at HoffsTech.com/learnlovelivecode. The links for all of these things are also in the description for your convenience!

First, let’s create a new CSS class called dropdown-control. In this class, we will set the height and width of the dropdown, then the padding (8px applies to the top and bottom, 16px applies to the left and right), font-size in pixels, and a transparent border to give our dropdown a flat look.

Remember to apply the .dropdown-control CSS class to each select tag.

In the populateDropdowns function, change the options array to a JavaScript object using key value pairs for each Superhero. The key will be used for the object tag value attribute and the value will be used for the inner text.

Now that we are using a JavaScript object and not an array, we need to change the second loop to var item in options. This is a best practice because the for…in statement iterates over the enumerable properties of an object. We can set the option tag value attribute by adding option.value = item. To set the inner text, we need to change option.text and make it equal to options[item]. This will return the value from the key value pair for the current item.

Save and load your web page in a browser just to make sure the dropdowns are populating correctly. Right click on any of the dropdowns and select inspect element. Here you will see that our dropdown options now have a value as well as the inner text. In the real world when you are populating dropdowns using data from a database, it is a best practice to pass the data between JavaScript and the database using the value attribute vs. the option text. Let’s look at an example of what I am talking about in the sortHeroes function!

First, move the options JavaScript object outside of the populateDropdowns to make it a global variable because we will use it in the sortHeroes function. In a real world project, you would create the JavaScript object from data in a database which you would only want to do once in the global variables to reduce page load time.

In sortHeroes, change the dropdown text variables to value because we want to match the options based on the value and not the inner text.

Change the second loop to for (var hero in options) to iterate through the JavaScript object options. And then change heroesArray[i] to options[hero] to output the value from the key value pair for the current item. But wait, we also need to make sure the current value from the key value pair equals the current item in the heroesArray. So, we need to add an if statement making sure they are equal. And just for good measure, let’s discard the value if the default option is selected. We can do that by adding an else to our if statement and removing any default options from the array using the splice method. We’re passing some parameters here including the current index and the number 1 which will result in the removal of 1 item from the array.

Next, we want to alert the user if they have not selected at least 2 Superheroes to sort. Let’s add an easy if statement to take care of that for us! We only want to output our sortedHeroes string to the sortResults div if there are no errors so we will put that inside of our if statement checking that the heroesArray includes more than 1 item. Then in our else statement we set some text for an alert.

Save and load your page. Test this a number of times selecting a different number of Superheroes from your dropdown. As you can see, we have improved the user experience a great deal by anticipating user error and accounting for it. Next week we will continue to add to this page and error handling. What would happen if the user selected the same Superhero more than once? We should account for that! Have a great week and Happy Coding!

Completed Code

Have a great week and Happy Coding! #LearnLoveLiveCode