CSS Variables Tutorial #4 - CSS Variables & JavaScript

DONATE :) - www.paypal.me/thenetninja
Hey gang, in this CSS variables tutorial I'll show you how we can interact with our custom properties using JavaScript. This is yet another advantage that CSS variables have over SASS or LESS variables.
----- COURSE LINKS:
+ CJavaScript DOM Tutorials - kzbin.info/aero/PL4cUxeGkcC9gfoKa5la9dsdCNpuey2s-V
+ SASS Tutorials - kzbin.info/aero/PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA
+ Course files - github.com/iamshaunjp/CSS-Variables
+ Atom editor - atom.io/
======== Other Tutorials =========
----- NODE.JS TUTORIALS
kzbin.info/aero/PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp
----- MONGODB TUTORIALS
kzbin.info/aero/PL4cUxeGkcC9jpvoYriLI0bY8DOgWZfi6u
----- SUBSCRIBE TO CHANNEL - kzbin.info/door/W5YeuERMmlnqo4oq8vwUpg
======== Social Links ==========
Twitter - @TheNetNinja - thenetninjauk
Patreon - www.patreon.com/thenetninja

[@psingh98973]

The way, the art of your explaining the concepts is amazing.

[@Biggs6677]

Seriously the best tutorials about web development on the net.

[@carlosfernando8439]

thanks net ninja, you are always so clear and precise

[@ritchamonteiro1002]

Very clear, thank you for your tutorials, I'm learning much better here then at school

[@lazalaza93]

Absolutely brilliant! Can't wait to proceed with the JS series. I don't know if it has anything to do with the fact I'd already covered many of these topics, but your explanations make perfect sense - like 10ish minutes of pure awesomeness!

[@NetNinja]

Thank you so much :)

[@malcolmcolindixon]

Thanks Shaun, using CSS variables in Javascript was really insightful. I thought it was best practice to not use inline styles, i.e. keep content and styling separate, so I created the span background style in the styles.css using nth-child(). So, when I came to the Javascript section it failed, then I understood why you did it that way, but undeterred I investigated how to maintain that separation and used getComputedStyle() function instead, therefore learning more in the process. More of your CSS courses to do before tackling your Udemy Javascript course I recently purchased. You are by far the best teacher I have come across, which shows as I bought your course and I'm a total skinflint and considering there is that much free web content anyway shows how highly I regard your courses.

[@mc85eu]

This last video blew my mind, because I know next-to-no JS; but I felt like it was extremely clear, and that I would have understood it if I did know JS. WHEN I do, I'll come back and watch it again! Personal goal: set... Seriously, this video series was incredibly helpful. You are clear, speak at a good, measured pace and are enthusiastic about a potentially dry subject. :-) I had realised that I need to learn CSS variables. However, I felt they were beyond my grasp (and that I should just 'replace all' when I want to change multiple things). These videos have taught me how to use them, and I leave here a happy person. Actually, I leave in search of your JS/DOM Videos... Thanks so much! Matthew

[@AudioJunkie79]

Another fantastic series. Thank you very much for posting. Your teaching style is very clear and easy to follow. Thank you!

[@LoveisHell85]

Thank you so much. I've watched most of your tutorials and learned so much. Please make more React, Typescript courses if possible

[@ridl27]

I was familiar with CSS Variables, but still learned something new. Lol. So now I have feelings that I need to watch all of your series from the very first one :D

[@DanieleTrapani]

Thank you! I can see now how css variables are underrated!

[@srinivasreddydanda1777]

Thanks for the playlist series on CSS Variables man :)

[@SauravKumar-vj7ks]

great sir your explanation of the concepts is awesomeeeeeeeeeeeeeeeest. Love you sir

[@brianwekesa881]

I love the net Ninja, and its genuine unless u've never tested Ninjas tutorials

[@NetNinja]

Thanks :)

[@s7s_space]

thanks a lot, man, you great in explaining ..I will move to your next courses for sass, js ..etc , we need a good tutorial for flexbox and advanced css animation course ..keep going

[@donBerezza]

Ukraine love your lessons!

[@cagataysert1995]

thank you so much ninja, you are an awesome teacher.. I learn a lot from you man.. I really apprecite it. Cheers from Turkey.

[@BelgianNoise]

need to check out JS tutorial first, you keep me bussy ma man

[@rawhasan1180]

Great tutorial! Learned the CSS variable concept very well from the series. Specially this JavaScript program to change the variable dynamically was very helpful. Thanks a lot for sharing! P.S. While I check your playlists, many of your playlists of different series do not appear on the list. I just accidentally clicked on the video tab (which I normally don't do) and discovered all the different series. Please check the playlist issue.

[@NetNinja]

Hey, I just had a look and they are all there for me. I had to scroll to the bottom so all of them loaded, because they don't all load at once.

[@rawhasan1180]

@@NetNinja Thanks for checking! While I scroll, I can't see half of your lists. Strange!

[@mikesmyth6576]

Another awesome tutorial, thank you!

[@jonathanjohn7720]

love watching your guides! keep it up.

[@allancoder]

Hey Ninja your tutorial video series are one of the best. Are you planning to make a TYPESCRIPT series? I am eagerly waiting for it :)

[@Mirzly]

