HTML JavaScript: Color Input, Date Input, Data-list Autocomplete

In this video we look at some HTML and JavaScript that demonstrates 1) an input of the type color, 2) an input of the date type, and 3) an input of the text type used in conjunction with a data list to create an autocomplete functionality. We connected all of the inputs to JavaScript functions by using the addEventListener method to connect code to the input event. We display the default input of the color input, but also parse that input so that we can work further with the user-selected color choice. Likewise, we show the default date input, but also parse it to get more mileage out of the user's date input. We have two versions of the text-input/data-list combination. In the first the data-list options are hard-coded in HTML design; in the second version the data-list options are added dynamically in JavaScript code.