Content we can just add it to the JavaScript array and it will be updated in the UI so let's do that in this video Let's let get [Applause].
[Music] started now making this modular using JavaScript can be really useful for adding it to any website so you just have to make changes in the JavaScript.
Array and everything else will be automatically generated and we'll also generate these numbers automatically so right now we have to type all these numbers manually but uh we'll just.
Generate all of them automatically using jav JavaScript so the first thing we need to do is uh we need to create a JavaScript file so let's create a new file called main.js and let's link it.
It list items and let's create an array and in the array we will have several objects so let's create an object and the object we will have key and value pairs so the.
First one is going to be the title so here we can see we have the title so let's create a key called title and let's add the value over here so we can just go ahead and copy this text from.
Here and let's paste it inside the title so this is the title now let's go ahead and add a comma and let's add the other key so the other one is description so here we have the description so let's.
Copy this and here let's type description and let's add the description over here and after the description we need to add the image so the image is basically inside our sty.
CSS file so here for each of the list items we are adding different images so now let's go ahead and store the URL of the images inside this object so here I just type image URL and uh let's set it.
Posts Related:
- Working with Database using .NET (Access DB, OLEDB, C# .NET and VB .NET)
- How To Design, Fill & Send Unlimited Documents & Contracts In Excel Without 3rd Party Apps Part 1
- 460+ Professional Editable Logo Templates Download In PSD AI EPS Files English Photoshop Tutorial
To the URL of the image so the first one
Is this image right here so let's copy this and I'll just paste it over here now in this way we need to create all the list items that we have So currently.We have three list items so I'll just copy this and paste it down here and paste it one more time and let's change all these details so for the second one let's copy this uh title and let's paste.
It over here and then let's go ahead and copy this description and paste it over here and we also need to change the image so the image is inside the styler CSS file.
And this is the URL so let's copy this and let's paste it over here and then lastly we have the third list and let's paste it over here this is the title and then we have the.
Description and let's paste the description over here and then lastly we have the image so the image is images for/ 5gj PG and let's paste it over here right now that we have created this.
Array of objects let's go ahead and write the code to display the UI so we need to display all this HTML inside our inside our custom list division so first of all let's reference this custom list.
Division so just type const custom list equals document. query selector custom list and now we need to Loop through all these list items so let's type list items do for each and for each of the.
List item I'll just call it item and uh let's also access the index so I'll just call it index so this one is the actual single item and this is the index of the item.
Which starts from zero and let's create an arrow function so here let's go ahead and type custom list do inner HTML and here we need to add the HTML of the list so let's t plus.
Equals and let's add back Tex and let's
Copy the HTML structure so let's go ahead and copy this uh division with the class of list item and let's paste it over here right now if you go back to.Our website and if you scroll down we can see that we have the UI being displayed over here but it is all the same content because we have added this hardcoded data over here now let's go.
Ahead and convert this to variables so the first thing we will do is we will change this heading so let's remove this and let's St dollar symbol color braces to add the variable and we need to.
Access the single item which is item so let's T item Dot and we have the title inside the array so here we can see we have titles and then we have the description so let's goad and delete.
This and here let's tab dollar symbol color Braes item do description and now if you go back here we can see that we have the first title and description we have the second title and description.
And the third one now we need to change the numbers and also the images inside the numbers now here we can see that for the numbers we are adding this class called number one and in that we have.
Added the image using CSS now what we will do is we will directly add the CSS property over here so here let's go ahead and type style equals and uh here let's T background image URL and and.
Here inside the URL we need to add the URL of the image so let's Ty dollar symbol color braces and here let's tap item and for the image URL we have this key called image URL so let's select.
That and now let's go and save this and uh now if you go back here we can see that we have different images for the number now we need to change the actual number so for.
That let's go ahead and uh create a variable and let's call it number equals now the index starts from zero now we need to start the number from one so let's St index + one let's go ahead and.
Convert it to string and let's add a function called pad start so it will add a zero if we have two digits so here let's St two and for the placeholder let's Ty zero right now we need to add.
This number over here so let's type dollar symbol color bases number and now we can see that we have one two and three displayed over here so everything is working all right now we.
Can simply go ahead and delete the code inside the HTML so let's delete everything inside the custom list and now if you go back here we can see that we have the design but.
Everything is being displayed dynamically using JavaScript now if you want to add or remove any of this content you can do that directly in the JavaScript so if you go back let's go to.
The main.js file and let's add a new list item so let's copy this and let's paste it down here and uh let's add some title over here I'll just tap test and for the description let's add test.
Description and for the image let's change this to the first image which is uh Ai and now if you go back here we can see if you scroll down we have the.
Fourth content and we have the title and the description and the number four is being generated automatically and we have the correct image displayed over here as well so this is how we can make.
This design modular using JavaScript right so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like.
Button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day [Music] [Music].
