Javascript Project for Beginners - Random Color Generator using HTML CSS and Vanilla JS

what is up everyone so I made this random colored generator with HTML CSS and JavaScript and just let me show you really quick what is going to look like so pretty much click on here hover over and it just starts generating random colors for each block so I got bored decided to make this project and I'm today I'm gonna show you exactly how I've created this and then I go hover over and hit stop again and then rinse and repeat and then you could literally do this infinitely with you know millions of blocks but I felt like right now this is 84 that's probably good enough but either way you can utilize this however you want but without further ado let me show you how I coded this up so first thing is first I'm here on my code editor I'm using vs code so go up and create an index dot HTML file and then next we're gonna create a style dot CSS and then while we're here we might as will create our app dot J s then press enter here alright so now we're on the index.html and I have some plugins I have em install so I'm basically hit shift then one so make an exclamation mark press tab auto fills out for us we can put this title random color generate or and then I'm just gonna go ahead and within the head tag I'm a type in link press tab and then in the H rev I'm going to add our stud a CSS hit save and now we have that in here and before I do forget let's go into our body tag now and let's add a script tag and I'm missing you script colon SRC unlikely puts it there and then app jus within the quotes and we got saved here now before we'll do it to it just test this so I just make a h1 say test and then I'm gonna right click and I have live server installed so if you do not have that just go over here look it up and then you should have it installed and as you can see we have our page working and then I'm just going to little this Avila Pablo so I'm going to do this really quick so this is working right now so the first thing we're going to do is create the boxes that you saw so this one's not difficult at all all we're gonna do is create our boss container first I'm going to say dots and then box - container press tab and then we're gonna go inside of here and then this is gonna get pretty crazy I originally started with six boxes but for this sake we're just gonna go all in and basically I'm gonna say dot box and I'm gonna sit x I'm gonna put 84 and i'ma press tab you have this crazy amount of divs that we have right here and that's essentially all the random boxes now you can do this however you like but for the sake of this tutorial I want to just keep it how I have it and then go all the way unto the last div the closing tag and go out of that and now I'm gonna simply type in dot container and then press ENTER and then go ahead and do button dot BTN and then hash tag for ID and we're going to say bt + - 1 I really had other buttons but we'll just keep this for now and I was gonna say this change color and then press save and now we have our beautiful default button right there now let's go ahead and style this so that's basically the HTML it's super simple nothing crazy let's go with our defaults already so the shift 8 so that little ass trigger the multiplies I'm going to box-sizing border box I do margin:0 padding:0 and then I have a font family but for this tutorial just to save you guys some time let's just you all do air you and then press save here and now in case you don't not know what this does it basically gets rid of all the margins and padding so now you can see it's like literally in the corner and then also let's just target the body really quick and let's do background let's make it let's do radio gradients let me say circle comma RGB a parenthesis 51 comma 51 comma 50 1 comma 1 and then 0 % and again this is just extra design I wanted to add you could literally just do color black it doesn't really matter it doesn't really change anything and then this woman I'm gonna say RGB 2919 comma 19 comma 1 and then out of that parentheses you can put space 100% and save it so now you can see we have this radio looking thing right here alright so now let's target the container so dock container curly braces I'm gonna say display flex then we say flex direction column and then I'm gonna say justify content center a line item Center Marge you know what that to be a one rim auto so that basically puts it with one rim on the top bottom but that it centers it and then let's do padding on the top weight at the point rim here and I want the color to be white so hashtag FFF so you can see little setter action going right there and this creates the class for the BTS or not BTN let's do background with the red border put none I'm save as you can see and then we got border radius that's gonna be what four pixels a little curve on the edges and then let's do font size of 1.2 rim and then outline in case you don't know what outline is before I hit save you see that nasty little outline right there I'm head save now it's not there anymore so that's what it does in case you have no idea and then let's do cursor:pointer and color I want that to be White's yeah and then with I want that to just be 200 pixels and then let's do height 60 pixels so now this is what her button looks like and then you can see the cutter sure that turns into a little pointer okay the hand when I hover and now let's talk it's the dot button colon hover so now we're gonna do background and say transparence border what that to be 2 pixels solid red transition not transform transition 200 milliseconds then we can do transfer not transit this time transform and then we'll do a scale of 1 point 1 and then colors beat white so hash like FFF so now when I hover you can see you at the cool little hover effects all right so now we got pretty much that part readiness to do box - container curly brace say let's do width of a hundred percent Heights to be a hundred percent display grid then grid templates whose like put a did not put in the color right there make sure you guys check that and then columns let's do repeats and then 12 comma 1 f4 so essentially gonna make or not M 12 columns across screen which you saw and then that's pretty much it right there yeah since we have nothing to display guy we're gonna see anything going on then box target that class scroll that up save padding of three REM and in background I'm just gonna copy the one we had up here because I didn't want to type that again put this in the corners all right there we go that was one of the issues I didn't have a semicolon there and then box we have here so I made sure yeah so make sure you have all your semicolons around everything and now it should look like this so it's pretty much what we got going on here so we go back to the original that's basically we got and then now we just have to add the JavaScript and boom we will have our special effects so JavaScript isn't too crazy it's pretty short actually but uh first thing is gonna go create a color BTN so say the const color BTN or button and after they equal the document dot query selector and then parentheses quotes and we want to target the button so i'm just a new hashtag BTN - 1 and again if you're not sure this is essentially the button ID so in case you make another button then you can separate it by the ID but since there's only one button it really doesn't matter and then I'm not using some cones just because uh it's my preference but if you want to feel free doesn't change anything and then const is now so we're gonna target the box does that change the color yeah these are just names that I'm just making up but this could be literally water bottle it doesn't matter you can name whatever you want but boxes makes more sense if you're trying to read this and then document dot query selector all this time parentheses quotes and we're targeting the class so dot box and essentially selecting every 84 box that we just created save that here and then then we got to save a variable so I'm gonna call it running so this essentially is whenever I click on the button that would be essentially running could be on/off same constant but let's just say let running and start off we're gonna set to false so it's not running until I click on it and then once we write some functions in JavaScript it will turn it back - true so first thing first is gotta get the random color so let's go function get random color curly braces I want to say let's letters equal to quotes and they're gonna basically go from 0 1 2 3 4 5 6 7 8 9 and I'm gonna say ABCDE F so if you're clever enough to know what we're doing this is essentially the hex code values and then it's gonna say let's color now equal to just hashtag so that's most hex values actually every hex value so it's a hashtag and then whatever color you want it to be and then I'll say for parentheses you can say length I is equal to 0 and then let's say I is less than 6 comma or a semicolon a bad incremented by 1 so I plus plus curly braces I'm gonna say color plus equals letter so it's basically a hashtag plus letter and then writes the brackets so essentially what arrays start with and then say math dot fleurs rounding the number and print these we're gonna say math dot random print it around there and then I'm gonna say times this by 16 and then we're simply going to return color so now this is essentially what we have here and I believe I put letters so make sure you have it so in case you misspell something easy way to tell is the name of the variable will be like the pasady or this kind of like kind of shadow different but basically now it's fixed right there I'm gonna save that here and now we have all function right there to generate a random hex value and we save this and now let's go ahead and create the function to start this up so let's go function start now I'm just calling it the start function you can name it whatever you want to name it want to say if running and by default it's set to essentially true so saying if it's true what we're gonna do is I'm going to go and loop through the boxes so essentially boxes which is all the boxes eighty four we have and say for each and then I have color as a parameter equal so arrow function right there and then we say color dot style so now I want to change the style of these boxes and what changes the background I'm gonna set it equal to the function we created above called get random color so that basically will change each box by a random hex bag so that's essentially how we do that there now outside of these four indices here or press ENTER I'm gonna say set timeout and this is essentially will call so we have start right there as parameter and then we have 500 this essentially will change the color of the boxes by however fast you put it so 1000 centrally at one second so you can update this but this is like half a second it's pretty quick and then now we need to add an event listener because right now if I click on something nothing happens because there's nothing going on so if I go and say color BTN dots addeventlistener I'm gonna say I want had to be a click so whenever I click on the button something's gonna happen so then I'm gonna say function here curly braces so now I'm gonna say whenever I click it I want color BTN dot inner text my set that equal to the text of stops whenever I click it let me show you really quick should change just like that so right now nothing happens because there's nothing to switch it back off but as you can see that's what it does right there and then when I say if running is true we're gonna say running set equal to false then under that lines a color BTN dot inner text I want that to switch back to the change color text right there and else if it's not true we're gonna switch it running back to true and then we're gonna call this start function so essentially you'll be able to stop everything from going on infinitely so now if with the powered magic of JavaScript we'll zoom this out click change color boom now we have our beautiful little color-changing application right here I stopped you to color here and then go again now again you can go and play around with this and you can literally type dot box times a Ford in and then press tab now we have 84 box so now there's like ginormous amount of boxes ridiculous amount and then pretty much we have this right there so again have fun with this and then also you can change it to like six boxes it's up to you but this pretty much is the project here so if you did enjoy this video and you want to follow me along my coding journey then definitely down below and hit that subscribe button give this video a thumbs up share this with your friends let me stop this before you get blinded and I will see you in the next video peace

Channel: Brian Design

Views: 4,473

Keywords: javascript projects, javascript projects for beginners, javascript tutorial, javascript tutorial for beginners, javascript project tutorial, javascript projects for practice, javascript project ideas, javascript projects for portfolio, random color generator, javascript color generator, javascript projects to get a job, javascript project tutorial for beginners, javascript color changing background, javascript color palette, vanilla js project, vanilla js tutorial, vanilla js

Id: UNIlt7_oMQQ

Length: 16min 36sec (996 seconds)

Published: Tue Jun 30 2020