Live-code a JavaScript gradient generator with us | HTML | CSS | JavaScript

that's better now i do hope you can hear me not sure if the microphone is actually on i'm sure you will let me know soon yes why is no one here says tom chance apocalypse apocalypse happened luckily not just pumpkin it don't blame pumpkin pumpkin it wasn't pumpkin it was fluffing around with the mic whoops yes uh for some reason comments are only coming through on my phone which means i can't stick them a bit right i think i should refresh uh i'm gonna refresh this might break the internet okay i'm back and the comments are back oh that actually worked amazing okey-dokey let's see who's here starling garnet hello tyrone dave is here looking for brains i'm not sure you're gonna find them here but yeah ah brent dave collinson what happened to michael and leanne yeah i'm pumpkin i'm from the apocalypse zombie division hi everybody newly hired marika who congrats yes indeed i think what else has been disconnected from the internet crikey yeah imagine that uh august now finally yes that's what dan said and have you and alana is back i'm vladislav so as usual we will ask you if you are new to put a bunny in the chat and if you've been before hit me with that tiger yeah want to see here's a bunny and who's a tiger put a bunny in the chat or a tiger yes yes let me know where you're coming at me from yeah sir bye cup yeah i just remembered i just remember what we're doing oh really yeah i kind of forgot about it this in case you're wondering boy this is gonna be hard here it is the latest in the weekly web dev challenge series yes it's a gradient generator ah look at this lots of tigers a bunny and another body another tiger a nice mix bunnies and tigers oh wow that's pretty nice well welcome everyone welcome to all the rabbits and welcome back to all the tigers yeah oh new to chat not new to scrimmage oh goodness that makes you a lion yes will this be available later yes to refer i'm not sure you'll want to refer to it but you you'll be able to yeah if you want i think it's worth kind of pointing out that this is more of a session like we get a problem and we kind of solve it well right here and there it's it's not like we're showing you how to do it it's more like they've managed expectations yeah if we show you how to do it that's great but it's mostly it's it's just two of us solving the problem as it would happen like you know if you just catch up in the office someone will be solving uh a problem very similarly it's a very realistic process to be honest and the problems come from here yes karimba.com is where you can learn to code and the weekly web dev challenge is as the name suggests uh a challenge yeah it's actually not weekly but no don't worry about that it's a coding challenge yes anyway today the latest one is this you will definitely not see a very easy solution how to get from problem to solution straight away there will be a lot of don't be modest you're showing us what real people go through that yeah good to see a lot of bunny rabbits these are the ones that people have already submitted look at them i know so colorful what's nice only dream of making something as beautiful as this but we'll do oh well that's actually that's that's really impressive i agree yeah i have made quite frankly i don't even quite know what what the gradient is you don't know what a gradient is more really uh what do you think it is oops i'm trying to hide this stupid sidebar hide folders that's what i want right so this is the plan wire up inputs surprise me pattern check for contrast epic pumpkin just bang something really loudly so that's a big oh it's you okay um wire inputs yeah and add values to gradients right surprise me button check for contrast right okay well that'll be easy if i can do it without a button what do you think okay so what we're doing is making this fell flat okay we're making this michael look right it takes the colors from the inputs yeah and it makes the gradient from them that looks like it's done yeah this is a solution oh i have a long week it's about to get a whole lot longer as well yeah okay so anyway it's gonna be a long 15 minutes for sure i make it 51. okay so first things first we have to save a little note so we don't lose all our work as has happened many times before yeah and now so let's look at the html we have color picker one which is this and color picker two which is this oh okay so we don't actually have to cut color pickers what yeah you understand with color pickers they're built-in html elements they are input type equals color will give you this bad boy that's amazing i know i always thought that for some reason people code them up like from scratch or something yeah well they're imported through a library um it's right there it's right there it's a channel can you share your screen please yes that would be good how long has it not been shared for oh yeah okay sorry about that okay anyway well we're seeing it now can you share with you oh you've shared the link for a weekly webinar well that's the most important thing like you know roughly where we are so you will see yes there you go see it's like we're not inspiring like we know what we're doing no it's good okay i might delete this so anyway we can get the values from those fairly easily uh because hopefully they've got an id pick a one and pick a two it's like proper at work you know someone's showing something and then you go can you share your screen enhanced um yeah pick a one it's not exclamation mark it caused this uh go real quick i don't get id oh kind of the usual right so you just like bring the h9 elements into into javascript copy this there we go yeah look at that cool all right then i can't log one of them because well you think if one of them works they both look what console is oh dot log yes yeah okay then can you show me html once again i can um yep right uh pick one pick two labels and then there is an input uh and what's the range for it between 0 and 100 and what does that mean oh value is like a default uh value well then also let's get the input for uh what do you call it split why is it called split because it's something radiant css property this which the stream may or may not have seen before it should have done but maybe i wasn't showing but anyway um the split is basically where one color begins to merge into the other one in the gradient so if it's 50 it's halfway through okay so it's a gradient uh one of the gradient properties okay yes okay so i guess yeah we need to grab that too yeah um split and we presumably display this gradient as a background image on where well that's the interesting thing because in the challenge my idea was to add it onto the container basically yeah but people have been really creative and done like the body or some people like this one's got the body and the container that's it anyway i think we should stick to the container okay and where's the the form yeah okay yeah okay so the form the form is class gradient okay and id i think yeah so that's just called yeah let's just call it gradient yeah maybe i should call it full no that's fine let's not worry too much about naming things i mean there's only one form so common gradient is fine yeah so we actually have three inputs and we need to modify that gradient element to tell what it is yeah awesome okay so what was the task again uh gradient and to do that css gradient how do you actually do that well greppa tells me it's like this so i'm going to nick this yeah css um [Music] i guess we'll just call it gradient this class because i think we'll add a class yeah no actually we won't there is a class called gradient and i'm not going to do that that's stupid again i'm going to show you what a gradient would look like okay yeah so we have this okay so that's what that looks like so the only ones that are actually essential are um colors i think just colors actually yeah that was that split value the split value would be there so if i change that to yeah 90 90 and then 10. then you can really do much i think that would be if you put it on that one don't really know the deep ins and outs of how gradients work but it's basically how much so when you make the last number of 50 what happens it's easier if we can see it with colors so if we do like it's how much of the whatever it is let's say screen it's taking up with that color i think so if you make that 50 what's gonna happen well i think 50 would be the same on both of them because it's a percent 50 90. lip value has got to be between its own pair of colors says dave its own pair of colors thomas really so that was anyway let's try it with just the things yeah okay so can you just click on the here you go yeah uh i think the split goes on both colors but it looks good it can be i don't think it has to well i'm sure it doesn't have to i don't think you need any of them uh i think we should build the gradient with just the colors and then do the split michael oh i see so if you have zero on one color and 100 on the other and then you can do oh okay so there we go so i can see okay so if you do that ah okay i see so split is basically where so split is the value for the solid like where the area for the solid color so if the red is 50 that's where the solid color is and then at point 50 it will start merging into another and if yeah so there you go if i see if i put both of them 50 50 then it's literally just orange or whatever this color must have done over there this yellow goes into red uh and if i make it at 75 so it means that the yellow goes solid until 70 until 75 and then this will be gradiented bit and then the 49 or if i make that 50 and then the 50 is the solid red so between 50 and 75 is the merging gradient basically i see so if we have a value of split we can't really do that can we so that value that we have over here what are we actually controlling with it because we haven't built in the gradient yet so we can decide what to do with it but if you don't put a percentage in then i guess it would just add the default which probably is 50. we can check on w3 skulls michael stop fiddling with that slider let's get out of there what was that phrase like uh 10 minutes reading documentation saves you three hours debugging it doesn't oh no sorry no sorry it's the other way around three hours debugging saves you ten minute reading documentation that's your approach okay look let's just get right is this out yes is this ours so that's this is what we're aiming for oh but really this can go on here right as an example it doesn't actually matter so to build this we're going to go over into the js and then um write a function a function generate and that is going to on uh gradient style dot um background because the background equals this okay so if you remove that css declaration i don't think i did well it hasn't actually been added on anywhere so yes okay let's give that a go that does not work how sad i wonder why let's try um with the css again gradient i think you need to oh yeah wait wait huh yeah so that's what class gradient dots yeah you just added it to yeah i know that is now getting the gradient from here okay so that works it's just the js that isn't cooperating so you are calling it on the load uh could it be um where's your script then where's your uh script tag in html oh it's at the bottom okay whoops um yeah huge background image uh [Music] maybe i think you can just do it background okay let's see concert dot log yeah yeah okay so that just doesn't get this oh yes wow well done really esa wow i wonder why right interesting yes that is interesting oh because it's probably appended straight to the chrome devtools oh well anyway that's a good one nice didn't know that oh it's always the semicolon there you go okay so for the challenge we use linear gradient and that's something else well this is really a gradient but you can use the other one right here you can use any gradient but it looks good yes i don't think leanne cares well i love all gradients equally so yes okay that is exciting okay uh out of it listening on one color then it's going to work we will do that because we want this to run whenever we change something so pre-occur yeah as event listener um change i guess um generate so now um how can i test this well i guess i'll just have to grab the color as well and do that then yeah i think that's what you need to do i mean really that this is what we need a color one is pick a one dot value picker one is not defined uh yeah you have an aon listener add it to it ah okay so no it's okay oh yeah you have so we do need to have them both really yeah um so now you just have it's okay in here we can do cast color one yeah equals picker one dot it always says node value but i don't want no and then this we can turn into a would you call this uh string compilation yep and then oh no why are you opening emojis right um this this yeah color one yeah wait wait wait okay turn you off let's give that a go okay it has worked why does it not update oh because the value doesn't get updated let's see i think you can do it on click hmm um no because then it wouldn't change the value would it because on the click the value stays the same can you actually see what events happen when you do that what do you mean i reckon you can there must be some kind of like color change event or something like that let's just go to google um wizard html uh color picker events color change and then no just type color change and it should give this thing uh i should give something that can be used input and change ah so you have and what event are we listening oh no that looks good then yeah input is fired on the input element every time the color changes so i basically i think so when you input if we do input it's gonna do it every time we change wait wait wait ghost emoji the dogs in the chat the docs yes listen for input um says oh i probably look like i haven't been sleeping for a while which could be the case it's not the case but it could be i never tell says yay indeed exciting okay he is excited every time when i convince leon to read the documentation we find something it is just this honey on my heart too michael i read the documentation okay that's true and it's two uh color no we need this okay nice gas people yes how exciting is this yeah pretty good pretty good very nice indeed hello perry the tiger okay let's carry on uh okay so we have well we've wired up these two that's what we need to do yeah um is there a cleaner way of doing this because when i'm adding all of these i just think you know is it really the best thing to do to be fair not really because yeah you you add well you have different event listeners normally um to different elements cannot access split before initialization and then that should be split value okay oh something's gone horribly wrong michael because now nothing's working me ah 38 [Music] nice we're not these exact colors no you can't have this yeah and yeah this one lovely michael jason elite yes back yeah hey goodbye greatness cool uh oh yeah okay so i suppose you should call that generate on line eleven uh because you wanted eleven or eighteen yeah so you do want to run that function on the very as soon as the script loads you want to generate some yeah yeah basic yeah all right cool so task one ticked off so now we want to add a surprise me button i think we should check for contrast because that's a little bit more defined it's a little bit more difficult is it i can say well then let's get to it because surprisingly it's a little bit ambiguous i reckon it would take ages for us to actually do it put a comma after color and split will work as expected [Music] okay let's see what you mean yeah oh see it's kind of so now that will be very nice it's it's for both colors at the same time so it does the mask behind you like the the correct split ah nice very good i think we should add a surprise me button basically what we want to do is what do we want to do yeah exactly we need it to make a a random i mean there you go it's already surprising instead of selecting look i'll show you one that someone's made okay look so you can either select oh it generates random colors it does okay it sounds like surprised me what like it shows you a squirrel or something on the screen like what the surprise it could be yeah okay yeah exactly it could be anything like yeah do we still have that surprise done i don't think so i think it's been good oh yeah i'm feeling lucky i think goodly reeve's 69th birthday uh i see they've replaced it with showing you a doodle i'm being trendy well maybe not no i have not clicked this for years probably the last time i clicked this was before i knew you i'm feeling trendy petrol shortage i mean look at that rana and krishna in the boats of love beautiful that's the next weekly web dev challenge recreate this with css i reckon if you if you tweet hi it's kevin powell he'll do yeah probably anyway uh so surprise me button now you have an understanding we're trying to achieve with the surprise move button i mean step one add a button i would say yeah i have to admit like you know your your downstream feels with that with that course has been really good yes yeah nice plug there i have recently been doing wow yeah my javascript for free my css skills are not that good so yeah i've been thinking huge progress well done nice clubs yeah is there a way to see what the others have done and go through their code yes there is it's right here so when you submit a weekly wordpress challenge now you can tweet it yes um basically if you sign up to the weekly web dev challenge it really annoys me that you can't oh you can really you can okay if you sign up here yeah now you will find the challenges and the instructions of how to submit are in them and then when you submit one um it gets added to this page and you can click them to go to people's code yeah yeah that's what you can do very nice indeed how about a random split too yes that sounds good oh make a string contains not to f crikey oh i've had an idea michael what yes i have had an idea add the old random color i think it's lowercase random color dependency honestly i reckon that maintain those things these downloads and they come from the same domain what is this scrimba why are they done loading this random color so much it's just one person it generates a nice color basically nice alec there are lots of clever one liners for generating yeah anyway let's move oh yeah that's actually for generation random colors oh yeah no that's no that is what we want no well it's not because that's why we had downloaded the library well i mean these are truly random colors well not truly random no they're not yeah they're the opposite of truly random um yes what were you talking about how do you get it in oh you're important yeah okay but i've forgotten how oh uh in the js you got yeah out here yeah oh yeah um import random color yeah like this uh it doesn't matter what you call it because there is export and whatever value is being exported uh but that needs to be in quite those moments why has it stopped working what has stopped working the whole function [Music] anyone okay it's not oh no that's right actually no i'm actually done uh is generate being run game console again how can this happen michael no okay so check your html it's probably broken yes because you haven't clicked the you can finish so that stop the script from running yeah cause button screw button tag isn't closed so okay we're back in business panic you see that's what i mean like finish one thing and then get on to the next one otherwise you're like if you jump we'll never know what's up can i get the link to that dependency you sure can here it is random color dot make it simple for absolute beginners uh we'll try we will try i use that random color dependency too yeah it's not unless how to submit weekly challenge have i done that yes uh yes i think we did instructions can be found in the challenges here yeah you finish the challenge and then it will tell you to tweet or drop it that's called aubry yeah yeah okay okay random colors again yes so button first of all uh have we actually finished the button no again kind of stick it till now yeah i know i id six of them called bgm is it not rendering uh there's no text in it because it's absolute form i think you want to move it into a form why i don't do i yeah i don't really want it in the form so what i will do is uh on the body i guess we want um flex direction okay don't worry about styling the button later we won't yeah narrator they did not style the button later yeah okay um so that's that button button okay okay function surprise hey yeah what's the plan what's the plan plan or on click of a button uh generate some random colors yes playstation click surprise me um thumbs up don't blog yeah that's mine yes it is working very well yes time to copy all of leon's code and submit or only if you're not worried about winning yes no i think i think plagiarism is uh i mean discouraged yeah i think it would be quite tricky to spot i mean to be fair it would be very easy to spot if it's exactly the same well you think that who knows if you call with btn there you go that's leon's mark i think we can basically copy this which you know make it work and then make it dry yeah what are you doing copying this um random what is that rtci ce candidate to have some interface anyway that's not what we want we want and color i love intellisense it teaches you useless things that you will never ever use oh what come on um that's how i found out about css widows which i'm still yet to use um she says widows oh it's like what it's still error unknown yeah that's because it's now differently named so on line one it's yep okay okay that is okay yeah and um it's actually working in here as well we just need to copy this yeah where michael do you know what's going on yeah i don't think you do i do yeah okay what do you mean no i'm with you now yeah yeah yeah like just to prove this is actually doing it let's comment out generate yeah that's okay because generators is not defining you're adding it to a listener that's fine yeah just click surprise me it should work animation okay yeah yeah yeah okay so this is now grabbing uh two random colors from this random color dependency which is this and it's adding them to the gradients yeah but now like dave said we want to make a random split but that should be fairly easy we just want math.floor math.random yeah multiplied by a hundred because it's up to a hundred percent isn't it yeah i think that's working i feel like there is a plus one somewhere oh yeah um actually no because you're flooring that's fine no it's it's not sealing your flooring so we could never get a hundred we could get zero to 99 which uh no random number one can happen as well it's from zero to one inclusive i think no it isn't it's up to 0.9999 i reckon oh then you don't need two plus one but then we would never get naught would we i mean i don't think it matters hugely it it's definitely generating random splits oh i need 101. oh yeah yeah plus one oh i thought you meant like adding one on afterwards i think he did mean that but anyway happy birthday whose birthday is it michael wow it's michael's birthday congratulations [Music] think is it oh please don't play please don't play happy birthday to yourself no well there isn't funny you can have this yes lovely happy birthday michael exciting oh i just finished work now girls and it's friday certainly element values to random numbers random numbers and code generate at the end of the function and those inputs yes i know michael contemplating what dave has told us uh uh i mean yes what set the element values to random numbers so elements values to random numbers and call generate at the end of the function the weirdest question is advised i think this is i don't think yeah i don't think i'll follow but we can we can look into this in a little bit can you can you know just just very quickly there's one thing are you grabbing me right there i have to do it no that's it this is a problem i have raised with frank sometimes when you want to press this or this you press this and accidentally click this and then you lose work so don't do that probably should be talking about anyway one thing that's a little bit bugging me is that when you click surprise me it doesn't update this it doesn't update this so can we then uh overwrite those color can you just say pick a dot value equals color one will it work i think so picker got value equals color one pick a sorry pick a one oh yeah oops london-ish pickup it's working yeah awesome oh wow that's actually that was easier than i thought awesome but this is not dry but can it okay you can't have everything it's okay uh what does it call it oh oh uh there is the opposite of dry it's wet what is that write everything twice oh yeah oh boy okay so now split and split again split value oh crumbs this from the line above this yes yeah surprise me oh wow this is the best thing ever is it better than sliced bread it's like bread as an it but i don't know i got that phrase but yeah [Music] wow amazing this was dave's idea pickle underwear was random color oh crumbs pikachu valley was random color i think that's what we've done like oh no oh to make it dry he means so uh yeah basically extract it out of a function yeah so no comprende michael uh so what he wants is you have this generate so remove that and move this out so these two functions are equivalent so you can just okay you've just deleted everything yeah it's okay it's not it's awful this oh crazy cruti is saying this isn't very good we won't generate function reset values [Music] so maybe you can if it works don't touch it michael so that works with surprise me now that's doing random i know it's doing the random anyway i haven't thought of it but fair enough let's just resolve all this yes let's yeah um i think yeah i think you can do it i'll probably just have like the values being passed into the function um everything yeah it's all right well no michael that's not what i meant i basically just wrote the surprise me function this one yeah okay oh i see oh i see uh i think i see i think i see do i what about scope uh i think what i think what's not think about it i think what uh generate so he wants the generator to be called here probably instead but anyway uh one more interesting all right let's no i think i get it if um the color one variables if they were outside of that function yeah then we could just update them and surprise me yeah but then you are overriding them over here actually if you call generate here can you bring what did they have actually wrote where is it out there uh so pick a value a random color pick a value random color split value yeah and then you call generate uh because oh i see yeah that kind of makes sense because we are effectively assigning random colors so just i see so you are basically assigning random cards to the values are you i think i think you are so when you click surprise me sorry i just went a little bit blank on this one so i think this should work we should still work yeah yeah because uh basically he's that's a quite clever catch yeah so what we're doing is we're overriding pic value we're basically overriding input values over here right and then generate actually uses that picker value to pick it to use this for colors so that's actually a very good that's a very good point and this yeah we can then clean this up as well yeah so basically we override html elements and generate already uh picks information from those elements so yeah yeah pretty good point wow extremely nice very nice thank you dave amazing got it okay there you go yeah now we have uh i've already ticked it down the surprise me button cool check contrast yes i'll crumbs well okay color contrast checker i thought you said that it's going to be difficult yeah and you're telling me it's a dependency that's not random color so i have no idea how to use it oh it's the same like yeah but how i don't okay i mean first of all well he tells you over there so add okay not this no no hang on okay so this yeah add module and then [Laughter] add okay i have added it now and now you can import it the same way okay this different name yeah i know but what name contrast checker crap they literally tell you what to do we'll do it then wait don't think oh look there so they say someone's sending stars that's nice caller contrast checker actually yeah uh specific levels so we have okay that sounds good oh how do you oops sorry i need to turn it on how do you call the miles matt yeah really i always call it carpet i don't like so i think and then yeah so now if i just very quickly empty brackets empty it's an empty object okay color contrast checker i wonder if i just did something wrong did i spell it from color color okay no you yeah how old color contrast checker maybe like am i really reading this wrong no we haven't told it what to check so i think that's why it can't do it i mean should it really be just i'm looking for like export module exports color contrast checker i actually don't think that was i think new color contrast tracker but wouldn't you have to pass in what you want to check at some point because otherwise what's it doing oh it's it is returning oh i see yeah sorry good point i shouldn't have closed that anyway so how do you use it uh you've got color one color too ccc is what does that mean is level ah [Music] invalid contrast color one color two check custom ratios so what's a wcag level isn't that like the accessibility that's acceptable contrast is level a so that would be i guess the best one oh that's jesus i have an idea contrast ratio can range from 1 to 21 over there in note one ah okay so ah so it basically says if it's uh it's good contrast if it's like someone has done this we should look at what they've done is that bad well no i think it's all right there's maybe it's this one generate random no not this one um maybe this i know there is i remember seeing i don't it it's this ah uh greetings no it's this one nancy how can you tell well because if the contrast is bad then it's not that one oh right oh i see did i check uma i feel like i did check this one no look it's switching no we're there it's white and there it's black so something's happening okay oh boy random color random gradient function set contrast yeah i don't think it's checked brightness text color uh it's basically just checked against there you get online 45 so it's against uh checking against brightness what does that mean const text color right yeah see if brightness is more than one two five yeah then you change the text color yeah yeah it's all about accessibility says dave contrast between the two colors it's definitely not easy to check the contrast yeah because the top might be dark and the bottom might be light yeah are you checking text to background or testing the two shades against each other what we want to do is check the text on the background but as davis pointed out that's pretty tricky because you might end up with one dark color and one light color um so really your text needs to be individually against whatever is in the back wow but actually that actually sounds pretty hard that's pretty hard that actually sounds pretty hard because you have to you have to take split into account yeah so you have to know where it splits check the color based on the split value i mean i think it's doable i think oh my god no i think it's doable cool uh let's just let's just read that library accessibility checker tool is validating the color contrast between uh okay that's standard okay that's good formula l one or two for contrast is based on some iso and ansi standards awesome okay yeah i'm not gonna read them supports shorthand color codes oh nice so usage i get uh i wish i knew what is aaa level is because i do not know what that is so let's go and have a look at the source code is level 8 there we go there is level aaa oh no no comments okay so it's result wcg a a and it looks like it checks okay so this function checks color and font size because for bigger fonts you're allowed to have um lower contrast okay so it's going to be checking a color off the text okay but color a is what color of the background color of text so look at this example it's a method on the color contrast checker library so check custom ratios i've no idea what custom ratio is color color b [Music] does it matter if you flip the colors like for example yeah it can make a difference that's black and ffff is white okay uh so let's let's double check i think it makes a difference contrast checker so uh checker web no this one's a rubbish go back uh that one there's a good one the third one coolest yes okay so zero zero zero zero fff f okay i can just do it such a loop okay cool okay that's fff zero zero it doesn't matter well not for those two i don't know okay not for those two okay what about red or crunch and green yeah michael i don't think we should have it on the screen for long it's gonna give people a migraine yep sorry okay if i check the green against a red that is kind of equally bad um my brain agrees with you okay michael um dave has an interesting workaround so i think it doesn't matter what color is which color you provide first okay so we can just do that okay what's the workaround he just overlaid the gradient with a semi-opaque white layer so it was never semi-opaque white layer so it's never yeah but that's cheating yes we do that quite a lot so okay yeah yeah you can crank it uh maybe i don't know but yeah we can give it a go they can be in either order the contrast is the same yeah okay there you go color one color two uh what's the text size though let's just say 12. i don't think it's 12 i think it's like 16. but you know for the sake of making the function work i don't think it matters i don't think it would make any difference between 12 and 16 either it's like if you have massive fonts it makes a difference so in that case uh his level a a is just that's okay [Music] so in that case uh let's just cancel logistic does it return anything so that means it's not good enough no it's not good enough which what oh no but these are against each other they're not they're against each other what do you mean like you can click this we're comparing color one and color two they're from color pickers they're against each other yeah so really we just need to put in black for one of them because the font is well yeah i guess uh i think you have to do this is the fff or zero zero zero okay yeah but now we can find out if it actually is okay with this why is it not doing it okay okay well yeah just it's okay yeah it says yes we'll trust it so anyway now we could test it with this yeah so if this text was white it probably wouldn't be enough contrast which sounds legit to me so now what we need is a conditional michael and if it comes out with false we switch it to the other color i reckon can you just do it because yeah because you need to you need to wrap up i know well no i just i want to make some progress and then yeah okay there is a conditional the inspector can't check contrast of checks against a gradient i see yeah so if chrome inspector doesn't do it then it's probably not as easy as i think it was good to know why it wasn't working but anyway we we kind of found i suppose the next step would be to actually grab text color so it's more dynamic grab text color grab grab the size of it let's do one thing at a time but it's already like oh it's already a six plus so let's uh well we've come this far yeah but what's the point of this conditional what is it what is it meant to do if it if this is false then it's going to switch the label color to white otherwise do nothing if so if this is false [Music] you want to switch what text color i i think what you could do is grab the body and then chain uh you don't want it on the button but i don't think the button is going to inherit it or you can do four because we've already grabbed form so yeah gradient dot style your uh color equals is the font color no it should be but it's not yes that's legacy i see um okay wow why not just give the text a white background color and a little padding it's not cheating if it works that is another good workaround oh actually i can so but we are going to have to grab the text color because now it's going to remain white isn't it yeah but it's always comparing it against black which we don't want oh it doesn't like that uh because i think you would need to save that in a variable no i think it's uh i wonder what the value i don't think it's a hex value yeah it's empty gradient style color it's empty oh it's an rgb it's not an rgb yeah so you need to somehow convert it converted which is possible but it's gonna take a there's actually james cute quick has done how to do that but it took about three frames so i don't think we should attempt it really yeah is that hard use an else clause for white i mean black that's what i was planning to do it says michael ally yeah yeah but else oh maybe that actually would work actually it could be yeah but we're still going to be comparing um against white this is going to be comparing against black and if we've already changed it to white then it's making the wrong comparison isn't it i mean this kind of looks okay but you are right that sometimes it does provide sometimes the contrast is awkward so you really have to compare it against the text color that you already have but to do that we'd have to convert it into that yeah grab how js um grab okay okay text color as heck i mean really i just need to convert it yeah convert text color to hex wait no rgb oh well you have to write your own custom function that looks like a rare jack yeah oh no it's this yeah that's the yeah you have it with regex you write your own functions why can't we just copy this then we can't do this because we would need to read docs that's our blocker well you're just too impatient for this it's working already thank you dave for that get out close yes brilliant cool yeah so that is that thank you to all of you who are stuck around and next week i'm saying this i don't think i've actually scheduled them yet oh next week we will be calling oh wow peter we're having pizza tomorrow really yeah yeah well next week we'll be calling and api on this stream so join us five o'clock next week yeah yes it is true and you may be interested tonight i have my very own youtube channel yes i haven't uploaded for a couple of weeks because i recorded a video and then realized that um what i'd done was utter rubbish so i tried to re-record it but i can't figure out how to do it properly so now i have to record a whole new video but um yeah usually i upload sounds painful i think it's kind of pretty cool oh ready yes next week can you provide pizza i mean in a way yeah on the screen yeah i mean we can probably order pizza you need to eat more kids that would lead to a messy keyboard thank you for the thumbs up now i want pizza i don't know yet how to call an api but we're ready to watch oh nice cool yeah definitely do that too here well have a wonderful weekend everyone and i will see you next week oh yeah yeah don't forget to like and subscribe i think subscribers here like it's there there the one you're pointing at now is subscribe ah that one's like i'm sure they know where the button is it's with a delay there michael they know where the buttons are okay you can see the buttons thank you all for coming see you later everyone [Music] oh yeah

Channel: Scrimba

Views: 824

Rating: 5 out of 5

Keywords: web development, coding, coding tutorial, learn web development, frontend, learn coding, JavaScript, javascript tutorial, javascript for beginners, learn javascript, javascript basics, javascript tutorials, javascript beginners, learning javascript, js, js tutorial, javascript gradient generator, linear gradient, background gradient generator, css gradient color generator, random gradient javascript, gradient generator javascript, css gradient generator, gradient generator

Id: VMldLdMSoBo

Length: 71min 0sec (4260 seconds)

Published: Fri Sep 24 2021