Web Forms 2021 - Part 7: Advanced Form Controls (progress and meter bars, range sliders and more) | Clyde Matthew | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Forms 2021 - Part 7: Advanced Form Controls (progress and meter bars, range sliders and more)

teacher avatar Clyde Matthew, !false | funny, because its true

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

33 Lessons (2h 38m)
    • 1. Class Introduction

    • 2. Non input form controls

    • 3. Textarea - intro

    • 4. Textarea - common attributes

    • 5. Textarea - resize property and summary

    • 6. Textarea challenge 1 - valid, invalid, not and placeholder

    • 7. Textarea challenge 1 - solution

    • 8. Textarea challenge 2 - intro

    • 9. Textarea challenge 2 - solution

    • 10. Dropdown controls and the select element

    • 11. The autocomplete box (datalist element)

    • 12. Autocomplete attribute

    • 13. The datalist element - 2 important points

    • 14. The datalist element - an example

    • 15. Datalist element vs select element

    • 16. Dropdown summary

    • 17. The output element - intro

    • 18. The output element - the oninput event

    • 19. Output challenge 1 - multiplication

    • 20. Output challenge 1 - solution

    • 21. Output challenge 2 - intro

    • 22. Output challenge 2 - solution

    • 23. Progress bars - intro

    • 24. Progress bars - more detail

    • 25. Meter bars - intro

    • 26. Meter bars - more detail

    • 27. Meter bars vs progress bars

    • 28. Progress bars challenge 1 - intro

    • 29. Progress bars challenge 1 - solution

    • 30. Progress bar form challenge - intro

    • 31. Progress bar form challenge - building our HTML and CSS

    • 32. Progress bar form challenge - adding JavaScript

    • 33. Class Outro

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


What we cover in this particular Class?

We cover of ton of information in this entire forms series, but for Part 7 I'm going to teach you about some practical and advanced form controls.

Up until now, we've looked at (1) the form wrapper, and (2) the <input> element. We've spent an incredible amount of time talking about these 2 form HTML elements.

But for good reason.

At this point, you should have a solid foundation. You should understand:

  • why we wrap all of our form widgets within the <form> element
  • the 2 most popular attributes you'll see on the <form> element
  • what the <input> element is and why it's so powerful

It's now time to venture outside of the <input> element and discover some new exciting form controls that you can use to enhance the UI and drive traffic to your sites.

In this 7th Class we are going balls to the wall.We will be talking about:

  • progress bars (indicator showing the completion progress of a task)
  • meter bars (a gauge)
  • range sliders
  • autocomplete attribute 
  • dropdown controls
  • <textarea> element
  • and a bunch more!


I am super excited. 


--- in case you're wondering, this entire series is about web forms. 


A web form is also known as an HTML form. It’s a place where users can enter data that’s then sent to a server for processing. Web forms allow users to place orders on your site, to provide their name and email address to sign up for a newsletter, or to sign up as a member to your site and so forth.

What’s really great about web forms is that there is no “one size fits all”. You can use your artistic flare, and personal business acumen to create web forms with a particular length, format, content type and appearance.

By doing this course, you’ll be able to improve your web form usability, which will ultimately enhance user experience and get website visitors excited about completing your form and converting.

Why is this course so important?

  • Forms which are on point present an opportunity for a company to grow and capture loyalty.

  • A form can often be both a marketing tool and a necessity. A form that puts the user at ease, that evokes feelings of trust, will get filled out far more often than a form which looks (or is) complicated and confusing.

  • After completing this entire Skillshare series, you will be knowledgeable, confident and the “go-to” person for forms.

Let me share my form building skills with you

Understanding how forms work will equip you to become an awesome front-end programmer. Learn how to implement your creative, different and dynamic ideas into your website. Master forms and you’re half way to becoming a full stack web developer. Take control through understanding. Delivering a perfect, interactive and functional form is challenging. In this series, I take a deep-dive into explaining web forms and how they work. Why do we need to wrap our form within <form> tags? How can you include a progress bar in a form? How can you customize a toggle or checkbox? Where does the data go once a user clicks on the submit button? How can you perform validation on your form? How can a user upload a file? What happens once the data arrives at the server? What are the different types of events we can listen to on forms? By understanding these questions, and many more in the course, you will be able to build advanced forms and better yet, understand the full stack process! In other words, you will be able to create dynamic forms that improve user engagement and experience.


This series is huge and comprehensive, from basics to advanced

