How to Create a Full-Screen Slider With CSS and Vanilla JavaScript

3.1 Simplifying the Markup With JavaScript

Welcome back to the course. In this lesson, we're gonna simplify the markup by generating a large portion of it with JavaScript. So let's begin. Now currently, our markup looks something like this. We have the radio buttons, the labels for those radio buttons and the slides. Now, the way this works is that we have a radio button for each slide. And by looking at the structure, it's actually very easy to generate this recursively. So why not make things easier for us and generate the radio buttons and labels with JavaScript. That way when we're creating the new slider, all we have to do is create our slides. And depending on how many slides we create, JavaScript will generate the necessary inputs, the necessary radio buttons actually, and labels for us. So, what I'm gonna do now, is just comment this whole section and we can get started with the JavaScript. I'm gonna start by saying document.body.onload and I'm gonna call the initSlider function. Now here, I'm gonna start by defining my main containers. For that, and actually for the rest of this course, I'm gonna be using the ES6 JavaScript syntax. So if you're already familiar with JavaScript, but you don't know what ES6 is all about, well, ES6 brings in new improvements to how we write JavaScript. And it's actually been around for a while. And it is currently compatible with all modern browser. And using ES6 is more elegant and also, it allows us to write more efficient code. So I'm gonna define two constants. First is for the sliderContainer and here, I'm gonna say document. If I can type, getElementById('slider'). And our second constant is for the pagination container. So I'm gonna say paginationContainer. But this time, I'm gonna create it. So document.createElement)('div'). And by the way this is all Vanilla JavaScript, we're not using any kind of library here, like jQuery, nothing like that. It's just pure Vanilla JavaScript. So now, let's create the pagination container. Or let's actually set some properties for it. I'm gonna say paginationContainer.className will be equal to 'pagination'. So we're basically trying to rebuild this markup right here. Also, I'm gonna do this, sliderContainer.prepend(paginationContain- er). This will basically place the pagination container that we just generated at the top of the slider container. If you were to use the append function, that will place the element at the bottom of sliderContainer. But in my case, I want it to be at the top. And this is actually very important because of the way we wrote our CSS. We used that general sibling combinator. And that only works if these elements are before the actual slides. So, with that out of the way, let's generate some radio buttons. For that, we must first count how many slides we have. So I'm gonna create another constant here, slideCount. That's gonna be equal to document.querySelectorAll('.slide').len- gth. So this basically returns an array and .length gives us the number of items in that array, it's very simple. Then we're gonna do a for loop. So for (let i = slideCount; i > 0; i--), so we're kind of doing a backwards for loop. Normally you would have for a variable i = 0, i smaller than something, i++. This time we're going the other way around because we wanna generate items in the correct order 1, 2, 3, 4. And we're gonna do that by using the prepend function. I guess you could do it the other way around with a normal loop. But for me, this made more sense. And by the way, if you don't know what this is, let, that's equal to var. So I could easily say, for var i = slideCount, but let is actually the new ES6 syntax. So let's go ahead and generate the radio buttons. I'm gonna create another variable called radioBtn. And this is happening for each iteration. And I'm gonna say document.createElement, 'input'. And then I'm gonna say radioBtn.type is gonna be equal to 'radio'. radioBtn.name is gonna be equal to 'slide-radios', right? So if you remember, this is what we're currently working on. I must also add a class name, that slide-radio. And if it's the first element, we must also add the checked attribute. So let's add the className. That's gonna be equal to 'slide-radio'. And let's also add the id. So radioBtn.id will be equal to, and this is where we're gonna use another ES6 feature called template literals. So for that, I'm not gonna be using normal quotes. Instead, I'm gonna be using backticks. And I'm doing that because I wanna do slide-radio-, and then I can bring in a variable in here. If you were writing normal JavaScript, you will do something like this, quote, quote + i, something like that. But with template literals in ES6, we can do this much easier, much more elegant like this. And finally, if we're dealing with the very first item, with the very first radio button, we gotta set the checked attribute to true. So I'm gonna say if i, Equals 1, then radioBtn. Checked will be equal to true. Finally, after all of this is said and done, so after I create the actual element, I have to append the radio button to the slider container. And actually, I have to prepend it. So for that, I'm gonna say sliderContainer.prepend(radioBtn), all right? And now if we take a look at the source code here, You will see that at the start of our slider, I have four radio buttons. Very cool. Finally, let us create the labels. We're also gonna do that inside the for loop. So, generate the labels. I'm gonna create a label, documents.create, Element('label'). And I'm gonna say label.setAttribute, 'for', and again, I'm gonna use the same syntax as I did here, `slide-radio-${i}`. And finally, I can append the label to the pagination container. And actually, I'm prepending the label. So I'm gonna say paginationContainer.prepend(label). And that should be it. Let's see, did we get everything? Because the labels are not showing up. So let's actually do an inspect here to see if we missed anything. So we have the radio buttons, the four of them. Slide radio 1, 2, 3, 4, good, and then , label for slide radio 1, 2, 3 and 4. Okay, so they're here, they're not showing up because we actually don't have a content for them. So it's actually quite simple, all we gotta do is set label, InnerHTML will be equal to, i. Right, so that gives us 1234. We'll replace these later but for now, Our slider is once again, functional. So with that, we can actually go ahead and delete, This part of the markup. And by doing that, we've now simplified our slider a great deal. Because when we're creating a new slider, we no longer have to write the radio buttons and labels ourselves. All we have to do is enter the slides and JavaScript will calculate how many radio buttons and how many labels to generate for us. Very, very cool. Now what happens if JavaScript is disabled? Well, only the first slide will be displayed. And that's it. We won't have any way of changing the slides because the radio buttons won't be generated. The labels won't be generated. So we're kinda stuck with that. But that's not really a concern right now. I think most people will have JavaScript enabled in their browsers. If you want to account for that situation as well, then you can simply go with the CSS only solution that I showed you at the end of the previous lesson. But if we want a more, what's it called? Modern progressive solution, then using JavaScript here is a welcomed addition. Now, since we're writing JavaScript code, we might as well go ahead and add an autorun feature. So slides will change themselves after a set amount of time. We're gonna do that in the next lesson. So I'll see you there.