Amazing series. Thank you net ninja!

[@parahumanoid]

At 7:50 or so you obtain the value of the swatch's background color as e.target.style.background. And I get it that JS is grabbing whatever string is there, parsed according to css rules. However, it is being quite literal, isn't it? I mean, "background" is shorthand, in this case translating into background-color. And the DOM inspector would show the background-color property. The question is, is JS being literal here? Would it deliver the same result if I were to quiery for background-color, or would it be undefined as it's not explicitly written in code in this DOM path? If you can explain the logic behind this, it would be great. Also, let me ask a closely related question: HOW can we backtrace the sources for the effective value of a style property of an element? Whatever level of css (inline or in-document or @imported or

[@rephechaun]

omg...love this one!

[@8o8inSquares]

Thanks man! Waiting for the new series

[@GUN2kify]

nice idea .... buy why not skip the JS and use a checkbox and the property :checked? So it would works even if JS is deactivated and reduce the amount of files that comes shipped with.

[@hiteshchoudhary3412]

Hi Shaun Thanks for this series really enjoyed, what is the next series is going to be????

[@karenpoveda29]

When you ask "does that make sense?", I always reply "yes!" haha when I realized I was doing that, I felt like I was watching Dora, the explorer or something like that XD BTW great mini series about variables, very clear! (like everything you do)

[@parahumanoid]

Can variables be somehow chained? Are they merely string substitutions (if so, I could use fragments of complex values to build a combination)? Obviously for an entire palette of connected colors, I could have an undisplayed element, containing all other reference colors and show only the main on that represents the theme as a whole. But aside from using a hidden (as in display:none) element for reference purposes (which is a part of a document, which is kind of poor taste), can somehow use an arrays of variables to switch among?

[@jidaasare7021]

I love this so much.

[@earnbangearn1194]

Awesome toturial

[@SuperDali4]

Very useful. Thanks 🙏

[@Canardeur]

Or how to learn more in a series of four great videos than in an entire IT curriculum at the university...

[@ПетрЛарин-х6ц]

hey, are you planing to make some Electron.js tutorial?

[@themynamesb]

Great knowledge

[@hiteshchoudhary3412]

Hi Shaun, I think the next series on graph QL, I'm correct???

[@sechmascm]

I watched the Node.js tutorial recently and I was wondering... If I put all the code for the swatches on a partial view, I could insert it on any page I want and treat it like a module, right? And if this works, I could do a whole bunch of these features individually and add them to my projects as I need them, assuming there's nothing like it already out there.

[@nonchalant8473]

Great tutorial thanks!

[@davideugene7911]

SUPER ! Un big MERCI (comme toujours) :)

[@AceixSmart]

Great series!!

[@ederarteaga1829]

Thanks. Q: how do I get to keep the new colors (theme) after the refresh page?

[@_the_one_1]

wow great video!

[@doingsneakypeakylike]

thanks for this!

[@КириллТерешкин-ю8м]

Cool vids bro, keep it on!)

[@khamdamov]

thanks a lot man. why there is no the sound of the ninja like whuuuuaaaaaaaa :). Your video tutorials are attractive with it...by the way, you always remind us that I will answer all the questions and to feel free to comment down below, but you don't reply. I have been looking forward to a project in Angular or JavaScript from you. please think about this deeply

[@NetNinja]

Hey, I had to take off the noise at the start because it was scaring too many people :(. I will maybe just tone it down. Also, when I first started the channel, it was easy to answer most questions. But now it's very hard, because there are so many comments/questions every day!! I will be doing some kind of full-stack project at some point :)

[@1998charan]

MEAN Stack project would be great :)

[@milesblaq998]

you are amazing!

[@alleyezonme1456]

Great video but isn't it wrong to style HTML tags?

[@nigelpallatt]

Thank you!

[@osherezra131]

Amazing work

[@NetNinja]

Thanks.

[@_samirdahal]

Learned new word!! * Swatches *

[@ALCATRAZ19841984]

Could you implement this when building your own CMS?

[@Kaybarax]

Of course.

[@TheJack3120]

If the like 👍 button can be 🖱 clicked more than 1 time I would have 🔨banged that button. It's 2020 and you are still the best instructor. Please make some more novice to ninja courses => CSS HTML Sass React.

[@joetilsed]

Thanks man :)

[@eddawry]

that is awesome

[@MacFly669]

Ninja powaaaaaaaaa !

[@marcio3965]

Perfeito!!!!

[@harryflim]

such a great tutorial but why not use Vscode :(

[@harryflim]

i take that back lol such a good tutorial

[@ethicalhacking5748]

your videos are awesome and please make videos of PHP

[@chiraggupta2264]

You have made awesome tutorials but i need your help please please please help me i got stuck in nodejs tutorial no. 34 since a month . Please help me 🙏🙏🙏

[@forhadrh]

Nice! :)

[@aanesiyaa]

3:06 what was that

[@codingmaster6321]

isn't onclick easier ?

[@annaanice1461]

Grazie.

[@NetNinja]

Thanks for your support Anna :)

[@szachgr43]

great !

[@johnconnor9787]

Cool

[@midhunmohan5112]

Hi Shaun, could you please make a Tutorial on Ionic/ React Native or Flutter ?