Custom Data Attributes HTML JavaScript CSS Tutorial

Learn to use custom data attributes. Custom data attributes allow authors to create custom data to apply to their HTML elements when no other attributes make sense to use to store extra data. They help extend the information that html elements can communicate to a program or script. Custom data attributes can be accessed through both JavaScript and CSS.

[sdhpCH]

Just for inspiration to the viewers: Another good use of the data-attribute that I tend use very often is in a table that is fed off a database. If you attach for example data-id to the table row tag you can access the id of the mysql-entry - which is very helpful if you want to place a edit or delete button which then affects only a certain row within the table... Nice video again. Sir Adam... :)

[youthanek]

wow. you are actually a very good teacher. i have no idea what Custom Data Attributes is about but after watching your video i actually understand what is happening! omg. you have a talent in teaching!

[ga]

You have no idea how much I loved your video and the way you explain things, too bad that I can't find any of your new videos unless you stopped making them.

[FlurAhFlur]

Love the pace of these and how you explain everything in a good amount of detail. I wish you did .NET videos as well xD

[bradical]

Intuitive! You explain all your videos better than anyone on youtube!

[angelmauriciorivas]

I hope you understand my english, It was an excelent and amazin example. I will learn more javascript code from your videos, I understood very well thanks a lot.

[SeanzySmooth]

So well made. Outstanding. The pacing is quick, but you learn so much.

[Cizzbar]

as always: you are my hero...the one and only. thank you for your guidance.

[mynameiskranz]

wow amazing! always new knowledge for me! THANKS A LOT!!

[stephanstanisic]

Wow, that it is so easy. Didn't knew that. Thanks a lot!

[davitjanashia]

First of all thank you for very clear explanation! One question, how it would be different if we would use classes instead of data attributes?

[alessandrosalzo]

Hey Adam, nice tutorial.

I was wondering, if you could do a video showing how to make a login script and display hidden content just for logged users.

[soultouchingsongs]

Excellent info and very creative example. Learned a lot from this video. Thank you so much 🙏

[TheValocity]

hello, Adam. do you think you can show how to script dropdown list with java, Ex: B, drop down list only show option when dropdown list option A is selected.Thanks for great videos.

[alimansourey]

you are not supposed to be using data-* attributes as selectors in css ( according HTML living specs) . this example is valid though, if you instead use the rockets's data-* attributes for filtering procedures.

[sudarshankj]

The first rocket is faster than the second one although its speed is lesser. The first rocket is at a higher altitude than the second one although its altitude is lesser than the second one.
This is because of the way ‘top’ and ‘transitionDurartion’ work, but I guess it’s good to use better attribute names to clearly indicate these differences. Anyways, good video mate! Cheers!

[salv]

@3.51 i see the use of var would be better to use let in this instance, not sure it might work i think its only used within arrays or objects maybe we could replace the for loop with a high order function such as map to iterate.

[namanjindal]

I did not understood the for loop in the code. we are using rockets.length as the end of iterator. how does it create an animation that too in which both rockets are moving simultaneously

[stormybear]

What is the editor that you are using to write this code?

[naziruadam]

Hey Adam. I've always wanted to be the first to watch one of your videos and give you a thumb up, and I think I'm lucky today. A BIG THUMB UP!!!