This entire series (which I've split into multiple classes) will give you solid fundamentals and practicals regarding forms. It can be taken alone (you don’t need to do any other course) to achieve your goals. You will emerge from this course with an advanced understanding and practical experience with building forms. It will take you to the point where you will understand what method (GET or POST) to use when sending form data, how to define where the data goes, how to perform advanced client-side validation (checking errors on the form before it is sent to the server), how to write custom pattern validation rules (using regular expressions), how to run servers and how to view all HTTP request information. This is awesome knowledge. This series will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end form web development.

By the end of this series, you'll be able to “speak” and “walk” FORMS by gaining an understanding of how you can build it, manipulate it and style it in meaningful and practical ways. 

Why should you learn so much about forms?

A web form is one of the best ways to get input from prospective clients and indirectly establish a relationship with them. The time you spend in bringing the user to your website should be matched with the time spent in perfecting the user experience with your web forms. It is surprising to see so many sites these days contain complex and frustrating web forms that cause a negative experience.

Ultimately, a web form allows your visitors to get in contact with you and to send information, such as an order, a catalogue request, or even a query, which is passed on to your database.

Can you begin to see how important forms are and how their use can be escalated?

*** The most important course on FORMS on Skillshare***

Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how HTML code works behind the scenes. This is particularly true when it comes to building forms. If you’re wanting to become a full stack developer, you need to know, really know, how forms work. You need to understand how the browser URL encodes form data, how the browser sends data to a URL that you specify, and how to perform validation to ensure the user does not submit invalid data.

A unique approach

You will learn "why" things work and not just "how". Understanding advanced topics about forms (URL encoding, accept-charset, multipart/form-data, regex, etc) is important as it will give you infinite possibilities and upskill you. Armed with this knowledge, you’ll be able to create forms that are tailored to your needs, and allow the form data to get submitted to a server via AJAX. You will be able to create forms that are customizable by the user (for example, if the user wants to change the color of the form theme). You can create a control on a form that displays the progress completion of the form and displays messages to the user along the way.

Can you begin to see how pivotal forms are and how important having knowledge about forms is?

How is this Skillshare course different?

There are lots of courses on Skillshare that focus on web development. Many never get into the detail about how HTML forms work behind the scenes – a skill that every full-stack developer needs to master in order to utilize potential.

In this series, I focus on the more advanced topics of true web development when it comes to forms. This includes understanding what all of the attributes on the <form> element mean, understanding the different <input> types in detail, what URL encoding is, and how data is sent over the wire to a server.

Practice makes perfect

Theory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this entire series.

Is this course for you?

Absolutely. If you fit in any of these categories then this course is perfect for you:

Student #1: You want to advance in the world of programming.

Student #2: You want to know how successful developers build dynamic forms that engage with the user, have high conversions that put them ahead of the competition.

Student #3: You want to gain a solid understanding of how forms really work

Student #4: You want to start using backend technologies like Node or PHP with forms


Right this second, your competitors are learning how to become better web developers.

Web development is a blazing hot topic at the moment, and in the foreseeable future. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.

Lets get started.

See you in the lectures.

Meet Your Teacher

Teacher Profile Image

Clyde Matthew

!false | funny, because its true


Ideas are a dime a dozen. The hard part is execution. Unfortunately, most people never carry tasks to completion.


I've worn many hats in my career …  As a result, I have an ability to view all sides of a coin, something that is becoming crucial in our tech-savvy world.  


My experience and a few words:


·        I’ve had to learn things the hard way (aka: hard slog)

·        I want to teach people what I’ve learnt, with the hope of making a meaningful impact (cliché, but true)

·        No one is a master of everything. But at the same time... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Class Introduction: Woo hoo, I'm excited. I'm so excited because this is going to be a fun class. My name's slide, I'm going to be your instructor. In this class. We are going to look at really cool form controls. But for the first time in this entire form series, we're going to step away from looking at the input elements. What I know, I know crazy, right? But you'll see they are plenty of other form controls and widgets that really do enhance user experience. Things like progress bars, meta-bias, even the text area elements that will be very useful. The tada list element. And of course along the way we're going to be discussing certain attributes like the autocomplete attributes and what that does. So this clause is going to be full of interesting information. That's gonna be a lot of fundamental way. It doesn't matter how experienced job coding, whether you're just starting out or the experience, trust me, you will be able to follow along and you will learn something new. So without further ado, let's get cracking this. You know. 2. Non input form controls: As I just mentioned, this section is all about other form widgets. And by other, I just been formed widgets other than the input element. And I know I'm sounding like a broken record, broken record, broken record. But we've learned and studied the input elements in a lot of detail, but we've only touched the surface. So now it's time in this section to look at the non input form elements like what Clyde, like text area which you've seen already, but the others, what about doubtless select elements? I'll put elements. In fact, you've seen output elements, things like option groups and progress bars and meet the bars. It's going to be really, really interesting. So without further ado, let's get into it. 3. Textarea - intro: Welcome, welcome, welcome. We're going to start off with the very cool form control called text area. And it starts right at the basics. What is it? You might be thinking, why do we even need a text area when we have the input of type text? And that's a valid question because the text area is like a text input field. But it's on steroids. It's just way bigger and better. So why might it be useful? Or you may want to use a text area when you want users to enter sizable amounts of free form text. In other words, you don't want them just to have a one liner. You might want them to leave a review, a comment, told a story, et cetera, et cetera. That's when we might want to use a text area. And remember, we using the text area element rather than using the input elements. This is not an input element, but you already knew that they also nuances with the text area. The first one is that it does not support the value attributes. And why doesn't it support the value attributes? Well, we don't need it because the only reason you put a value attribute when the page first loads is to put a default value associated with that widget. But we can do that by inserting content in between opening and closing text area tags. I'll show you what I mean in a second. Don't worry. The other nuance with text area, and this one isn't a biggie, but text area is a CSS replaced element. What is that? Don't worry, don't worry. Let me explain. I replaced element is an element whose representation is outside the scope of normal CSS. And example is any tag that has its content replaced by an outside source, common tags or image iframes, videos, right, was an image. We can't take css and start changing the color attributes so that image, for example, because its content comes from outside of the document, it's replaced. In other words, but you might be thinking this text area doesn't really have replaced content and you write. Replaced elements are also those that have predetermined intrinsic dimensions, like width and height. What, what does this mean? That the text area is a replaced elements. Normally replaced elements are harder to style CSS, but with the text area, as we'll see, it's very easy to start with CSS. We can pretty much do anything we want. Kind of a weird one to me because it's defined as a replaced element by MDM. But it's like not really fully replaced element. And I think the only reason MDM are defining it as replaced element is because it has intrinsic dimensions, right? The input just shows up and it shows up with a certain size that's kinda of suitable for a few lines of text. And this happens by default. We don't have to apply any sizing properties to it. And this doesn't mean that you shouldn't add other attributes and you shouldn't apply CSS to it. That just means the browser renders this input type, sorry, not input type, this element with a predetermined science by default. And this is not unique to the text area element. Look at an image element, for example, when you load an image called your Image.all, for example, we know that your JPEG file will be loaded onto the page and that image tag will be replaced by your image dot JPEG. And the size of that image will be its natural height and width dimensions. So then Clyde, why do we even care that this is a replaced element? Or in this instance we actually don't care, right? But they are few subtleties that we need to bear in mind when it comes to CSS replaced elements. And the biggest one with regards to the text area element is that we cannot use CSS pseudo elements before and after. But for other elements that can be quite important. For example, wouldn't it be cool to auto captions to all your images? We've got the information in the alt and title attributes anyway, right? So in theory, if it wasn't replaced element we could access the inputs of the pseudo element like this, and we could then access its content property. And in that content property, we could put the content of the alt attribute in there. There would be cool in theory, but we are not allowed during this because it is a replaced element. Anyway, Hi, I'm babbling way too much on us. Let's hop back into the lecture. So there we go. It's kind of a weird one because it's a replaced elements, but it doesn't really have that much implication for us, the fact that it is next element. The other cool thing with the text area is that it has a drag handle to resize the box by default. And before we move on to the next slide, I just, I need to mention one more thing you would think, because the text area has an opening and closing tag, that we could place rich HTML content in between those tags. But we can't. Medea students, in fact, plain text will always be rendered with an element. Let me show you. This is all I mean, when I say that only plane takes can be rendered within a text area. Here we go. Here's a index file, and this is create a text area. We don't need any attributes. Writers just delete everything. And of course, random text. Let's save this, refresh the browser, and there we go. Plain text inside of the text area. Pretty straightforward. But now you would think because we've got an opening tag and a closing tag, it, we could insert any rich HTML elements. For example, what about if we want to, I don't know, put a nice hitting in yeah. Saying welcome. And then maybe below that we have a button of type submit Segments. What happens? Well, let's save this. Refresh and look at this. Really doesn't do anything. Just basically spits out the HTML text, but it doesn't actually render it in any useful way. So that's what I mean by that. The other thing worth mentioning, and I did mentioned already is at this text area is a CS is replaced element. Then it's just means, for example, let's just have here an HTML file head style. And in Let's have a body. And this just put our text area within there. This is what I wanted to show you. Just one kind of nuance with SES is replaced element. If we have a div, an empty div, we can target CSS pseudo elements. When it comes to that div. For example, we can talk at the div and we can effect it's after pseudo elements. And we can just put in some content after death. Then if we save this and refresh screen, we actually see that content on the screen, on the viewport. They are a few nuances with using after pseudo elements. For example, I can't copy icon, highlight this off the div text. It's just the text within a text area we can highlight. Okay, But anyway, this is what I wanted to show you. I wanted to show you that we cannot do the same with text area because it is a replaced element. For example, if we target the text area element and we try and do the same thing that need a space after that. And for its content, let's just say booth. If we save this, refresh the page, there is no boom. And a bad joke. But it proves my point. My point is we cannot, because it's the CSS replaced element, we cannot target the often before pseudo elements. I know this was a very interesting break, but let's jump back into the lecture. So there we go. I mean, that's the text area elements. It's not that confusing as it. 4. Textarea - common attributes: It's time to move on to our third topic. And that is I want to discuss the important attributes when it comes to the area element. As you can see, a put five very important ones on the screen. Let me just quickly briefly touch on each one. Firstly, we've got the coals attribute. What does that about? Very, very simple. Goals just specifies the visible columns. In other words, the width of the widget, the default value is 20 characters. And what's just in case you were wondering? That's Coles. And rows is pretty obvious or forbidden. You have to go into this, but it specifies the visible rows, aka the height of the text widgets. And the default value for that is two rows. Let's calls that's rows. But what is this rep property? That looks very weird. The rep property refers to how you form should react when words reached the end of each row in the text field, and they are a few different values. This rep property. Firstly, we can set it to off. And if you set it to off, basically your words are just going to keep going in one long line for a very, very long time. Not very great as it. That's the first value you can sit for your rep, attributes. The second value you can sit for your attribute is soft and this is the default value. What does it look like? Well, it just looks like this. If we have lorem ipsum text that basically just reps an entire word onto a new line when it cannot fit into that area. Make sense, right? And in the other value we can have is hard, soft, which is default. And then we've got hard. But if we look at this in more detail and if I show you what it looks like, it kind of looks exactly the same as soft, doesn't it? I mean, we can see it's also taking a whole word and it's putting it onto a new line when it weren't foot. So then let me ask you the question. What is the difference between rep of soft and wrap of HOD will let me show you an example. This just have three lines of nice pretty words and compare soft and hard rep. And let's do this by hopping over to the console quickly. I just want to submit this daughter to a server using a GET request. Let's see what happens. See how we are. We've got a very simple form with tics area inside here. And all I wanna do is compare software and hardware. In order to actually compare it, I want to submit a GET request. And we know that the default method on the form element is same as me writing this, right? And in, in order to actually submit this form, we do need a button of type. Submit. Again, I had to specify the name attribute is fat diet, it won't be sent to the server. So that was mandatory for me to do. I've just called a text. And we know this is rep, soft by default, right? It's the same as us putting the attribution of rep soft. And if we go to the browser, if we now hit Submit, what's going to happen? Let's see. We have three lines of nice words and do notice of the NYSE and off the soft. We've just got a space. We know URL encoding replaces space with a plus sign. So we can see that that's the default approach with a rep of soft. And what's interesting is if we go and type into this text area boss with Rep of soft and I hit return. When we hit Submit, it is going to submit that returned daughter to Server Summit. We can see that the return is URL encoded to the percentage sign. And we've just submitted to returns. Okay? But that's buy-in by that is rep of soft. What happens when we did our coding editor and we just changed this rep property too hot, we save it, gotta browser refresh and we hit Submit. Notice that the line breaks off the nice soft. What's going to happen? Let's hit submit. And after the word nice, we've got a return now. And after the word soft, we have a hard return. So that's really the only difference between a wreck of soft and a wrap-up hard. Quite frankly, I always just use the default rapids off. But anyway, at least now you know the differences. There you go. I hope it's making a lot more sense as you can see, the real difference is that the hard rep submits, returns, hotline breaks. That's just a bit of FYI. What's next? Well, we've discussed columns, rows, reps. It's not just at the length property quickly. What is this about? We can specify the length, the length of our text area, and it's pretty intuitive. The men length specifies the minimum amount of characters that the text area should contain. This just means by the way, that the browser does perform front invalidation. If you specify a minimum length of a story that a user has to give you as 20 characters and the only type two characters, they will not be allowed to submit the form. Also will be able to access CSS pseudo classes like invalid and valid to style the text area elements pretty useful. We've also got maxlength and it specifies the maximum amount of characters that the text area can contain. And you can combine these with other attributes. For example, you combine this with required and you have some basic form validation straight out of the box. And we do have other attributes, right? These are not the only attributes we have. We've got others that are also common to other form inputs, things like autocomplete, autofocus. Remember we discussed autofocus. It's actually not that nice. You don't want to force focusing on any widgets if you can avoid it. We've got other attributes like disabled, placeholder, read-only, required, et cetera, et cetera. Pretty, pretty intuitive. But let's move on to disgust important attributes. You've got the hang of that now. 5. Textarea - resize property and summary: So we've spoken about what the text area is. We've spoken about how it's different to the input type of text. We've spoken about the important attributes. But the other unique thing with the text area is that it's resizable. We can resize the box, that's pretty cool. And we can use the resize CSS property to define the resize functionality of a text area, you can use values such as both horizontal, vertical, none, block, and inline. And they're all pretty intuitive. So I'll let you play around with these different values on your own. Although I might have a few examples actually coming up after this lecture. And then I'll play around with some of them. I'll show you how some work. But for the most part it's very, very intuitive. Cool. I know we've only just spoken about the text area, but it's a very, very useful. And as a summary, the text area is just an input type text on steroids. You know that adage go big or go home. We know that it's also not an empty element, right? The text area takes a closing tag, but don't let this fool you. It is SCSS replaced element and we are only able to put a plain text inside of the text area. We can't insert rich HTML content, for example. The other thing we saw with the text area is that it does have useful attributes. Calls, rows, rap, length, et cetera, et cetera. And ys are very cool because they come to us straight out of the box by the browser. And finally, because it has that resized box, we can use CSS to change the resize the ability of the text area element. And combining all these things together, we get a very, very powerful and very useful form for widgets. Anyway, we've, we've covered a lot in this lecture about text areas. I think now it's time to show you a few examples of how we can use text area. And then let's move on. Let's move on to other form widgets, C now. 6. Textarea challenge 1 - valid, invalid, not and placeholder: Thank you. Thank you. Thank you for sticking with me. Thank you for your support. I hope you're having a lot of fun and I hope you're learning a ton of useful information. So here we go. Here is a very simple challenge. I want you to create a text area elements. Don't worry about some good patterns and somebody in the form, I just want to talk about styling this text area element. And you can see here we're asking the user to spin a story, something juicy. So you'll notice that we have a place holder. The other thing I want you to implement into your text area element is a minimum length. Let's just say the minimum links should be 15 characters. Now, when the user doesn't have 15 characters, I want you to target the invalid CSA pseudo-class to style the border slightly differently. And when it is valid, I want you to style it appropriately, maybe with a green border, but there's some other slight nuance and that is the full the user starts typing this form. I want the styling to be neutral, which it is not. So as soon as the user starts typing, remember I said I want us to have 15 characters minimum. Can you see we've got for red dashed border to display that it's not valid it, but as soon as we hit the 15 character mock, it, then changes to a green border, cool stuff. The user deletes everything and he doesn't want to submit the full thing, he could do so. And it's not invalid. Write. That's only if the user wants to type something where we want this validation to take place. So can you give it a go? I'll give you a hint. They for CSS words you're going to have to use, it's going to be valid, invalid. We're going to be using the not keyword in CSS, as well as the placeholder shown CSS pseudo class is going to be a lot of fun. Give it a go by yourself even if you can't do the whole thing. And I'll see you in the solution video. Ciao. 7. Textarea challenge 1 - solution: Welcome to the solution video. And I hope you learned something new. Like I mentioned, I want to use a few CSS things. I want to use the valid pseudo-class, the invalid pseudo-class. They're not keyword and the placeholder shown pseudo-class. So let's give it a go. Very simple. Start with an HTML page. We're going to need a head section in here and of course the style section. And then create a body. In the body we want to form. Don't need an action here. And first things first, let's create a label. We can have a four attributes assigned the value of story. We want the user to spin us the story. We save this, refresh the browser, we can see our label, we really intuitive. The next thing I wanna do is I want to have a text area. The name we can give story. We have to have a name attribute if we wanted submitted to the server, right? I guess, yeah, it doesn't really matter because we're not submitting this to a server. We just showing an example of styling so we can remove it, the ID just to match it up with the label. We have to use the same value we assigned in the for attribute, which was story. We save this, refresh the browser. We can kind of see everything pulling together, but they are more things I want you to do to this text area rights because if we wanting a story, the user could just type a and submit that. We don't want, that. We want a minimum length and we also want a placeholder. Very simple. We just add the attribute minlength. Remember we discussed it. And let's just say 15 characters long as fine. And let's give this a placeholder. And the place holder ticks can just be something else that you know what, it's actually a bit high. We don't need 10 rows, let's just do five. That's better, even make it a bit wider. Here we go, starting to look. But now let's start styling. The first thing I wanna do is I don't like the hard black text font color. So lets just grab our body and change the color. I just want to show you different ways to do things, which is why I'm doing this. I don't have to do this. The eager, just slightly off black, which is quite nice. It's all I want to do in the body. And you'll notice that the label is displayed inline by default. That's why spin a story is showing in the same row is something juicy as the text element or the text area element. We don't want that right, so we're going to grab our label. We want to change the display property to block. We wanted to take an entire row or by itself, and we need some margin on the bottom. I don't market so close to the text area, okay, and it's already starting to look better. Let's now just style the text area itself, takes the area. Let's apply a border, one pixel, solid, just of black. It's quite nice to apply box shadows, by the way, just adds a bit of possesses. And again, we can just do black. Yes, looking good. And remember how I said, by default is this resize property rights. The user can adjust the size of the text box. We can affect that for CSAs and it's so easy, all we need to do is access the re-size property. And the many values. Here are some I and the E is already telling us about rights. I want none. Just to show you an example, right? So now the user cannot adjust the size in any way. Or at mid-year students, I want us to use those for CSS words, which one should we tackle first, let's tackle the easiest. Let's do invalid text area. And we tackle the invalid pseudo-class. And we do that by using a colon until we do, Let's give it a border of two pixels. Dashed tomato, right? It's refresh the page. Let's start typing only one character. And we can see it's invalid because the minimum length is not 15. But as soon as we write more than 15 characters, it disappears. So it is working pretty, pretty cool. Okay, it's now target. The other CSS words and we're gonna do this all in one. It's going to be quite interesting. Why don't we take it step-by-step, okay, so if we go text area and we go valid, and we go border two pixels, solid green. As you can see it screen on the first default page refresh. And I don't want that to happen, are only one to start validating when the user types in here. And one way to do that is to say that we only want to target this valid pseudo-class. We need to know placeholder Sharon, can you see there's a place holder day, something juicy. But as soon as the user starts to type, it disappears. And we can do that Medea students by using the other two CSS words, not. And of course we want to target not when the placeholder shot. So weird when you think about it. And then of course we want to call it the valid pseudo class. So here we go. It's looks nice by default. But as soon as the user starts typing, that's invalid. But when we get to 15 characters or more, it's now got the vetted, formatted. Hey, isn't that cool, really, really fun, really intuitive. I want to show you one more example Next. And I'm going to be using a bit of JavaScript because I wanted to target the focus events that blurry veins. It's going to be really fun. Again, a very, very simple example of where it be complicated. But hopefully you know, your skills are stacking on top of each other and just getting beta and beta are giving fun and I'll see you next lecture. 8. Textarea challenge 2 - intro: Welcome to yet another challenge, and we are dealing with the text area element. Very, very useful when an E2, I'm spending so much time on this. But what is this challenge all about? Well, it's very simple and don't worry too much about the design. I just want you to understand how we can work with the veins when it comes to the text area element. They are a few things I want you to notice yet. Firstly, I want you to notice that we've got a place holder, something juicy, and we've styled it with white color. That's the first thing I want you to do. Try and do it, and try and style it by yourself. The second thing I want you to notice is that when the user selects this textbox, I click inside it. Will. Firstly, obviously the placeholder disappears, but that's automatic by the browser. But you can see that that blue background is disappeared. And as a hint, we are going to have to listen for some event that's fired when the user selects this text area and the event, I am going to listen for the solution video hint, hint is the focus events. So now we are in focus and when we are in focus, I want to remove the background color. Now. If we just lift our code as this would always stay wide. But if we now click out side of I'll close that the blue background and place holder as convex, it's returned. And in order to do that, we are listening for another event. And that other event, Alison formal solution video is the blurry, but you can kind of think as the pyruvate as the opposite of the focus of it. The focus of in fires when something has received focus and the blur event fires when that something has lost focus. So there we go. I told you it's going to be a very simple, simple example that a very useful and on that day. So anyway, I'll see you in the solution video. All right. 9. Textarea challenge 2 - solution: You know the drill, we starting with a blank index file and a blank browser, first step is we want to create an HTML file. Yes, we want to head section and within here a style section because we're going to be applying a little bit of CSS. Then we want a body. And within the body we can, you know what, we don't even need a form in this instance, all I wanna do is I want to put a text area. Let's give it a name of story, an ID of story. And let's save this, refresh the text areas, but big. Again, let me reduce it in size. Maybe make it a bit wider area. And similarly to last time is give it a placeholder, something. Okay, so there we go. Now let's just apply some styling. I'll show you how to do CSS root variables a very, very handy because you only have to change one variable and all your color scheme then automatically change. Very, very nice to do these kind of things. You define a CSS variable by the double dash. We're just going to call ours main background color. For lack of a better word route, we can actually do horrible blue. This is too horrible blood. Can, we've defined our variable, but we haven't used it anyway. Let's now grab our text area box. And let's apply some styling. Firstly, a border, one pixel, solid. Mr. Gray. It's nice. And let's then use our CSS variable. We want to define its background color to be what? Well, in order to access a variable, you type the var keyword. And then you literally type out the variable name, which in our case is main, BG color. We save that and there we go. I'll call. So obviously if you ever want to change it later on, you can very easily by just changing one variable. And what I don't like, something juicy is gray. So all we wanna do is we want to target the text area. Let me ask you, how do we then target that something juicy placeholder. That's right, we can target the CSS placeholder pseudo element, right? And we can just define this color as white and see if that works. There we go. Cool. Now my dear students, we have to get onto JavaScript. And I gave you some hints in the introduction to this challenge. We have to write all our JavaScript within script tags. And the hints I gave you is that I said they are focus and blur events that are fired by the DOM. So let me just type focus and blur events on native DOM events that are fired, right? We don't have to define these events. And Let's first deal with the focus event. Let me start off by saying that the focus event is fired when an element receives, you've got it. Focus. Pretty, pretty intuitive. All I wanna do now is I want to grab that text area, because when the user starts typing in here, I don't want that background color. So when we have focus, I want the background color to disappear. So the first thing is we have to grab this box, this text area. Let's put it in a variable by using the let keyword. We can define this variable as anything we want. Let me just call it text area, and we assign it the value of that actual text area element. We can access the document object on yeah, get element by ID. Id we gave it was I think it was story into scroll up id of story. Can you see it? So there we go. We've got our text area of naught images. Expand this easier for you to follow. Then I want to add an event listener, text area, Add Event. Got it. Now, again, that's provided to us by the Web API. And this event listener takes two arguments. One, a takes what the Vint only listening for. And that's the clue I gave you we listening for the focus event. And the second argument is the callback function. Basically it's what we want to execute when net focus event has fired and we write all our business logic within these curly braces. I have told you this before in other lectures, but when a event is fired, we get given a object and event object and usually it's put into a variable called E. We don't have to, we can call it anything we want, even Mickey Mouse. But to stick with convention, let's put it in a variable called e. I want to grab this EBIT and I want to access the target property. The target property just tells us where it came from. In our case, it's going to be that actual text area input box. We then want to access at style property on net. We want to affect its background and we want to set its background to none. Let's go to the browser. It start typing hand, how awesome is that? You have got to be impressed, how cool, how cool, right? And if we refresh the page, it's back to normal. But you'll notice if we start typing. But if we stop typing or if we delete everything and we take out of the box, we don't get that blue back. How do we get that blue bag? Well, this Medea students as when the blur event comes in handy, because the blur event is fired when an element loses focus. So all we have to do is kind of the same thing. We access our text area variable and this takes area variable. Let's actually put it, I'll put it outside at the top because it doesn't only related to the focus of it. We can access this variable again. You guessed it an even just note that this time we listening for the blur event, and you guessed it, we have a callback function. We get past this event object. On this event object, we want to access the target. We want to affect that style property. Which style that we want to affect its background color. And we wanna sit that to what? Well, if we scroll up to our CSS file, we actually want it to be this. So we can just copy that. Scroll down here, paste it, and boom, should be done. So let's go to the browser. It's not typing something. As soon as we lose focus, the background color switches back to blue. How cool Medea students and I love this stuff. I have a lot of fun. And I hope you're learning things along the way. I know we taking modular examples throughout this course. But really that's how you learn, once you learn how to effect styling on focusing beans, blurry veins, targeting the slope losses and elements. You can apply this to a vast area of recoding. So really it is going to help you. You'll see I've given a lot of fun, had been learning a time, and I'll see you in the next lecture. 10. Dropdown controls and the select element: Welcome back to another awesome nature. We've spoken about the text area elements, but now I really want to get onto some cool controls. And those are known as dropdown controls. And by dropped down, I just mean a way for users to select many different options without taking up much space in the user. Taking a step back, HTML has two broad categories or types of drop-down menus. They've got the select box and the autocomplete box. And by autocomplete box, we can either use the autocomplete attributes or we can use the smallest element we are going to be discussing the shortly. For now. Just know that in both cases, whether we use a select box or autocomplete box, the interaction is the same. Once the control is activated, the browser displays a list of values the user can select between. But first things first, let's discuss the South box and is an example of HIV. As you can see, it's very easy to create. It's created with the select element, with one or more option elements nested within it, each of which specifies one of its possible values. And if you require it, the default value for the select box can be set using the selected attribute on one of the option elements. So what this really practically means is that this option will be pre-selected when the page loads. Let me quickly hop over to the console and show you the Drove. We're just going to start with a blank file here and we're going to start coding. Okay, I want to wrap it in a form. And how does this select box work? Well, it's very, very simple. As I said, it's wrapped within a select element and it's just get rid of everything else. If we save this and refresh the browser, we can really see the brows is giving us a default kind of selection box. But nothing's in yet. So we can toggle it and click it, but nothing really happens. So there we go. That's a select element. And in order to give the user options, we use the option element. Right here. We can just give options of colors, let's say red. And we can copy this dump. And of course we can pink, blue. I know it's not a color, but let's do some animals. Hippo, Lipid, rhino. There we go. So you can see that the select box width was adjusted by the browser because it's got to cater for the largest word, in our case lipid. And you can see they're all our values. Do you remember how we can pre-select one? Let's say we want pink pre-selected. How can we do that? Right now It's just read because the browser pixel first one in the list and just displays that. Let's write, we use this selected attribute and it's a boolean attribute, meaning it's either there or it's not. Let's just put it on pink save and then look, the browser automatically selects pink critical, just a blip FYI. Let's jump back into the lecture. Make sense. I hope so. If you more points I wanna make about the select box. The next point I want to make is that the option elements can be nested inside an option group elements. Well, why would you want to do that, Clyde? Well, with the option group elements, you can visually create a group of values. The other thing worth noting with Option Group is that it can only be used with the select element. And like I mentioned, the reason you'd want to do this is because the browser six them visually apart from the other options, often by being bolded and having him displayed at a different nesting level. So they're less likely to be confused for actual options. But words are words. Let me hop over to the console and quickly show you. As I mentioned in the lecture, we can use this option group elements to demarcate headings. So I'll drop-down list. How would we, in this instance, we've got colors and we've got animals. So we may want to demarcate one heading for colors and one for animals. Give it a go and see if you can do it. I hope so. If not, don't worry, I'm going to do to get me remove myself so that unblocking the code by. Okay, so how do we do this? Well, remember we need to wrap options or nist him within the Option Group. So let's create an option element, and let's take these three colors and move them within it. Now if nested it in an option group, but if we save this, go to the browser and open it up, it's just blank. You get a blank option group that doesn't help us. In order to actually give it a name, we need to sign it a label. And the label for this, because we didn't with colors. I'm just going to say scholars. Let's refresh, open it up. And here we go. So we can see it's bolded the US economy and select colors. They know that it's a heading, three colors below. I told you it's not that difficult. Obviously, we can do the same option, group option. And we can bring these three animals in it. And now we can nested within an option group. We give this a label of animals, houses. We opened it up in the, we go a much nicer list, rather than muddling our colors and animals all into one. Now we've got demarcated headings. How awesome. Let's keep marching on. The next point on a make is that if the option element has a value, attribute in that value will be sent to the server. What happens is that value is omitted. Will a net case, the content of the option elements will be sent to the server instead. So the value attributes in a way is not needed, right? But you might find a reason to want to send a shorthand or different value to the server, then what is visually shown in the select box. And for that reason you may want to use one. Ooh, I've actually just thought of a kook trick question. Let me hop over to the console and ask you. I just thought of a really cool trick question. I guess I thought let me jump back to the console. Let's transmit this fourth. Okay, look here. So we've got our form, I've got oscillates. Let's say we've got a button here of type submit. Like I'm not worried about styling. That's got our browser. Expand US. Can you see that pink is selected? So it means when we click Submit, it should submit in our GET request. But what can you see the URL? Nothing is submitted. Why can you figure it out? Try and figure it out. Why? You know, if we select HIPAA summit, nothing is being submitted. Why? Pause the video, try and figure it out. I'll give you a hint. It's only one attribute that we need. All right? All right, I'll tell you the solution. The answer is, we need a name, attributes bright. Remember that everything gets seemed to a server. And in order to get sinful server, it has to be seen as name value pairs. We've emitted the name, so the browser, the server doesn't know what name, what information or lists that can assign anything to it. So we just need a name attributes. Let's give it a name of type. For example. Now if we go to the browser and we submit that works, the type of selection here is pink. That thing is obviously this value attributes. I mean, pink is being submitted as pink because that's the actual ticks we have between the tags. But optionally, we could have a value attribute jet, and it could be funky pink, for example. And if we go to the browser and we said that pink now instead of pink being submitted, the value attribute will be replaced in state and that is Frankie pink. I know, I know I'm covering a lot, but I'm having a lot of fun. We're almost done. My dear students, thank you so much for sticking with me. The last point I want to make on the select element is common attributes are signs and multiple. By default, the height of the select box is enough to display a single value. So the optional size attribute provides control over how many options are visible when the select does not have focus. It's the size attribute. You can also see I've put there the multiple attributes. What does that? By adding the multiple attribute to the select element, you can allow the user to select multiple or several values. How did they do that? By using the default mechanism provided by the operating system. For example, holding down Command or Control and clicking multiple values on a desktop. Let me quickly show you. We're at with that. Yeah, you know this code very well. This is the example we've been working through in this lecture. I just want to show you what the size does. So on the select elements itself, we can include an attribute of size, and let's put size of two. If we go to the browser, we can see now that what's displayed to the user are now not one option but to. And we can keep going, right? We can display five options if we wanted to write, and there we go. Obviously displaced the Option Group label headers as well. Quite interesting. So that was the size does. And then as I mentioned, we've got multiple attribute, multiple, which is a boolean attribute. It's either there or it's not. You don't have to assign it anything you don't have to say equals true. We just included the on the actual main elements. We can go to the browser. And now what's cool is we can maybe select lipid and Rhino and insipid. And you can see if we look at our URL bar, we've got lipid and rhino that was submitted. So there we go. That's how it's used. And I think this concludes the lecture on Earth, covering a lot in a short space of time. But I kind of feel you're getting good now. We've covered a lot in this course already. And that's why I'm picking up the pace or a bit hokey, having fun. And I'll see you in the next lecture where I want to discuss now autocomplete. We've discussed the select box. I want to now talk about auto-complete. See enough. 11. The autocomplete box (datalist element): Welcome back to yet another cool lecture. Now we're going to be talking about another really, really useful form widget. And that is the autocomplete box. Remember we've spoken about the select box. Now we're talking about the complete box. Both of them are away for a user to select many different options. So what is auto-completion? Well, it's a very familiar pattern at all. Web users are familiar with, you know, like we need to assert, your search engine suggests terms. When you type a new e-mail message, your mail client, like Gmail for example, they'll suggest recipients. This functionality, however, traditionally required us to use lots of JavaScript to make auto-completion work. But I've got good news for you because one of the new HTML elements is what's known as the daughter list element. And the daughter list elements brings the autocomplete functionality to the browser natively, but there are a few nuances on getting this daughter list to work. So instead of me just typing it all onto a screen, let me hop over to the console and walk you through how to set it up. Okay, so how does this daughter list element work? Well, let's start off with a very traditional text input field, right? So let's have a label. And let's say we've got a periodic table, P table. And a label can be periodic table symbol. Say the user wants to find out more about a certain periodic symbol. So I guess that's the label. And then as I mentioned, I went to a traditional input weights type attributed text. We can give its name attribute P table. And the ID has to match the four attributes name, which is also P table. Very, very simple. If we go to the browser, what does this look like? You can see it's just a plain, boring old TextField. So if the user wants to find lithium, for example, they just have to type it out. They could misspell it by mistake and it's submitted to the server. Not a very good thing, right? So we went away. That kinda helps the user. How do we do it with dollar list? Well, it's very, very simple. The first thing I want to mention is it is a HTML element, full element, meaning it's got an opening and closing tag so we can define our daughter list. So an opening and closing tag, that's the first step when creating a list. And with using a Darwinist, we can provide a list of options the user can select to complete the field. Other words, we have to wrap options in yet, right? We don't need a very yet. And I'll show you later how we can use it. And let's just put some in yet, like hydrogen. And let's maybe put a few more. You know, I don't wanna do everything here. We can do calcium, we can do lithium. I mean, we can, we can keep going right? And we can have excitatory hear this in and of itself does nothing. Let's go to the browser and ASHRAE, nothing has happened. Rats can type, start typing. Lithium doesn't help the user. And this is the nuance that you have to remember when it comes to the daughter list element, the daughter list element has to have an ID. So let's first put an ID and let's call this ID table lists. So these are the other list. It's got an ID. Again, this does nothing or the browser, nothing happens. In order to associate this with this input of type text, we need another attribute. This attribute is drumroll, the list attribute. All right, so we've got this list attribute and we have to assign it to the same value of the id and the daughter list, okay, which we've called PI table list. So just remember, the list has to match the ID. Now we've linked to in HTML. Really cause if we go to the browser, now, we've got help from the browser HOCl. So if the user starts typing lithium, the agar, the user can just pre-selected. How awesome is that Medea students? Now they're bad, we're not quite done is something else I want to show you. You notice on here with all our options, we don't have any value attributes and we can put Valley attributes on here. For example, for hydrogen, Let's have H, for calcium, Let's have CA, for lithium. Let's have Ally, and for silicon, Let's give it a value of, I guess we're interested is same thing. Now if we go to the browser, check what happens, right when you've assigned a value, which is kind of a shorthand version. So the user can start typing hydrogen when they selected only h as shown in the box. So this might come in handy. For example, if the user knows the word hydrogen but doesn't know the code is H. Or if the user knows lithium, but doesn't know the code is Ally. So you can see that there might be some very useful cases for you, including a value attribute on each option. So there you go. That's the autocomplete box covered. Hope you have a lot of fun. And let's march on. We still got a lot to cover. Sienna. 12. Autocomplete attribute: That's the daughter list element, makes sense. But we haven't really spoken about the debtor complete attribute towards what is that all about? Well, at its core, the autocomplete attribute can be used to tell the browser to, you guessed it, autocomplete the user's data. And this autocomplete attribute is provided to us by HTML at part of the Hypertext Markup Language. And it's available not on every single element. It's available on input elements, takes array elements, linked elements, and form elements. And when its value is set to on, that just means the browser can use the values for future use and suggest values now. So how does it look more? Here's an example of us using an input element where we put the autocomplete attribute to the on state. All Clyde, okay, It's all good and well that it's on but who comes up with values? Like a main dendrite? It's part of the Hypertext Markup Language, and it's basically up to the browser as to what values are shown to a user. Typically, values come from past values entered into by user, but they may also come from preconfigured values from the browser. For example, the browser might even let the user save the name, address, phone number, email address, autocomplete purposes. I guess what I'm trying to say is you can view daughter list as being kind of under your control. And the altar complete as being under the browsers control. Your heat by b, spinning, you might be thinking, well, what is the difference between auto-complete and daughter list? And that is a very, very good question. Autocomplete tells the browser to give a user options for completion. Okay? So it's kind of up to the browser. You kind of giving control over to the browser. And bear in mind, even if we sit autocomplete to off, especially when it comes to passwords, browser still implement their own password management system and they still might ask the user, do you want to save the password for future use? That's not up to you and I, it's up to the browser. And you can kinda view autocomplete as something similar. We're giving the browser control to show the user certain values. Then we've got daughter list. And daughter list is really cool because we're in control as to what list suggestions we want to be displayed to the user. And of course it's regardless of previous input. We've gone through quite a lot that hope this has made sense and I hope you getting more intuitive non feeling more comfortable. But how to use the autocomplete box. 13. The datalist element - 2 important points: Before we move on, I just want to address two important questions when it comes to using this daughter list element. Remember, it's just a way for a user to select many different options. Okay, question number 1, when to use daughter list. Since the daughter list has no built-in mechanism to require that a user select the provided options. They are well suited for inputs that can accept any value. So a good example would be asking the user to select a favorite food. There's an infinite amount of food out there that the user could select, but we could just provide a few items in the daughter list selection tool. This is a good example because the user is always allowed to input any value he or she wants. They don't have to select one of our lists. Because what's good with the daughter list is that it gives the user freedom to stall, type or input any value of the Choosing. They don't have to use one of our pre-selected values or options. So then Clyde, what about our periodic table example that does have a predefined limited set of valid values. So shouldn't that instance be better handled by a select element, for example, because it will enforce a selection, a correct selection in a periodic table. Well, you could argue that, yes, but I like to also think there's always exceptions to the rule. And one exception to this rule that we should only use daughter lists when the user can accept any value, is when you have a large number of valid selections. For example, using a select element list on a huge number of items in the periodic table would likely be very frustrating for a user, because having a select list will impede the user by forcing them to sift through hundreds of options to find the one they're looking for. So I would argue that an autocomplete box fits this use in a bit better hair because a user can quickly filter the list by typing one or two characters. And that's why I still use the daughter list element even when we were dealing with the periodic table. I guess the point I'm trying to say through all this is that they are always exceptions to the rule. And you need to just think about what each element gives you a select versus auto-complete, and decide what you think is best for user experience. So that's question number 1, when to use the dot list. The second question is, what are the limitations of using the data set elements? And unfortunately they are limitations. It's major limitation is lack of customization. For instance, you can't use CSS to do numerous things. You can't use CSS to change the display of its options. You can't control the positioning of the actual list itself. You can't control what's considered a match. For example, case sensitivity match at the beginning of a string versus anyway, and so on and so forth. And of course, you can't define the number of characters typed before the browser shows results to the user, et cetera, et cetera. So they are limitations that you have to be aware of when using the data set. But most of the time, you know if you're just wanting a quick list and to help the user with some pre-defined lists, it's a really useful tool. Let's move on. 14. The datalist element - an example: Hello. I'll take a break here and I want to show you how to dynamically add lists, two daughter list. Why would you ever want to do this? Well, often in programming and EPS, things are not static. Insert an empty changing. So let's do an example here. I'll just use animals and animal list. Maybe he's got animal rescue site and people have their own page and add all the favorite animals. And you want those Favorite lists to be displayed on a drop-down lists when they search. How would we go about doing that? Well, we have to use some JavaScript, but you'll see it super easy. Let's get into it. I'm not even going to wrap this in HTML forms. I want to be very, very quickly as to what we do. I want to give us a label. We can just say animal inputs. And we can say, pick your favorite animal is our label and name. I want an input just with a standard text type. You know what we know, even in a small distance server we don't need. Let's give it an ID of an animal and put it. Here we go. We save this and we look at the browser and refresh it. We've just got a standard text input, I think specialty. What I do want though, remember as I once a daughter list, I want to provide a list of the users honestly selected favorite animals. Maybe they're, like I mentioned, they are on a membership page and they've got a whole lot of lax left, but a whole lot of animals that they want to rescued and they put this list. So here we go. I want a daughter list shifted manually type this out, and Obama ID doesn't do it for me. Thought a list. So there we go, opening and closing tags. We know that we have associated with the input, right? And we do that by having a list attribute on the input itself. What should we give that value? Let's just say animal. And then we know the daughter list has to have the same ID. We go. But right now this daughter list is empty, so it doesn't really help the user in any way. I don't want to have predefined values. And remember the format. It is, we need an option. Give it a value. We don't have an option here. Could be auto, save this, refresh. The user starts typing w is the water, but this would be static. I don't want this to be static. So let's just comment that out. And it's creates this dynamically. How can we do that? Well, firstly, we need JavaScript, so let's rapid within a script tag. And let's say we go to the database and we fetch all the previous animals that use a safe. And let's put it in a variable called animal list. And we'll just store it in an array for now, let's just say it's warthogs, giraffes, and elephants. You know what, let me expand this for now. But just pretend we had fished us from a server. So it's dynamic rights and we could make this list as long as we wanted. So that's the first thing I wanna do. All right, so how do we now put this, call it array of animals into their daughter list? Well, it's very simple. We just have to listen for one event when the user clicks on that input field, a focus event gets fired by the DOM automatically. So when their focus event is fired, I went to loop through our array that we've just created. And then I want to create option elements and then append that within the daughter list. I know it might sound confusing. I know using JavaScript here. I mean, I've actually just defined an array. I realized not even explaining what it is is just, you know, it's, it's a daughter type in JavaScript and we donate, donate, donate, donates. We define an array with those square brackets. What that means. So let's get into it. It's not that difficult. And if you're not following along, don't worry because this is JavaScript in this course is not about JavaScript, but I encourage you to come along with me. Hopefully, you learned a thing or two. So let's get into it. Like I mentioned, we want to grab our input box rights. So FEV, animal input box. We can do that by accessing the document object, get element by ID. And the ID we gave it was animal. And we'll input and all inputs again. So there we go. We've got our input. Now, I want to listen for that focus event and noted equity after grab a towel, favorite animal input, add an event listener. We want to listen for the focus event. And we know that a callback function gets executed when that event fires. And this is where we write our code within these curly braces. Then what I wanna do is I want to grab our daughter list elements and I want to insert dynamically that entire animal list array. First step is to grab our daughter list. So let's just call it dynamic animals. Let's grab our document getElementByID, and we have an ID. And a very straightforward. Now what I wanna do is I want to loop over the animal. They are a few ways we can do this in JavaScript. I'm just going to grab our animal list, which is our array. And I'm going to exit the for each method. And the for each method is very, very simple. Basically it gives us the item. In our case, I actually could define item is animal. And then on each loop through, we can do something with that item or that animal. So on each time that it loops through, I want a few things to happen. Firstly, I want to create a new option element. Remember if I scroll up, we want an HTML element to look like this option option. So we need to create this option element. Now, we can do that by accessing the element method in the DOM. So let's define a variable called option. And it's going to be documents element. And the element we want to create is an optional element. So that's the first step done. The second step is I want to set the value using the item in the array. So it's very, very easy. All we have to do is grab the option element we've just created. And we're going to sit at the value property to what is right to the animal. So when it loops through the war talk for the first time, this is going to be warthogs were going to create an option elements and it's going to assign its value to all talk. Basically it's going to give us this. Then the final thing we have to do is we have to add the option element daughter list, because right now we've created it, but that's all we've done. It's floating in the name. It's floating in space. So all we have to do is grab our daughter list, which we defined in a variable called dynamic animals. And then we're going to create another method called child. And the child just adds the element is the lost child to the parent, right? So it's basically going to add first thing, Terrafugia Android, because it'll be the next lost a child and an elephant beneath it. Well, it that means, and what do we want to append? Will we want to append option or Alt Option element? And I think my dear students this to it, right? Let's grab browser. Expand US. Let's start typing. Well, there we go. Alcohols that it's received the focus of paint and water. The giraffe and elephant had been dynamically inserted into the daughter list. Proof is in the pudding. How Olson Business. I really, really do enjoy this. So there's gotta code and it's just remember what it is we did. First we defined the HTML. They really simple. We had an empty list limit. You don't even need this coming. It's just empty. Dynamically. We finish this animal list from server. Well, he didn't really mean we did within got our input variable. We listened for the focus event on that. And then when it receives focus, what we wanna do is we want to grab our daughter list element, which we put in a variable called dynamic animals. Got that. Then we want to loop through the array. And each loop, we want to create an option elements. Put the animal's name in its value property and in a painted to the other listed. It's always done. How cool is this? My students? And I know we're going OK, It's OK. Hey, how cool is this? My students, seriously, we're learning a ton of information. I know sometimes I'm going a bit advanced. It should just be about forms. But now we're talking about JavaScript, we're talking about looping over rays. Really a hope I am equipping, you know, it's going to help you in your career and having fun along the way. Because we need to have fun to enjoy what we do. Anyway, still attend to learn is always. See you in the next lecture. 15. Datalist element vs select element: I know I've spoken about this before, but why would one choose daughter list, verse select, or vice versa? When would you want to use one over the other? And this is a great question because they are so similar, but at the same time they different and you need to understand when one is more appropriate than the other, which is why I'm just emphasizing this again, it's going to be a very quick lecture, are promised. The main difference boils down to what? That's right, the users ability to enter the own value, if you will recall, and I'm sure you do the daughter list element allows the user to enter any value that I have to select one of our pre selections. Whereas the select element gives the user a predefined set rigid list. And if you think about a typical autocomplete scenario, the suggestions are either going to be based on the user's history or a list of values based on some algorithm. And this basically just means the choices may not be what the user wants to enter. Think about a search engine, for example, each one has a search suggestion list as you type based on related searches, others have previously entered. This may not be the search phrase you need. So that's why browsers allow you to submit anything you want. If, on the other hand, search engines used the select element, then the range of search phrases would be extremely limited. And you'd pull your hair out and you would not find that acceptable. For the record, 20% of daily queries submitted to search engines are unique and have never been submitted before. I thought that was quite interesting. So anyway, the point I'm trying to make as my preference is always to use daughter lists way you can because users loved choice and they love to be unique. So give them the freedom to do so. Try not to restrict your user's way possible. There we go, I told you was going to be a quick lecture. I just wanted to drive this point home one more time. 16. Dropdown summary: We have been looking at a lot of drop-downs and waste like taking a step back and give weakness summary because it can seem quite daunting and I don't want you to stand too close to the wall that you can't see the painting or you can't see the wound through the trees as they say. So anyway, this is just a very quick summary on drop-down menus. And remember by drop-down menus, I just mean a way for users to select many different options. And HTML is there's two ways to allow users to select the drop-down, either through the select box, all the autocomplete box. We then looked at select first. And that gives the user a predefined set of options to choose from. And in moving away from the select box, we had this autocomplete box hand in order to create this order complete box, we use the daughter list element. And it provides a quick native means of displaying input suggestions to a user. And this daughter list elements is cool because it allows auto-completion. Writer uses are listed we pre-defined also lets the user enter their own custom values, which is extremely useful. The other thing with daughter lists is that they are mostly used with text input types, but they don't have to be. For example, they can be used with the input type is set to range, for example, it can also be used on other elements. I've mentioned this previously lacked the select element. And another cool thing with the daughter list is that it's native to the browser. And this means that it has a smart filter, autocomplete logic and filtering that makes it easier for us to deliver a better solution, faster with less testing required. But as I mentioned, there is not always the good, Right? There are limitations with daughter list. And one of them is a lack of customization. If you need a more robust solution, you're going to have to look at third party libraries. For example, jQuery UI, auto complete widget might be a good place for you to start. But anyway, this was just a very quick summary on what we've learned. Hope you having a ton of fun and I'll see you in the next lecture. 17. The output element - intro: I want to now talk about a very useful element when it comes to dealing with forms, and that is the output. Okay, So what is this output element all about? Well, it is semantically the correct element to display results. For example, the results of a calculation from form elements. And where does it come from? Who gives us as output element? Will it inherits from the HTML output element interface? Why do you say? And I don't want you to feel overwhelmed or confused. Just think about it like this. Someone has to give us elements to work with. That someone, in our case is the browser. The browsers have to conform to certain specifications. Browsers give us access to a lot of interfaces. And one of these interfaces at the browser gives us is the HTML output elements. And it's just useful because the browser has attached many properties and methods for manipulating the layout and presentation of certain daughter that's shown in the upper element. And this is all done because we have this HTML output element interface. Bird words are words. Let me just quickly jump over to the console and I'll prove this to you very quickly. Let me prove to you, with this output element comes from. So here we are. I'm just in a browser. Let's just go to the console. By the way, the console is a way for us to write JavaScript code. It's basically the browsers interface for executing JavaScript. That's what the console is and show you, I'm sure you probably need it. And so on I wanna do is I want to quickly create our output element. So let's just define it as output. And then I want to access the document object, which the dom gives us. Aeneid is a method called create elements. And element we want to create is this output element. So now we've created this output element. All I wanna do now is I want to console log out to the screen, but I don't want to use console log for this console log gives us the actual HTML. Let me show you. And if I go console log and I just console logger output, we get the actual HTML representation, we get our output tech. But that's not what I want. I want to see the JSON tree kind of representational format of this output elements. Aka I want to see all the properties and methods of this element. And in order to do that, I want to use console. And I want to do out our output variable. Okay, there we go. And if we open this up, What's really cool? And I encourage you to do this, go through and start seeing all the properties and methods that we have on this output element. But what I really wanted to look at is the proton. And if you scroll all the way down, you know, he has some properties in HTML in a text. That's why we can access all of these properties and change values. This is where they come from, how cool. And if we scroll all the way down to the bottom, look, yeah, he has keeps topping hand. Anyway. So interesting, you know, and he has some cool things. We've got, remember the events that we listen for and some of our previous example will he has an onblur event onclick event vehicle, vehicle. Anyway, let's scroll to the bottom for real this time. And you'll see here at the very bottom we've got this proton. And don't worry what protocol is. Just realize when it comes to JavaScript, it's an inheritance based model, meaning properties and methods and objects inherit from either properties or other objects. And here this output element inherits from the HTML output element. Proof is in the pudding and you can see it right here. Okay, Clyde, I know it comes from the HTML output element interface. But what really else can you tell me about this output element? What's some juicy information about it? Well, firstly, does not have the value attribute. Remember we were talking about the text area element and remember that the text area also does not have the value attribute. Why does it not have the attribute will very similarly to the text area, it's because there's an opening and closing tag with this element. So they fall the text node between the opening and closing tags pretty much make up the value. So if you ever want a default value, you just put it in between opening and closing tags. That's why there is no value attributes. The other thing that you need to bear in mind with the output element is remembered the first on the screen. It's a semantic element. It's only used to display results. And this means it does not submit any name, value pairs or content to the server. So just remember my dear students. For the most part. This output element is only day for simple semantic display purposes for a user. There's something else not very important when it comes to the output element. And that is the input event. What, before I even talk about the oninput event, let me show you how it works in action. 18. The output element - the oninput event: All right, What is this on input event all about? Well firstly, what I wanna do is I want to create a text control. And I want us to calculate how many characters the user has typed into that text control. And I wanted to display that on the screen to the user. Let's do that. And in doing this, I want to show you what the input event is. So the first step is, let's create a simple HTML document. And it's great body. Inside this body, I want to create an inputs and we want to input type text. This is the default by the way, you really notice we don't even have to define its type. But I like to finding its type. I always think it's good because then you being explicit. And I want to have a placeholder here just so we can tell the user what we're doing. Let's see what links typing in here. And then I want the size of this input text field a little bit larger than defaults. Let's just say size is 40. Let's look at what this looks like on the browser. There we go, Pretty straightforward. And of course, if the user starts typing in here, nothing happens, but I want our JavaScript now to count how many characters have been entered into this control, and I want that displayed below. How do we do that? Well, firstly, we need some way to display the information. Doughy, delicious, have a few breaks. Yeah, and then let's create an empty div tag and let's give it an ID of output, since we want our output text. So there we go. We kind of all set up for it. The last thing we have to do is we have to write our JavaScript. You know that in order to write JavaScript we have to rapid within the script tags. This tells the browser or tells the JavaScript engine that JavaScript is now kicking in. That's why we have to put it in script tags. All right, how did we do this? We want to listen for the oninput event that fired on the input element. So the first thing is we have to grab our input elements. The second thing is we know we're going to have to display those results in a div with the id of output. So let's grab that. Then. I want to listen for the oninput event. And then when oninput event is fired, we need to define a function. And that function, all it's gonna do is it's going to take the value in net input control. And then we're going to access the length property. We're going to count how many characters it has, and then we're going to display that. And Albert, very, very simple. Let's get into it. So as I mentioned, Let's grab our elements. That's the first step. Let's define a variable called input elements because that's what we are getting. We can access the document object on here. We've got the querySelector just showing you different ways of doing things. And let's grab our input. The next thing we want to grab is that div, right? And let's just define it as our output area. We're going to grab the document object. And here, why don't we use get element by ID, an ID of output. So there we go. We've got our elements. Very simple. The most important piece to the puzzle is let's listen for the on input event, the different ways of doing this. I'm just going to access our input element. And on here, I'm going to say when the oninput event is fired, I want to execute a function. And which function do we want to execute? We can call it anything we want. Let's just call it show output. Okay, so we've defined what we want to listen for that on input is not our keyword. That's a keyword given to us by the browser. So just remember that when the oninput is fired, we are now going to execute a function called show up. So now the last thing we have to do is define the function show up because now nothing's going to happen because we haven't defined function. In order to define a function in JavaScript, we have to use the function keyword. And then we call the function show up or desert recalled it, right? And then we've got to write all our code within these curly braces. And unnerve mentioned this in previous lectures. But when an event is fired, we get access to the event object. And usually developers put this in a variable called e. That's what I'm gonna do. So now we have access to this event object. When it's fired. What do we want to happen? Well, it's very simple. We want to grab our output element, don't we? And we want to change its text content. And now I'm just going to use template literals and temperature trolls allow us to easily write text and mix in variables. You'll see rami, let's just say yeah, within the template literals, the field's value is, and now we want to display the length of text. How do we do that? Well, it's going to be in a variable and when using temperature tools to create a variable with a dollar sign. And we have the curly braces. Then inside here we can access variables. I want to first access our event objects. On our event object, we get access to a, another property called target. And this target property gives us the item that fire dealings. In our case, we know it's going to be that input. And on the input we've got a value property, which is that whole string of takes that the user's typed. And that value property is also an object and it gives us another property called length. So there we go. Now we've got the length of characters, right? And they might only be one character. Let's just have that. And I think Medea students, this should be 0. It's now save this. Got our browser and its type. Wally, how awesome is this? The field's value is five characters long. If I do, backspace, keeps reducing until this nothing. How awesome? Don't lose sight of what we've done. All we've done is we've listened for the oninput event. And when that on input event is fired, and it's fired every time there's a modification to that input box. We wanted to execute a function called show output. We then exist the value property of that input. And Annette, We've got a length property. And we just put out nice template literals to make it very easy for us. Underwriters, hope it's making sense, hope you're having a lot of fun. But now I want to quickly hop to the lecture, mentioned a few more things about the on input event. And then I'm going to test you on, I give you a few different problems. Anyway, so excited. Little back to the lecture. So there you go. You've seen on input how it works in a practical example. And I want to emphasize that the oninput event is not only relevant for the output elements. In fact, the oninput event occurs when the following elements are changed by the user, the input select, and text area elements. And of course, an example we just saw, we saw it used with the input element. The other thing I just want you to bear in mind with oninput event is that it is different to the onchange event handler. The so many different events, they're quite similar, but the onchange event is fired when the element loses focus, so doesn't fire immediately after a modification. And that's why the oninput event was more useful in ensemble because every time they use modifiers that input, we wanted to listen for that event, not necessarily when the user clicks out of the text control. And I think that's all I want to mention about this output element for now. Although I do want to challenge you to a few challenges. So let's do those and then we'll move on. 19. Output challenge 1 - multiplication: Hey, hey my idea, comrades, welcome back, welcome back. I hope you end up having a lot of fun. What is this example or challenge? All of us? Very, very simple. I want us to display a very simple multiplication to the screen, to the user. Can you see I've got a default value of 0 currently on the browser will that is wrapped in an output element. We dealing with output elements. I want you to use an output element to try and figure out the solution to this. And all I want to happen is obviously the user toxin number that say five multiplied by what? Let's say another five. And I want the results displayed in that output elements to a user. In order to display this result, I want to listen for the inputs event. The other nuance with a solution I'm gonna do is I'm going to write the JavaScript all in line. So I'm going to be using an inline the faintest now, I know it's not the best way to do things. I'd rather have an external JavaScript file and add an event listener to an element and do it that way. But I want to keep it very simple. I want to keep a file very small. It's very easy example. So I'm going to be using an inline event listener in order to identify the certain inputs. In that event listener method, you have to give each of these inputs a name attribute. In fact, you also have to give the output element and name attribute so you can identify it when you're executing your code. If you don't know what I mean, don't stress, just set up the HTML, try and get data at least done by yourself. If you do know what I'm talking about, give it a go. And in the solution video, I'll take you through if it's codeword c naught. 20. Output challenge 1 - solution: Did you give it a go? It's actually quite a tricky one because as I mentioned, we're going to be using the name attribute to execute an inline event listener. I know sounds like a lot of big words, but it really is quite simple. Let's sit up our HTML documents in here. We can have a head and in the style section. For now, let's just leave it blank. Let's first write up our HTML and then we can have a buddy writes in our body. Let's create a heading tag called I'll put out an element. Actually. Yeah, I want to create a form. We don't need an action not submitting this to server. And a once, let's say two inputs with type numbers, right? Because we multiply one number by another. So the inputs needs to be of type number where it makes sense to have characters. Let's give it a name of num 1. This is the first number the user's going to type in. Exactly the same thing, type of number. That name can be num two. We don't need an ID once again. So there we go. That's our first number. We know then that's going to be multiplied by the second number. And this is going to be equal to the answer. And the answer we want needs to be inserted in what better heights we are dealing with the output element. So we want the onset displayed in an output element. So let's create an output element. And again, in order to identify this output in our event listener are inline event listener. We need to give it a name attribute. And the name attribute we can give it can be anything. Let's just call it output element. For lack of a better word, we can start off with 0. But obviously the text content or the HTML is going to be changed dynamically. So let's look at what this looks like in the browser. Hey, how cool, how cool, you know what? We don't even need to style this. I think this is fine. You know, right now obviously the numbers do nothing because we haven't defined any JavaScript. We've just said this, output, elements, static, etc. How do we make it dynamic? Well, like I said in the introduction, let's create an inline event listener. I know it's not the best way to do things. If you've seen my Tom courses, I don't really like using inline event listeners is much better to do it externally. For example, via the addEventListener method. But anyway, he'll do for now, I don't want to include script tags and create too much confusion. So what we can do when we listen for the oninput event is we can execute it directly in line. And we can listen for it just like this. We can include it as an attribute on input. It is really simple. So now every times on input event is fired. We can now define JavaScript inline in order for the positive execute. So we want to now get the output element, don't we? And we've defined its name as output elements. Can you see it? So let's access the output element. We want to change what? That's right. We want to change the text content. And what do we want to assign it to? We want to assign it to literally the number one value times the number 2 value. Really is that simple. So it's going to be number one times number 2. We've given the first input the name of num one. And we know to access the value of any form control that we have to access the value property. And that's all there is to it Medea students num 2, we do the same thing. We grab its value, property, it really cannot get more easier than us. We got our browser. Let's multiply out on a five by five. Yeah, How awesome is this? Man? I have a lot of fun. And of course, it's dynamic. You can, you can multiply whatever you want. Very, very cool. So this is just a very quick example of us using the input event. And whenever that event is fired, we display the results in an output element. I hope it's becoming more intuitive. Hope you have a lot of fun. And I'll see you in the next picture. 21. Output challenge 2 - intro: Yet another challenge, working with yet another output element and listening for yet another on input event. But there's a reason for my madness. There's a reason I'm repeating these things and that is for you to become more intuitive and feel more comfortable when it comes to you designing your phone, x and fault. So here is a, another type of input control. I wanted to show you that we don't only have to listen to the oninput event where the input type is text. Because here is a clear example of us using an input weights type is C2 or typos us. Can you guess? Boy, yeah, that's right. That's type of seat to range. And you already know one of the major downfalls with working with the input of type range is the value itself is not displayed to the user in tool. It's separated in the pool, and that's just impractical, which is why I want to go through this example with you. I want us to create this input of type range. I want you to create an output element and I want the value of that range to be shown in that applicant. And yes, we are going to be listening for the input eating. So let me show you that is yes, a slider. As we move the slider, the value is shown to the user. For a very simple example, see if you can do it by yourself. If you can't, don't worry, I'm going to be going through it with you in the very next lecture. 22. Output challenge 2 - solution: This is yet another fun example. And I wanted to specifically show you this example because as I said, we can use the on input event with different types of inputs. And here we using a range. So let's say that up very, very simple. We've got an HTML body in the body. Let's just have a paragraph. This is a cool example showing you how to die. Dynamically update the output element by listening for the on input event. Paragraph. Very simple. What's next? Very, very simple. Let's create our input. And this time it's with type of range. We don't even need a name or an ID, which is going to be that simple of an example. There we go, but we're not done. All we do is go to the browser and see what this looks like. Alright, let me zoom out a bit. We not done. You can see we've got our range slider, but firstly, it never displays values to the US automatically. That's one of the downsides with this range type, and we want to show it dynamically. So what do we do? Well, we need to listen for that event. We can also listen for it in line by listening for the cannot online, sorry, on input event. And then when the oninput event is fired on this input element, We can either write our JavaScript directly in here. Don't wanna do that. I just want to show you another way of doing something. We can execute a function and this just call it output. In order to execute a function, you need to follow it by parentheses. That's just a nuanced when it comes to JavaScript. The other cool thing when we go and execute a function is we can pass the function, something. We can say, hey, when you execute it, pass something onto the function. And here, why don't we just pass its value? So this will refer to the actual input itself. And we know we can access a property called value. So let's pass this to the function. And what this means is that now when we go and type our JavaScript again in script tags and we define our function, which we called as output. We can now access this value and I'm just putting it in a variable called val, so value. But remember what it is that Val is going to be the value of the input of type range. And now it's very, very simple. All we have to do is grab our output element and insert the value into that. Oh, we haven't got an output element every silly me. Let's create an output element and let's give it an ID of output. So now all we have to do is we have to grab that output element by ID, and we gave it an ID of output. We want to change its textContent property, and we want to assign that to the value of H0. You've got it, the value itself. Let's see if this works. Let's go to the browser. Refresh, and let's start moving the slider and you go, How cool is this Medea students? And I told you, so it's not that difficult, is it? And as I'm sure you can already be seen, we deal with a lot of repetition. As developers. We are always listening for certain events, like on inputted a very, very common event, onclick event, focus it in live events, et cetera, et cetera. So once you become accustomed to working with these things, it becomes very easy, becomes very fun, and it becomes very intuitive. Yes, This always nuances with every website and app that you'll create in these things that are going to blow your mind and really get to scratching in, pulling your hair out. But at the cracks, at the core, you've got a solid foundation at really is going to make your life easier. So anyway, I hope you having a lot of fun, but let's get cracking. Let's move on. 23. Progress bars - intro: I'm having tons of fun. I hope you are too. I wanted to now talk about a few other form features that are not as obvious as some of the ones we've already looked at, but they can still be very useful. And I just thought to be worth giving him a brief mentioned. So back to the classroom, back to the drawing board. What do I wanna talk about? Well, I want to talk about two interesting form controls. The first of these is the progress bar. What is this all about? Well, as per the standard defined by the W3C, progress bar, elements represent the completion progress of a task. And all this means is that they are great when you want to show the user that something is happening. Especially when it's something, can take a long time, like downloading a file or watching a video, for example, don't worry, I'm gonna be showing you examples shortly. How do we set up a progress bar? Very easily, they must have a start tag and an end tag. And it's kind of weird. It has a start and an end tag because it looks like replaced element. If we put in rich HTML, you can't see it. But it's still useful and it's still good to have an opening and closing tag because that helps with fallback content. In other words, the content inside the progress element is a fallback for browsers that don't support the element. And for screen readers to vocalize it. And you know that we can put a lot of global attributes on all of these form controls. But the progress bar has two very important ones. And the x and the value attribute. The max attribute indicates how much task needs to be done before it can be considered as complete. If you don't specify a max attribute, what do you think it would be? Well, the default value will be one, so the range will be from 0 to one. That's if you don't include a max at all, what is the value attributed? Well, they tried to kind of tells you what the value is of their progress bar at any given time. In other words, it indicates the current status of the progress bar. So it makes sense that the value has to be either greater than or equal to 0, but it always has to be less than or equal to that, right? To the max attribute or one if the max attribute is not present, let me hop over to Visual Studio Code and let me show you how this progress element works. They are a few other nuances are also want to tell you about. 24. Progress bars - more detail: All right, As you can see, we've got a blank Visual Studio code on the left, and we've got the browser on the right. I want to discuss this progress elements. Firstly, as I mentioned, it requires an opening and a closing tag. And two very important attributes with the progress element is the max attribute and it's just set it to a 100. And other range will be from 0 to a 100. And let's give it a value of 70. How's this? Let's save this. And there it is on the browser. And I can even zoom in. This is default styling provided by the browser. How cool. Now at first you might be thinking it's replaced element kind of because if we put content inside the opening and closing tag, we don't see anything happen. We can put an H2 tag saying, you know, progress is 70 percent. And of course nothing happens. This is only for screen readers. It's only for those defaults. Instances with a browser doesn't recognize the progress element. The next important thing I just want you to realize is that the progress bar can be in two different, at any given time, an indeterminate state and a determinant state. So what are the differences? Glide? Well, it all boils down to this value attribute. If it's in an indeterminate state, it means that there is no value attributes. Me show you what I mean. Let's remove this very attribute. Let's save. Now it's in an indeterminate state and he can see the inner little toggle keeps moving. It shows the user that the state of progress is currently unknown. For example, how long it would take for a web server to initialize the download of a file if it's generating edit on the fly. And you might have to show, hey, we've just gotta wait. And of course how this looks will vary from browser to browser. So that's the indeterminate state. Obviously, when you include now a valley attributed sets 50, it shows more of what you would think as a progress bar. Writes, it indicates the completion progress of a task. Here we are 50 percent complete. And another thing I want to show you is it is quite easy to style the progress bar. We can access the progress element itself. We can define its height is two in pretty easy. We can affect its width. You know, we can do a lot, we can do a lot. And in fact, we can use many of the standard CSS property selectors to style this progress bar. For example, we can use the not keyword you, we, you know what? Let me actually just show you. Let's just say we didn't have this value attribute. Yeah. And then what we can do in CSS is target all progress bars that don't have a value. How do we do that? Well, we can use the CSS NOT keyword. And we want to target all progress bars that do not have a value attribute. Just very, very interesting and you can see this works. Just give it a huge height. And of course, if we put this value attribute back, Let's just said 50. The stylings that we've just defined here on not going to apply because they only apply on progress bars that do not have a value. Okay, Clyde, but how do we get more specific? How do we get our hands dirty? How do we really style was progress bar? Well, in order to do that, we can target webkit. Just remember that every browser is backed by a rendering engine that draws the HTML and CSS webpage. Firefox uses gecko. I'm not really going to show you Firefox, but you can use the exact same approach I'm using here on Google. Safari uses webkit. Chrome uses blink, but blinkers kind of a fork of webkit. So I want to show you how we can use webkit to style this in detail. Let me show you what I mean. Let's inspect this page. Let's actually make this browser big. Let's inspect this. Okay, what we can do is open up our progress element. And in here we've got this shedder root, which is created by the DOM. And here you can see that our entire progress bar is read within this div that has a pseudo element of webkit progress in a element. If we open up this, we've got three items we can target, right? We've got the actual progress value. Right now it's blue. And then we've got the progress bar itself. So why don't we target the progress bar, which has gray and make that a certain color. Let's just do pink. And why don't we then target the actual progress value and make that another color, let's say tomato read. How would we do that? Well, it's very, very simple. All we have to lose got our text editor here. Let's just remove this progress, not just getting in the way. This isn't the first thing you have to do is we have to grab our progress elements. And I want to remove all webkit appearance properties. So here, very ugly, right? But now we have a lot of flexibility because we can target now the pseudo element, right? And it was called webkit. Progress bar. The MID tells me really, really handy. And here we can just change the background to, I don't know, let's do a pink. How cool is that? Medea students? So we've just changed the background color of our progress bar, that pink. What about that actual value, right, right now the value sit 50, let's say the value is set to 20, Right? It's green. How do we affect that? Well, as I showed you, we can target the whip kits, ProRes value pseudo element. And let's change that background. Tomato, save it. And there we go. Just wanted to show you a very quick example. Habits making more scenes, Hopi not feeling so intimidated by oldest. And really is a lot of fun when you start getting getting your hands dirty. So there we go. That's the progress elements. I don't want to jump back into the lecture right now because it's getting a bit long. So in the next lecture, I want to talk about the meter bar. We've spoken about the progress bar. Next, I want to speak about the MetaBot. See you now. 25. Meter bars - intro: All right, We have just finished looking at progress bars. Very exciting. But now I want to look at a different type of bar, and this is known as a meter bar. The meter element is visually similar to the progress elements, but it has a very different purpose. The meter bar represents a fixed value in a range that is defined by a Min and max value. Yeah, I know, but you might be thinking client that's the same as the progress bar, Kind of, Kind of, but it serves a different purpose. You typically use the meter attributes for fixed values like disk usage or the relevance of a query result or the fraction of a voting populations have selected a particular candidates or option. So you can kinda view the meter gauge. And in order to create the Meta element, you need both a starting tag and ending tag. Again, similar to the progress elements. And the reason we insert information between a tags is to have a robust fallback technique for all the browsers that do not support the meter element. But unlike the progress elements, the meter element has three important attributes to consider. What are they? Low, it's high and it's optimum. What? I know, no. Let me just explain and lunar more detail how these work. And it's just create a meter element like this, right? Opening tag, closing tag. And we've got various attributes on here. And this is how the meter looks. Yes, it's very similar to the progress in. Firstly, let's look at the Min and max, or the Min and max values represents the range, the entire range of your meter. Okay, the next thing, when they say the three important attributes are low and high. And the low and high values divide this range into three parts, as you can see, right? The lower part of the range is between men and low, inclusive. The medium part of the range is between low and high. This is in our example, also the optimum range. And then you've got the high part of the range. And that is between high and max. And this optimum value that defines the optimum value of the meter element at self. And don't worry, it can be quite confusing. I'm going to hop over to the console. I'm going to code some things up with you shortly and I'll explain how this optimum attribute works. What's very cool about the Meta element is there three different colors are shown. We've got green, which you saw in the previous example. And green is just whether the values in the current preferred range of the meter. If the current value is in the average part of the range, the bar is yellow. Yeah, our value is nine, which is less than 10, which means it's not ideal. And this is why yellow shown. If the current value is in the worst part of the range though the bar is read, don't worry, I'm going to show you green, orange, and red shortly when we're coding up the Meta bar in the text editor. Okay, So there we go. Let's move on. Let's move on. Actually, you know what? Instead of me telling you, I'm gonna keep showing you examples. Let me just hop over to the text editor right now. And let me start showing you how this meter works in more detail. 26. Meter bars - more detail: I told you, I'm going to show you how this works. So let's get cracking. Let's just do a meter elements with nothing, right? And we look at the browser. This is what it looks like. And let me actually have a comment here. And so you can follow along. This is no attributes tree. So you got nothing crazy and it's very similar to the progress bar. Let's put a progress body and the browser. And you can see it's very similar. They're not quite exactly the same, but they are very similar. And just remove the progress. And let's start going. Let's give you another example here. Let's look at an example where the value is less than the max. You're going to notice here, if we don't define a max, the default is low at 0 and max at one. Let me prove it to you now. Let me show you. So here we can define our second meter. But now I want a value of 0.5. I just wanted the value to be less than the max. And we know the mix as one. Refresh the browser. And there we go. We've got two. You know what? I don't want to display these meters, meters in line. So this just apply some styling to these meetings. Play block. The fish, the browser. There we go. These, they are one beneath each other. It's always going to be green in this instance, right? Value is one refresh, value at 0.9 refresh. And if our value is one, refresh, it's green. And the reason it's always green is because we haven't defined any optimum values, lows and highs, etc, etc. Okay, so that's just the green bar is always going to be green because how does the browser know what's optimum and what's not? Okay, Let's look at another example now I want to show you the different colors, right? So let's say here that the r value in the meter is higher than our high part of the range. So don't get confused. This isn't like an exam score was a 100 percent is better than Hi. This is almost like a warning, right? Maybe it's a heat gauge and we don't want it to get too hot. So for example, let's look at another meter. Yeah, we, our high value is set to 0.8, but the actual value itself is 0.9. This is not a good thing. And if we refresh the browser, we can see it's approaching a very dangerous level, which is why the color has changed. If it's eight and we refresh it screen, if it's below, what do you think would happen? That's right. It should also be green because we haven't defined a low value. So let's leave it above, so you can kinda see the orange. Let's look at another example now let's say the value is less than low. What do you think would happen if you try and figure it out for a typo here. So let's say the low 0.4. And let's sell. Actual value is what country? What do you think would happen when I refresh this browser? Let's try it out. Expect orange to occur as well. So same thing with high, just the complete opposite, right? Maybe this is like the temperature point where you don't want something to drop below a certain temperature, it also gets dangerous. So here you are giving a visual warning to the user to meter. Can you see how it's different, by the way, semantically to a progress elements, meters or kind of a gauge. That's how I viewed him. Now, I want to show you about the optimum attributes and let me just write here for you, the optimum attributes gives the position that is optimum. And how does this work? Well, it can be very confusing. Let me just give you one example then I want to show you something else quickly. Let me give you an example where the value is lower than low, which is lower than high-value, which is lower than the optimum value. Let me show you what this looks like. Okay, let's create our meter elements. Let's give it a value of 0.3 is defined. The low as 0 for the HI is 0.8 and the optimum is 0.9, what do you think's going to happen? I mean, this is in the worst possible range because optimum is 0.9, the highest, 0.8, the lowest, 0.4, and we've got a value of 0.3. So I would imagine it to be red and it is, How cool is that? But this optimum can be a bit tricky to figure out. You just kinda have to view it as it's putting the entire meter into different. Okay? Okay, okay, don't stress. Let me hop over to PowerPoint and I'll quickly show you. So here we go. I want to show you why it's red versus hearts, lots orange versus widescreen. And the way that I visually think about these things is I split it into segments like this. So he has a meter bar. And let's say in this example we've defined all attributes on our meter bar in this order of value, men is lower than low, which is lower than optimum, which is lower than higher, which is lower than max. Can you see that we've actually got four different segments. Yeah. Yeah, you can kinda say we've got three, right? The first segment is this optimum segment. It's kind of the first section, the first block between low and high. So any value that's between low and high, where your optimum a CEQA is going to be green, that the outer blocks are going to be the next worse, which is orange. But here there is not an outer, outer block. So we will never get to read no matter what value you have. And you can try it. You can put all these attributes on your own meter and play around with values starting from north going to one, you'll see you navigate radio. And the reason is, well, the reason is wife's church on the screen. We've only got these different signals. Have you got it? Let me give you a few more examples. Let's say we don't have a low attribute. We've only got men. You've got optimum high Emacs. What's going to happen here? We, here we've only got two segments. Told me the optimum range is going to be anywhere between men and high. And then we're going to have kind of a sub-optimal range between high and max. Again, we're not going to have any red blocks. Okay, glide, but how do we have a red block? Good, Good question. All right, let's give you this example. Let's say we've defined Menlo high optimum and max, but we've now placed the optimum value between Hi Max. Obviously the easiest is that we're going to get a green bar every time the values between high and max. We're gonna get an orange meter bar when the valleys between low and high. And of course we put that third segment, which is like a sub sub, sub optimal. And of course, that is going to be shown as a red meter control. Is that making sense? Well, if it is, let me put you to the test. Can you figure out here what's going to happen between men and low? That's right. We're going to have green. What about between low and high? That's right, orange and the sub, sub optimal range is going to be read, which will be any value between high and Macs. Stay you go, My dear students, sometimes you just need to put pen to paper. It's also draw and visually figure out what it is you're trying to create in your code. But I'll make it a lot easier for you to know what values to assign each of these attributes when you could hope it's making a lot of scenes and I'll see you back an electron. 27. Meter bars vs progress bars: Okay, we've looked at the progress bar, we've looked at the meter bar. Before we finish up, let's just summarize what we've learned. So it's good to do a summary, isn't it? Otherwise, you can get quite lost in it can feel quite daunting. Firstly, progress bars convey how much work in a task has been completed. Our voice think of this as something that's always updating. For example, questioning on a form, the current duration in a video, that time it's taking for a file to download or upload, et cetera, et cetera. This is what progress bars were designed to do or to convey the metabolic. Now, the hand is used to display a fixed measurement on unknown scale, like low, medium, high. It's more of a gauge and therefore do not use the meter element to indicate the progress completion of a task. It's just not what it's designed to do. As I mentioned, the meter will be good for showing things like current disk usage, fuel tank status, heat, temperatures, et cetera, et cetera. So I guess what I want to say through all of this is thus, progress. Bars represents units of work that are ongoing, whereas meta bars represent a snapshot reading at any given moment. And that is the primary distinction. So there we go. I know I'm rushing through this. Adjust wanted to mention progress, pausing me, the boss because you will see them on forms, noun again. But you know, they're not as important to some of the other form, which is we've looked at, but nevertheless still good to know. But I've had so much fun in this section. I just, you know, I'm always said that I know we're not at the end of the course, but we are approaching there. But anyway, you'll stick with me. I'm sure in other courses I'll see you around. But let's don't get too sad yet. We've still got a lot to cover. See you in the next lecture. 28. Progress bars challenge 1 - intro: My, my, this is going to be a fun example. Because in this example, I'm giving you a skill set in your dv hat. If you want to call it that. I know this course is all about forms and we learning about form controls. One of these form controls is the progress elements. But you don't only have to use the progress bar with forms. So you can take the skills you're learning and apply it to many different situations. Here, I've got a video, okay, as you can see on the browser, minions singing the banana song. But can you see below it is a progress bar. So what I want you to try and do is I want us to create video elements in HTML. And I want us to display to the user via a progress bar, the completion of that video. So can you think how to do that? Remember the two important attributes on a progress elements or max and value. So the max attribute here should be a 100 because that's a 100 percent of the video complete. So therefore, the range will start from 0 and work all its way up to a 100. That makes sense. The value attribute should be the percentage completion of this video. So you're going to need a way to dynamically update that value of the progress bar. And when you hear the word dynamic JavaScript, That's right. That's the first thing I want you to do. Then you'll know or remember from the previous lectures that the progress bar doesn't display anything to user by default. So I want us to display a value to the user. How do we do that? That's right. We use an output element. So the value also displayed to the user in an output element, bit of a hint. In order to put a video on a web page like this, I'm going to be using the video element in HTML. I didn't include the controls attribute on the video so we can actually push, play, pause, etc, etc. That's just sitting up the HTML at the progress bar, obviously, and an output element. And that's it. Html is very simple. Then when we get to JavaScript, there's an event I want to listen to on this video and that event is called time update. Time update event is fired. He literally all the time on a video as it's playing. So we're listening for that event. And then we displaying that in the output element. And we are also affecting the value attribute of the progress element who are know it can sound very difficult, but let me show you what I mean when I push play. Look what happens. Let me actually mute this. And we push Play. Listening. There we go. But please me again. So there we go. We've got our output and we've got the progress bar displaying in real time. Obviously, if we get to the end, the progress bar is pretty much all done and we reach a 100 percent of the completion task and the video stops. So that's what I want you to try and create. Give it a go, have fun, and I'll see you in the solution video. 29. Progress bars challenge 1 - solution: I'm super, super, super, super amped. This is going to be a fun example. And just yet another way that you can apply the skills you learn in this course, which is focused on forms outside of forms, right? This is just another example. So we're going to be using the progress elements without video, as I explained in the introduction. And we're going to display the completion status to the user. How do we do it? Well, the very first step is, let's create an HTML document. Within your body. And the body, I want a video elements and I have my minions video in the same directory. It's very, very simple. I want to give it an ID of anything we want. Let's just give it an ID of COVID. The problem with this though is we're going to need the controls attribute. Because if we look at this on the browser and refresh, we've got our video but we can't play it. There's no controls. So there's gotta occurred and just add on the controls attribute. Let's go back to our browser. And there we go. Let me just mute the song. Otherwise it's going to get very annoying and it played. But right now, there's no visual cue to the user on the webpage itself as to how far along we are in this video is you can hover over the video and you can kind of see this bar here, but it doesn't give you a percentage itself. So how do we do this? Well, firstly, I just want to start off the bat by saying I don't want to worry about CSS and styling. I just want to show you how to do it. So it's not going to look pretty, but it's going to be super, super interesting and useful for you. So the first thing I wanna do, we're going to want a progress bar, right? So let me create this progress bar. Let's give it an ID of progress bar. Remember the two very important attributes when it comes to progress bars? It's right, it's max and we wanting a bussiness, yeah, right. It's going to start from 0 and all its way up to a 100 percent complete. And the other important attribute, because we don't want it in an indeterminate state. We wanted in a determinant state. And in order for that, we need the value attribute. And the value is going to start off at 0. So obscure the browser. What does this look like? So there we go. We've got our progress elements. You know what, let's actually just display it as block. Will have a style section here, progress display block. And then we go at least as displayed below the video now. But of course, it's not linked to the video at all. We're not updating the value dynamically. Nothing's happening. Only want the progress bar to be kind of growing visually, are also want a percentage number shown to the user. How do we do that? Let's right, we use the output element and this output element we can leave empty for now because we're going to dynamically add values to it. All right, so this leaves me with the question, how do we now dynamically update these numbers? That's right, whenever you hear the word dynamic, ding-ding-ding JavaScript. So we have to use some JavaScript here. And on the video element, we get access to any event listener called time update. And this updates literally all the time video. So we want to listen to that event all the time and constantly update the output element and the progress bars value. So let's cut up some JavaScript together and let's get this done. You know the drill, we have to start off by including our JavaScript within script tags. I want to now finish our video element itself because this is where we're going to attach the event listener, right? We can do that by accessing the document object, get element by ID, because we gave it an ID of vid. Can you see it? Id of COVID. So there we go. We've got our video element. I want to now get our progress bar itself. Let's put it in a variable called p bar. And very similar procedure, Let's get element by ID and we gave it an ID of progress bar. So there we are. We've got our progress bar, we've got our video. Finally, I want to grab our output, is define it in a variable called output. Again, document. Now we can actually get elements by tag name. We haven't even given an ID. The tag name we want to get is the output. But bear in mind, this returns an HTML collection. I don't want a collection, I want the actual output itself. So we access the first item in the collection, which we know is this output because it's the only item in the collection. So there we go. We've literally fetched all the elements we need to in order to make this work. Now, we want to listen for what? That's right, the time update method. So let's access our video element. We put it in a variable called video. And let's create an event listener. And the event we want to listen for is the time update event. And then when it's fired, let's execute a callback. And I'm just using the arrow syntax. Yeah, and what do we want to happen? And it's callback. It's very, very simple. The first step is we want to get the percent percent completion. I mean, and in order to do that, all we have to do is access our video object on here, the browser gives us access to many different properties and methods. One of these on a video element is the current time. And all we want to do to get a percent is we want to divide the current time divided by the entire duration. And we have a property on the video object called duration. So this is not what I typed or are coded. This is given to us by the browser. And in order to convert this into a percent and not decimals like 0.008. In order to get 8%, we just want to multiply it by a 100 and that's all I'm wanting to do. And then what are the two things we want to do? The first thing we wanna do is update the value attribute of this progress bar, right? Because that value attribute has to grow all the way up to a 100 percent. So we have to replace it with the value of present. And it is this easy. Let's access our progress bar. That's affect its value property and assign it the value of the percent. And then the final thing we have to do is I want to visually display the actual percent figure to the user in that output element, we need to do is grab that upward element, change its inner HTML, and assign that the value of what? That's right. Again, why don't we even put a percentage symbol after that? Let's save this. Go to the browser. And should I be daring enough to push, play tennis on mute? All right, let's do it. Let's do it. Or look at debt Medea students. I know we haven't rounded this to two decimals, et cetera, et cetera. We could be very funky InDesign. But I wanted to show you how cool and easy it is. We using the progress element, we updating the value property dynamically. Or may maybe we should listen to some music or art, or art. That's enough, That's enough. So they regain hope you're having a lot of fun hoping joining this course. And I can't wait to see you in the next lecture. 30. Progress bar form challenge - intro: Here we go. This is another cool example. I'm super-excited. Hope you ought to remain a smash it together. Seriously, we are. And it's really cool because we're using a progress element on a form. It say we've got a form with multiple questions. Let's even say you're designing a questionnaire. You might want to give the user a visual representation as to how far along they are in the entire process. And you might want to give the user some encouraging messages along the way. So that's what this example is all about. We've got a form and I've only got five questions. And I've just done inputs with the type attribute is going to take very, very simple. I know, I know it's a very simple form, even the styling at having gone crazy. But you'll notice that when we land on the default page here, we've got a message, the form, it's cooling in and we've got a progress bar with the progress bar right now it's empty. But as soon as we start off with one question and the user starts typing, wow, cool, set. Firstly, the message has dynamically updated. The progress bar is dynamically updated, and the user has a visual green background displayed to him or her, showing that this is now a valid input, are awesome. And let's do the second one. Same thing. Progress bars updated and we have a new message. Excellent, Keep on cracking. Of course, when we go to the third question, we get another message. Champion, don't stop. The progress bar, keeps going up and get new messages. And when we hit question number five, we've got one final message. And that is go on to push, Submit. You giving the user encouragement to submit the form. Very, very cool example, very practical example. But can you think about how to do it? Is we have to use JavaScript. And whenever you think about JavaScript and dynamically updating things, you gotta think, okay, well, what event are we listening for it you can probably listened to quite a few fancier. I chosen the solution video, which you'll see to listen for the key API that every time basically a characters ticks field, I want to loop through all of our inputs, figure out how many are valid. And then depending on how many on valid, we then update that progress bar. So for example, if nothing has entered into question to the progress bar needs to decrease because we've looped through this collection of inputs. And we've only determined that now for a valid out of five. So I know it's a bit tricky because we're going to have to move through something. You're going to have to get a collection of all these inputs. And then we have to keep a track, aka we have to create a variable keeping track of how many inputs of elegant and node might be a bit advanced. Know that, but stick with me. I believe you can do it. We've done a lot in this course already and give it a crack, give it a go. Even if you can only do the HTML, that's fine. The three elements to the solution, by the way, it's pulling the HTML. Let's then styling HTML CSS, and finally, it's adding JavaScript. So I want to split the solution into two videos. One dealing with HTML and CSS. And the final part of the solution will be dealing with the JavaScript. Have given a lot of fun and I'll see you in the solution videos. 31. Progress bar form challenge - building our HTML and CSS: This is a really, really cool example because we applying the progress bar to a form and this course is all about forms. How do we build it? Well, the three facets, these, the HTML, the CSS, and of course, the JavaScript. So let's start off with the HTML. Then we can continue on to the CSS. And finally we can finish off with the JavaScript. So let's start with HTML. Yes, we're going to need two styles. Let me just set everything up. But for now, we can just leave that blank and wrap everything within a body. I do once a form, because this is an example of a form. Let's actually give it an ID of main form. And then we can wrap everything within here. We can have a heading, progress form. And then what I wanna do is I want to create our progress. Remember it's at the very top under the heading and I want to wrap this in a div. This just give it a class of hitting record for lack of a better word. And within this div, I want to include our progress bar. I want to give it those two important attributes. Do remember what they are. That's right. I wanted to do a max attribute of a 100 and the starting value is going to be 0. I want to give this an ID as well, just so we can grab it later in JavaScript and let's just give it an ID of progress. Very, very simple. The other thing below this progress bar was what? That's right. There was a cool, funky message to the user. So let's wrap that in a div and give it an ID of message. And the default value can just be the form it's calling year. So there we go. We've got our heading, we've got our progress bar, and we've got the message displayed below it. Let me go to the browser, refresh. And this is what it looks like. You can see it's starting to take shape. Below this, we obviously want all the input elements. And then below that, the submit button. So let's quickly create that. Now. We still in our form, we still in our form. And we don't have to in this example, but I want to just, you know, you need to get in the good habit of creating labels with every form control to improve user experience, let's create a label. This can be questioned one, and of course, Question 1. And we can create an input of type text. We don't need a name attribute. The ID has to match the for attribute which is Q1. And remember what I said, I want all of these to be required. And in order to do that, yes, we include the required attribute on the input type of text. Okay, so there we go. That's our question one. And we literally need to do this five times, right? This is 2, 2, 2, 3, 4, and 5. We save this. We go to the browser, refresh and boom, we've pretty much done how HTML, how quick is this? Let's just go here and the last step is to create our pattern. So we want a button element with its type attribute, sit to submit. Save this, go to the browser. And there we go, My dear students, we're done with the HTML. How quick was at? I know we cruising very quickly, but I think you're getting the hang of all of this now. So let's quickly now take HTML, which is done, but apply CSS styling to it. Again. Let's grab our body element, change its background color, two watts. Let's do triple three. You know, it's a shepherd side to side. Then you can kinda see how it's progressing as we go on. I want the line height to be slightly higher than usual. So let's do 1.2. So all these little subtle things that really make a difference, I want to add padding, say 20 pixels. There we go. I don't like you see how all the input elements and the labels are displayed inline by default. So why don't we take our label labels and will affect us display property to block. We can also change the color of the actual text to the same color as the background. I know you won't see anything now, we're going to change the background color of this whole form shortly. And in the margin on the bottom. I just wanted to affect this 35 pixels. There we go. Actually, before I move on this just quickly grab our main form. Remember, okay, but an ID of main form, can you see it? So we're doing here, and I want to give it a background just so you can see what's going on that allows you to get confused. Let's just do a nice blue color at the IGA. Now you can kind of see what I'm doing. I also don't want the form stretched across the entire screen. So let's give it a width. Yeah, that's better. I don't like the squareness of it. In order to fix that, we've got to change its border radius property. Let's just have a small rounded edge. There you go. It's coming up, it's coming on. And give it nice padding. It starts at the top right, bottom left. Look at that. You can really see it starting to take shape. So there we go. That's our main form, days, our label. And if I didn't have this margin bottom, bottom, let me show you what happened. It's just too bunched up. The input element is so close to the label, which is why I just added five pixels below it. Okay, we've affected the styling of the label. What's next? Well, we haven't done the input itself heavily. So let's grab the input. The width, yeah, why don't we get that stretching across the entire length of the parent so we can define it as a 100 percent, maybe go. And obviously it doesn't hit the edge because we've given a 20 pixels of padding. If we actually gave it 0 pixels on the right of padding, then it would hit the edge. That's why we gave it padding. Just looks nicer. So there we go. That's the width of a 100 percent. The display property. I don't see that shouldn't actually matter here. And we've defined the labels as blocks. But I just want to put display block because intuitively that are think there should be an endless give some padding input box just to make it a bit bigger. Now what I want is I want to remove the outline, right when the user selects and inputs. Can you see that black outline? I don't want that day. So let's just basically define it as 0 pixels. So when the user now toggles each one, there is an outline. It's also going to border if you can see it, but I don't want a border. So let's also just get rid of that. And all the input elements are too close to each other. So let's give it a margin, bottom of 10 pixels. That's coming on quite nicely. We've defined styling for the label, the inputs. Let us, we've got the button right, so let's grab our button that's called the style that we can give it a background of the same color as the actual background on the page. The width can be a 100 percent padding. 10 pixels. Looks fun. Margin top. It's a bit too close right? Into that input box. That looks better. Font size, let's increase it a bit. 1.1. Yep, it's better. Color can be white. I don't like that default border on this button either. So let's define a border of one pixel, solid black. Yeah, I think that looks nice. Cursor can be pointer just so the user knows it is actually a button. And then why don't we give this a box shadow property, right? Very quick, very quick, very quick. We've done this all before. Yeah, it looks nice. That looks nice. Just to make it kind of top of the form. I don't like the squareness of this button. And in order to change that, we affect the border-radius property. Just make it slightly rounded corners. There we go. Okay. So that's the button. Cool. What else do we have to do? Oh, we wanted to do the hidden rat. Doesn't look that great at the moment. In order to style that, we gave it a class of hitting wrapper, Let's write clause, hitting rapid font size. Let's make it a bit smaller. Color. What takes the line? Let's get this thing in the center. And you can see how nicely and how quick this is really, really cold. And this just gives us a margin right, top to bottom 20, and then lift of 0. So we just effectively doing margin-bottom. I didn't have to do that. I could just go margin bottom. 20 pixels. Same thing. Next. I want to just style a little bit of their progress bought and lacA, that it's bunched up in the scene to lactate. So let's grab our progress element and let's make it a bit higher. Yeah, that's better. And I want it to stretch across the entire width of the form. There you go. And it doesn't hit the edges. Remember, because we've given the edges 20 pixels of padding, maybe it's a bit close to the text beneath it. So let's give some margin bottom at about three pixels. Eager, eager. Then the final thing I want to do, remember these inputs are required fields with the user types is no visual feedback that it's valid. All we have to do, do you remember? That's right. We target our inputs and we want to target the valid pseudo-class. And all I want to do is change the background color to a nice light green color as well. Let's go here. Let's type. That is just beautiful. To zoom out. And shall we go? Html done, CSS done. The only thing left is JavaScript. And what we wanna do is we want to dynamically update this progress bar and the messages so that when the user starts filling in the form, that progress bar kind of visually tells the user how far along they are. And the user gets different messages, motivational messages to keep going. Think about how it is we can do it because I want to take a break now. And in the next lecture, Let's add JavaScript and let's complete the solution. I can't wait. 32. Progress bar form challenge - adding JavaScript: Did you give it a go? I hope so. But if not, it is a bit tricky. So it has no hard. I'm gonna be showing you how to do it now. But think about it is before we start on the JavaScript, just think about how we will go about doing it. Firstly, we've got to listen for an event. And when the user starts typing in this input box, I'm going to be listening for a key up event. For me doesn't have to be the keyup event you could have probably listen for when the user clicks out of the box like the pleura, even for example, doesn't matter. You just have to listen for an event that's appropriate. I'm going to listen for the keyup event. Every time that event is fired, we have to now determine how many of these input elements are valid, because this progress bar has to tell the user how close they are to completing the form. So when his only, and this is the reason I chose five by the way, because when there's only one question, it's valid. We know that 20 percent of the progress bars complete. In other words, we want to dynamically update the value attribute of the progress elements to 20. When two are selected, we want to update it to 40, 60, 80. And when the last questions hits, I don't actually want to do it as a 100. I want to do it very, very close to a 100 because the user still has to click on Submit. So it's just a very easy way. It's why I chose five numbers because 500 divided by 5 is 20. If it were easy, enough, jumps, we doing. So that's the first thing we gotta do JavaScript. We have to find a way to look through all those inputs, figure out how many are valid and the ones that are valid. We count right at these two valid, we show 40, 50, 60, etc, etc. The second thing we wanna do is we want to show dynamic and messages to the user. Right now, the message is, the form is calling you. But as you saw in the introduction video, we want that to change. So there's a two things we have to change every time we listen for Wikipedia. If you got it. Cool, Let's get cracking. Let me expand our editor. Yeah, because now we're going to be getting into JavaScript. Remember, JavaScript has to be included in script tags. Her care, her care. This is where we need to just think logically through this. The first step should be to grab all of our elements we need from the page. It's grab all of our elements. How do we do that? Well, Very easy. Let's first grab our progress bar and put it in a variable called progress bar. I know very boring, but it's very intuitive. We can do so by accessing our document object, getElementsByTagName. The tag name we want to get is progress. And remember that when we use the getElementsByTagName, you'll know if you've done my DOM causes. This returns an HTMLCollection. We don't want to collection, we want the actual progress ball itself. And if you look at our HTML, we only have one progress elements. Therefore, we can just access the first item in debt collection. So there we go. We've got our progress bar. How easy? The next thing I wanna do is I want to grab our message elements, right? I'll message because we want to dynamically update that as well. We wrapped it in a div and we gave that Devon ID of message. So yeah, I'm defining a variable called message and JavaScript. And we want to get it dropped document, get element by ID. And the ID we gave it was missing. There we go. We've got our message, we've got our progress bar. The other thing I want to grab is our fault because we going to be listening for events on the form itself. Like why shouldn't we be listening for the events on the actual input elements, not the foam ball. If you've done my add-on courses, notice but events, not all events, but a lot of events. Bubble. They bubble up through the DOM tree. So even though the vent is being fired from an input element below, we know that that event will bubble up to the form element itself. So that's why we can actually listen for all events on the form element. And we don't have to individually add an event on every single input elements. So in order to listen for an event on the form, we obviously have to grab our form. So we grab our form by accessing the document, document object, get element by ID again, and we gave it an ID of main form, right? If I scroll up, we gave our form an ID of main form. Cool. So we've got our progress bar, we've got our message div element, and we have our form. The last thing we need is our required inputs. The reason we need all of these inputs, scroll up all of these inputs is because we have to loop through each one to determine how many of them are valid. Right? Because that's going to determine the values of r value attributes and our message. So let's define a new JavaScript variable called required inputs. And yes, we accessing the document object on here, we can get elements by tag name and the tag name we want to get as input, not inputs, input. Now remember, this getElementsByTagName returns a collection, but this time we want to keep the collection because we need to look through that entire collection to determine how many of these inputs are valid. It's not the same with the progress bar. Remember the progress bar, we only have one progress ball and that's why we access the first item in the collection. With that race and texts and retrieval method. I want to add an event listener on the form itself. And remember, we can do this because the event of keyup will bubble up the DOM tree. Let's just say you remember how or why we can do this. So let's grab our form element that we defined above. While variable. And on here, you guessed it, we want to add an event listener. The event we want to listen for is the keyup event. And when the keyup event is fired, we want to execute our code, our business logic. And it's all going to sit within these curly braces. What are the steps? Yeah, well, the first step is, let's define a variable that keeps track of all the valid inputs. So right now, when we initiate the page load, we know that our valid inputs variable, we've just made that up. We're going to sit that etc. They are going to be 0 valid inputs, right? Initially, the next thing is, and I keep saying this is we need to loop through all of the inputs in our collection and determine if they are valid. If an input is valid, then we want to increase our valid input variable. Does it make sense? I hope so. I hope to actually, you know what, let me just show you first that this is a collection. So what I wanna do is I want to console log our acquired inputs to the console. So let's go to the browser. Let's inspect this element to the console. Right? Let's type the letter a. And here we go. We've got an HTML collection. That's just what I wanted to show. You, wanted to prove it to you and it's got all of our inputs in. Yeah. Okay, it's got a length of five. So that makes sense. Sorry. I just wanted to show you before we keep going on. There we go. We've got a collection. We know that required inputs is a collection. So how do we loop through it? Well, we can use the four of Javascript method of method. And how this form of works is it's very, very simple. It loops through each item in this element. Let me open this up. It's going to loop through each input. And on the first loop it's going to give us the first input as an object. And we can define an object is anything we want. Let's define that object as input because that's what the object is. It's an input. And then you've got to define the collection that is looping through. In our case, it's the required inputs collection. Okay, so every time it loops through, what do we want to happen? Will we want to check whether that input is valid, right? Whether the valid property exists with its own. So what we can effectively do is just do a simple if statement. We can grab our input that it's looping through in its current iteration. And we can access its validity objects within a, this a property called valid. And if that is true, this if statement will execute. And if true we know it's valid. And then we want to grab our valid inputs variable. And we want to increase its value by one. That's just what the plus plus means. We grab it and we increase its value by one. And this is very crucial code because this is the entire looping code we need. It's going to tell us how many valid inputs there are and it does work, brad. So after this loop, why don't I just hear console log the valid inputs and I'll show you. Let's go to our browser, refresh everything. And let's just do question one. Type the letter a. We've got a valid input of one. Let's do question 2. The numbers 2345. How awesome. This is perhaps the hardest bit of code. And we've done it. And you can see it wasn't that difficult, was it? Let's go back and let's finish this off. Does now we've got how many inputs are valid and that is crucial, crucial for us. Very, very simple now to finish off, because all we have to do now is change the value of the progress bar and the message. Depending on how many inputs are valid. Valid, IE, depending on the value of the valid inputs are variable. Is this making sense? I hope so. I hope that. So all we have to do now is just define multiple if statements. If the valid inputs is one, then what do we want to happen? Well, we want to grab our message variable and we define that as that div with an ID of message. If I scroll up and our HTML, we literally grabbing net div with ID of message. That's what we're doing. And we want to change its inner HTML property to, I don't know, because it's the first input f1 Vicious. Give them a bit of encouragement. Nice, good start. So now we've changed the message. The next thing I wanna do is I want to affect our progress bar. We gave it a variable name of progress bar. We want to access a method now and the DOM or HTML gives us this method SIT attribute. And we want to seek which attribute we want to see it, its value attributes. And we want to set its value to what you guessed it, 20, because only one input is valid. So if we go to our browser, let's get rid of the console now. And let's type a in question 1. How awesome is that? The progress bar is updated and the message has been updated to us as well. I hope this is putting a huge smile on your face. Really, really is cool, isn't it? All right, but we're not finished, Ollie. Let's keep working through this. We need another one, another one, another one, another one. So let's say this is number 2, the two valid inputs. What do we want to say? We can say a learned keep on cracking. And of course this value is going to be 40. This one's going to be three. So it's going to be four. So it's going to be five. This is going to be 60, 80. And like I mentioned in the introduction, Let's have 95 rather than a 100. The last come in can be Go on. Kush, sediments. When we 80 percent done, we can say almost done. We need 60% done. We can say, Champion, don't stop. It's got our browser. And let's give this a test question. One, nice Good question to lunch. Keep on cracking question 3, champion, don't stop question for we're almost done. And question five, go on, push, Submit. And how awesome is this? Smiling right now, have getting a lot of fun. Cool example, isn't it? To show you how we can use the progress ball and a very practical way on forms. And I could've style this a bit bigger. We could have done a few more things, but I wanted you to at least have the skill set to no bad applies to real life applications. And I hope you understood everything. If not Q and a, I forget to help you in many different ways, but also colored. I'm not saying always the base play. Obviously, if we remove these things, it goes through the loop again and it updates. So yes, they made you different ways to do something. This is just one way. Anyway, before stopped pedaling on too long. Let's move on to see you in the next lecture. 33. Class Outro: All good things come to an end as the saying goes, don't worry, we're not quite finished and this entire series, but we are finished with this class. And in this class we looked at various form controls, progress bars, millibars, the daughter list element, that exterior elements and a whole bunch more recoded up really cool examples. And right now we really are starting to become a forms, a guru. So well done, don't take all the and that you've earned for granted, you really, really have come a long way. Would like I mentioned, we're not quite done with this entire series. In the next class, I want to start talking about a form styling because some widgets are very easy to style, like the input of type text. And some form controls are notoriously difficult to style. And things like inputs where it's time to attribute is C2 file. But don't worry, I've got some tips and hacks to help you along. So follow me along and I'll see you hopefully in the very next class, Walden.