10 JavaScript Projects in 1 Hour - Coding Challenge 🔥

hello youtube we are live again on twitch and this time i'm going to attempt another challenge last time we did 10 javascript projects in 10 hours and i don't know i felt that it can do better so this time i'm going to attempt 10 javascript projects in one hour which is basically roughly six minutes per project as you can imagine the projects won't be big projects so we can say 10 mini javascript projects in one hour but still it should be an interesting challenge as i said this is live i have the chat here on the right and uh yeah if everything goes well this will be on youtube if not we'll see okay here are the projects i'm going to attempt a hamburger button which will toggle a nav to show and hide a toast notification those which appear probably in the bottom right corner and they pile up whenever you click a button uh an autoride text feature which we're going to give a text and it will kind of use javascript to auto-write itself a pop-up or a model depending on how you want to call it a purple heart train which is similar to what we have on screen if someone sends a heart next up a background changer which will generate random background colors for uh well for our window for our project yes a dark mode toggle which would toggle the light and dark mode a carousel which will have three or four images a sound board which we can use to have sounds like this okay and a zoom effect which we're going to have an image and whenever we hover over the image it should zoom in probably you saw this in uh e-commerce apps where they have like the preview image and you could check in the image like if you want to buy a dress or something you know you know the drill i also have some uh backup projects in case i failed this yeah six minutes per project so i don't know and one more thing i prepared is just the basic skeleton for the project i don't want to write this every time so i have a simple html file with the basic structure the style css the script and in css i have just some basic css pop-ins font because we'll like it or at least i do and yeah everything centered with flex because pretty much all the projects will be like a box or something and we want them in the center and we'll see how it goes if i have more time for one project i might i might style it to look better if not well just stick to the default style yeah i see the chat is pretty excited thank you for joining all right uh yeah so i have one hour which starts now let me start the timer for the first project okay so the hamburger button let me copy this project paste hamburger like that open it hamburger butter okay what we need we need a button which will have the hamburger icon hamburger icon let's find it somewhere where's the icon that's a good start uh icon html can i copy i know it had html entity okay okay this one is good good good good we have it and then we're going to have a nav with three allies and link well each has link all right i don't know google and this one goes to youtube and this one well it doesn't go just have the link uh twitter all right and we need to open this project awesome now that's that let's style it so we want the button to be background color purple or becca purple because that's better uh border none color white and wanted position fixed top 20 pixels right 20 pixels okay there let's have padding uh one ram back that should work and the nav we wanted position come on don't fail me position fixed um let's see we want it to be on the right side so we want the height to be 100 report heights we want top to be zero right to be zero for now and let's also have a background color of purple oh rebecca purple like that good and we can style the nav ul do we have a ul or i forgot i don't okay ul all right good so nav ul adding zero list style type none okay nav uli let's have some padding uh two ram zero on the nav let's have some heading to ram uh and nav links should be white whoops not the thing color white and text decoration none whoa look at that so beautiful uh we want margin 0 here and [Music] yeah let's use one ram okay not so pretty good but by default this nav should be out of the way so we have transform translate on the x-axis 100 so it's bye-bye and whenever we click the button we want to have a class nav.active which will do transform translate x zero zero pixels or zero percent or zero i think all work i don't know okay let's go to this and have an idea of vtn on the bottom and button and an idea of nav on the nav yeah and now in the script i'm going to have const btn document get element by id vpn like that copy this that have the nav all right and when we click the btn i have one minute left advent listener on click i want to do nav dot class list toggle uh active what was the class we added oh boy okay let's see uh css yeah active good so now yeah it should work i also want the button to have a class of button to have a class of active and this will be uh transform translate x minus 100 pixels we should do better but oh well and the same thing on the button so now when you click having is not the best design but oh well you can see it works it toggles and let's do one more thing [Music] transition transition the transform property for 0.3 seconds and is in out copy this button and the nav and look at that i mean that that's good right [Laughter] and you can click the links and it should work all right good 22 seconds left stop next one uh what's the next one toast notification start base project copy paste a toast notification uh yeah so the chat just yell if i don't do something wrong right toast notification uh good so again we're going to have a button which will say click me pretty please like that in the middle of the screen okay okay and whenever we click this button we're going to have it ready uh whenever we click we want to show a notification here on the bottom right i think i explained too much right okay so const ptn document command get element by id btn like that and btn ad event listener on click i want to create notification function create notific well uh notification spelling check okay so what we want we want to create a notification component or well node list create element we want to div this notification classly should have a class of notification or toast let's have it toast whatever and uh we want to add it to a notification container which we don't have yet let's do it fast so notification container like that everything okay and we want this container all right and now the container add append child thank you author suggest and we want to add a notification but you also want to remove the notification after a while so it's that timeout [Music] after i don't know three seconds it's too much you don't have three seconds to wait it's a notification that remove okay so we add it and then we remove it and we want to have like notification uh inner text to say something like i don't know this challenge is crazy okay good so whenever we click we should look at that this challenge is crazy awesome now let's style it i have three bits for that perfect container i use id to style i don't like that notific what's the class nah toast don't do this okay i want it to be padding to ram background color rebecca purple someone likes this color too much color white uh i know for the radius pixels okay and the container should be position fixed but um 10 pixels uh and right 10 pixels okay let's see yeah good good good good and they disappear i think that's not that bad let's have margin one ramp and then all right good next one i think it's good right let's tell the button let's talk let's not rush it i guess we can do back on color grab back purple uh color white uh padding one ram uh border radius five pixels uh border [Music] none all right hey and i want one font family inherit so it gets a nice font look at that yeah we could have an animation but next time all right next project what's the next project uh auto right text all right start auto write text for this one we need to have a text and put it in well on the screen automatically using javascript so yeah let's open this live server and i'm going to have a text here which will say my viewers on twitch are the best and like that good and we want to get this text and show one letter at the time so we're going to need let some kind of index which will start to zero we're going to have a function write text and this will get document.body inner text to be uh text dot slice so we want to get from zero to index and at the end we want to index like that and at the end we want to do index plus plus but if the index is greater than uh text.length minus one we want the index to be zero let's see oh we need to call it set interval we want to write write text every 100 milliseconds so my viewers on twitch are the best and we don't doesn't know so yeah something like that uh yeah let's make it better maybe background color rebecca you might notice a pattern here font size to ram okay my viewers on twitch are the best oh it doesn't can't see the last one okay good now it works hello everyone who joined how many has he done this is the third one and we have four minutes to spare so yeah this is good let's go to the next one uh the next one is okay copy copy paste uh pop up okay uh pop-up all right now for the pop-up we also need the button which an idea of btn uh open and we're going to need a pop-up container a pop-up like that and h1 youtube a paragraph also my youtube viewers are the best too right okay let's open this close this good now we have the pop-up we have the container we have the button we also need a close button so inside here a button want an x an id of close and this will be open then open okay now we need to style it uh button background color guess what back up purple color white padding one ram uh border radius four pixels border none phone family inherit uh boom like that uh next up the contain pop-up container now this should be position fixed top zero left zero but term zero right zero uh and background color it should be um rgb eight zero zero zero zero point five so you shouldn't see something like that now it should so the pop-up inside should be background color white uh let's have a weight of 500 pixels or something okay and a padding of two ramps all right i don't like that x it's too stupid uh good now let's put this in the center so uh display flex alignment center just click on the center boom and one disporter radius 5 pixels and box shadow let's have some shadow 2 pixels 2 pixels five pixels rgba000.3 and pixels okay and the pop-up button should be position absolute uh top 10 pixels right 10 pixels something yeah perfect it's just not there uh we want it to be relative to this so position relative okay and let's make it prettier so padding you know what come on two minutes uh background color white and color or backup purple and a font size to ram oh nevermind uh hey i don't like that okay close html html uh in times times times thank you thank you thank you chad that's what i was looking for okay i want that awesome yeah all right good now uh we need two two two uh this should be none by default pop-up container active display flex like that and yeah then we do the thing so here we also need id container so i have one minute left btn uh open open open document dot get element id open all right i want this twice i want close and i want container all right whenever we click open add and listener or whatever click container class list add active and when we close guess what remove active and yeah for now come on come on come on container container inspect console that doesn't close eddie close close close pop-up container proper container flex let's see if we have an event add event listener close event listener oh oh close oh okay okay okay okay okay thank you thank you i want now this okay open okay i am not out all right so this now works thank you to my chat [Laughter] yeah so apparently i had there an issue good next one six minutes uh which is the next one purple heart rate oh this is a long one copy paste your name purple heart rain purple heart whenever you hear that sound it means that i'm that rain well it means that the 10 minutes for the project are gone okay for this one we want to create a heart and drop it on the screen how how how hard should that be so function create heart and we want to const heart document create element div and heart that class list add heart and we want document that body that append child a heart well not like this like this heart okay good so if we oh and also wait heart inner text should be purple heart like that and we want to set interval create heart every second all right one two three good perfect we can do it faster 300 seconds all right now we want to gener randomly have it on top of the screen and fall down so for that we need heart we need a key frames of fall and you want to go to a transform translate on the y-axis 100 let's do it 105 viewport heights all right and by default um position fixed uh top minus five viewport height minus one vapor tight i guess that will work and left this will do generally in javascript well automatically and transform translate y 0 an animation sorry animation file for three seconds uh linear okay yeah look at that yay the following they're shooting hard and now we need to heart um style left to be a mad at random let's see from zero to one hundred zero one hundred uh plus viewport heights a viewport widths right all right perfect uh yeah good and we have some time so let's do heart style animation duration we can do matte that random to be between [Music] two seconds and five seconds so some will fall faster yeah pretty cool and yeah let's make them bigger uh scale i guess i can use font font size to ram big cards oh and we need to remove them because look what happens i want it to be forwards and i wanted to set timeout the same thing we did to remove it right after uh five seconds so heart remove all right and we have hearts and we have hearts good two minutes left uh next one how many we have done 5k background changer ah this should be simple uh rename background changer a background changer we started 20 or so minutes ago okay a background change we need a button with a btn class uh change me that i'm getting excited about this should be fun uh good so we want the button background color rebecca purple color white padding one rem uh font family inherit a box shadow shadow two pixels to pixels for pixels rgba000.2 like that border radius five pixels border none okay let's make it i know six pixels all right and font size uh five ram all right i don't like okay and whenever we'll click this uh we want to change the background color that shouldn't be hard we might have some time to uh const btn to do some styling uh get element by id btn btn.class uh no advanced listener click and what we want is that body that background should be a random bg uh and random bg function uh we want this to return um hsl met that floor man at random times 360 i think one percent 50 i think that's the value of hsl no something's wrong uh let's see okay click document body background random bg uh console.plug random pg all right we got values on random pg budget quest body style thank you yay it works you're amazing that's pretty cool and uh yeah let's well i didn't start a timer so i don't know how much time i have uh focus outline none and button active box shadow zero let's go yeah let's make this more obvious like five uh and yeah let me do a transform translate uh two pixels to pixels so we should have something like okay and we can even have transition transform 0.1 second linear like that doesn't show the animation too much uh good i don't know how much time we have i'm scared to do something else so yeah let's just keep moving i wanted to add the text to show exactly the color but that's for another project uh yeah uptime won't work in the chat so you need to do i i started recording 30 minutes ago and i did like five minute intro so i have 25 minutes well i i mean 25 minutes which means i have 20 35 minutes left all right dark mode toggle how do you enjoy the chat i mean chat how did you so far drop some hearts if you like it dark mode toggle next time you need an actual timer on the screen yeah yeah that's cool okay let me start this so dark mode toggle now for this we're going to need a text uh the poppers family are the best i don't know to say something else and lorem 40 all right uh in the screen we need here display flex and now flex direction column like that oh let's do text line center and let's have a padding of three ram five gram okay and we want on above to have like div where we have a input plus label and this input will be checkbox with an id of a toggle and the label oh let's say the name toggle i'm not sure label whatever toggle and this would say a toggle team yeah something like that okay now let's target this let's do the javascript and then we can install it toggle will be document that get element by id toggle and what i want is a toggle dot advent listener change oh i need so on document.body that style no classlist.toggle class of dark and i want it to be conditioned on either target dot checked okay and now we need to add a dark theme so body dot dark background color 1f1 f1f and color white yeah look at that it worked and label user select none okay and yeah i guess if we give it i have three minutes left if we give it a class of toggle container oh let's put it here toggle container we can do position fixed top 10 pixels right 10 pixels okay that worked okay yeah right not too shabby we could two minutes okay let me try something i might fail a part but think think think input visibility hidden uh cursor pointer oh no text oh two minutes i'm crazy why i'm doing this background color rebecca purple uh weight 30 pixels height let's do 50 pixels 50 pixels border radius 50 percent oops uh explaining unblock okay and uh body dot dark label background color uh white all right [Laughter] i mean it's not much oh okay let's add uh transition trend uh we want the background and uh color can we do that seconds linear and we want the color 0.3 seconds linear to have like oh wait wait we need to add it to the parent here all right and we can do this exact same thing here but we only for the background not sure why it's red there yeah uh yeah we could have a circle and something else but all right good next one uh carousel name carousel arrow cell yeah uh carousel thank you for everyone who followed um now let's see what we need we need a carousel or cell like that like that we need an image container and we need four images so image times four and i'm going to use unsplash to have four images uh i know this one like that and then thank you alexandre and then this one thank you xps oh and then uh ooh this one thank you stefan and uh beats i guess all right thank you edward all right now we have this we have the container and it will be oh i forgot to press start here uh it will be a pretty generic cursor i mean simple one stuff wait let me close i have a bunch of tabs here open oops why do i need to complicate this don't be like me don't over complicate things all right uh index and style now for the style we have the curves cell which i want to be weight 500 pixels and height 500 pixels and i want overflow hidden perfect now the kerose image container image container i want this to be display flex let me not go hidden yet uh and i want image well ema emg to be uh width 500 pixels height 500 pixels uh object fit over like that good and now uh i'll hide it like that let's uh i don't know do a box shadow uh two pixels two pixels five pixels rgba zero zero zero 0.3 rgba rgba uh yeah not too pretty and now what they want and uh images id images advanced images document what document get all my id images and i want a function uh next i don't know run stupid and this will go wait let index zero and this will do index plus plus if index and we know that's four greater than three uh index zero i mean let's do uh think think think think i want to get images to get their length so img i don't have a good name document that get element query selector all image tags i guess i could images so all the images inside the image tag and if this is bigger than image image.length the reason i did this is because i want to work for as many images as we have not fixed value all right and i want images that let's see style.transform to be translate y uh wait translate y minus [Music] minus index times 500 pixels okay and set timeout uh yeah let's do that set no no no run and i want here at the end set timeout of the run every two seconds because we're in a hurry okay i messed up something um let's all right that's good now oh display flex let's not do this let's have a transition [Music] oh oh i know what i did transition uh transform linear 0.3 seconds linear translate x oh yeah yeah and that thank you chat and translate x i guess that's it oh and yeah transform translate x zero by default all right good and overflow and yeah okay something's bad there uh i think my length minus one okay so it starts with the first one oh oh let's just set timeout here also so we see the first one [Music] set interval just i don't know felt bad to have why not modular because i don't know afterwards i mean i i know but i can't think now so yeah good this is our carousel it doesn't have buttons it doesn't have anything it's just pretty because look at that pizza all right next one how much time we have around 20 minutes and we have two more projects oh look at that soundboard now this would be hard so i give myself more time by finishing the other ones faster sound board [Music] sound board now what we want here i have sounds where i have them i have some sounds let me copy and paste them here please oh copy sure all right but i don't want them all i don't want this i don't want this i don't want this i don't want this i don't want this the one this all right six should go well now i want to do uh object sound an array with the names plus victory and wrong and i'm going to do sounds that for each sound i'm going to sorry the water is coming back um all right for each sound i want to add a button on the page and whenever we click it we want to play the song which we need to load yeah we need to load them so how to do that audio i guess hopefully sounds slash applause uh one two three four five okay boo and guess and tada and victory and wrong and ids all right good now we have them which are loaded so we just need to create a buttons so conspn document create element uh button let's add class so we can style them class class less that add i guess i could toggle the button nevermind and them okay hey all right uh okay and i want to add it to the dom so document that body append child uh btn all right good good good good and now btn that inner text should be sound yeah nice uh and ptn.addeventlists event what's happening at event listener on click we want to do document dot get down and by d sound dot play right not don't play play okay let's see yeah it works awesome let's tackle it apparently it was easier than i thought uh okay so btn bro background color rebecca purple please don't hate me for this i just i don't know anything else to style it i'm such a bad designer a font size to ram uh you like rebecca purple you guessed uh heading 2 ram no 1.5 ram 3 ram oh boy bar border radius uh 55 pixels border none and margin one ram yeah i guess purple pizza hello wait so okay works yeah i have two minutes left so i guess i can what can i do i don't want to complicate it yeah i i i guess background color your back or back purple and a little bit top song when you play another one yeah i have two minutes let let's do that disable button after click yeah don't don't give me idiots don't uh so i want to stop whenever we click i want to stop them all so function stop songs i don't know if you can there is a stop thing audio html stop is there a stop function pause yeah it's a pause i have one minute left so yeah i need to go over all of them so sounds that for each sound uh i want to do this and i want to pause and i also know that uh so yeah i could wait wait wait wait so we pause this stop songs or pause let's see [Applause] do do here uh yeah and that thank you chad and i need to reset because see the boo will continue so i need to change the current time thank you ss mk hrj so uh yeah i want to do this again i guess con song will be this and i'll do song that pause and a song that current time will be zero this is satisfying to watch it will always start which is good [Applause] [Music] okay we have one more [Music] all right and the last one uh where's it zoom effect yeah look at that exactly the time all right uh six minutes i don't know how probably around an hour a zoom effect uh good so zoom effect now what i want i want an image in a container and that image should be zoomed in at the place we move mouse over so yeah that's the container and we're going to have an image let's pick another unsplash image uh something purple because this is the end look at this nice i wonder okay uh and we'll say purple kitty all right good let's check it out all right now oh style style style style when installing container i don't remember i don't remember how i did it uh yeah i did this a while ago i just f i guess 500 pixel no let's do on the container uh weight 500 pixels height 500 pixels like that and we do with 100 percent and height 100 percent and object fit cover okay let's do some box uh by the way background color rebecca purple uh box shadow three pixels three pixels four pixels rgba i don't know a nice back box shadow but oh look at that that works now whenever we hover over i want this image to be zoomed in and uh we're going to need to work with chance form origin which is center center by default so let's see if i remember correctly a container document get element container now container add event listener on mouse move now we need to figure out what's the x and y ax position inside this so we're going to oh and i also need the image const image document let's do query selector because only one we have one image so uh x will be e client minus e dot target dot off set top so the offset from the top and we want the x inside and we negate the oxide from the top so this is the offset and this will be the x i want to remove that so we get 0 there and y uh offset left this is the y and x and y and now on image style transform origin we want it to be uh x and y right x pixel and uh y pixel i'm not sure okay and we also want image that style that transform uh to be scale to so we want to zoom in right [Music] console.log x y alright so we get that something's wrong client text offset oh yeah we have one more left and probably 10 minutes i don't know client x minus either target off the top oh offset left and this will offset top let's see zero all right perfect now white the image is not transformed uh transform region stop oh transform if i could type okay good it kind of works uh now we need overflow hidden yeah look at that all right works and we need to reset it so container that advent listener on mouse leave uh we want image.style that transform origin center center and image that style that transform a scale one yeah look at that kitty awesome where's our soundboard oh boy that's uh interesting i think we're done what do you say chat ten i think we've done ten and we have like seven minutes left uh that's crazy let's look over the uh projects uh wait yeah i was worried thank you chad awesome chat looking it's okay let's look at this this is a brace project we have the carousel we have dark theme we have the hamburger we have the pop-up we have the purple rain we have the sound board we have the toast notification and we have the zoom effect thank you for following thank you for supporting drop your hearts in the chat so people can see those who are watching your support all right let's see the oh you don't have a title for this one no auto text right [Laughter] all right this is the other text which is writing text automatically uh this is the background changer which is kind of a eye killer for me this is the carousel which shows image with a pizza you know what let me so we're done i'm just improving stuff uh where's carousel i want to add instead of linear let's do ease in out now we have a smoother transition let's see and it's pretty pretty fast let's do 0.5 all right thank you for all the support you're awesome uh all right let's dark mode toggle thank you just you need to add space uh yeah then the hamburger menu which is like simple like this uh then the pop-up pimple pop-up carries a background cursor background rebecca purple for this yeah that could work uh then we have whoa whoa whoa whoa whoa something i think they started too soon yeah uh all right then we have this the soundboard and then we have the toast notification is crazy oh maybe you couldn't see this because of my big head and then we have this zoom effect which we hover over and we do all right thank you youtube for watching i mean thank you those on youtube for watching who will be watching this video oh boy if you enjoyed give it a like to support the video and i'll tell the youtube algorithm that it's good subscribe if you haven't and join us on twitch flooringpop17 if you want to see more crazy stuff like this and other projects live with me and the people who are watching uh yeah and write down in the comments other projects you'd like me to do i guess in the future thank you for watching and yeah have a great day bye

Channel: Florin Pop

Views: 181,512

Rating: 4.9655361 out of 5

Keywords: javascript, javascript tutorial, javascript project, javascript projects, 10 javascript projects, coding challenge, vanilla javascript, vanilla javascript projects, 10 vanilla javascript projects, javascript app, javascript apps, 10 javascript apps, live coding, 10 javascript projects in 1 hour, 10 projects 1 hour, auto write text, background changer, carousel, dark mode toggle, hamburger menu, popup, modal, purple heart rain, sound board, audio, toast notification, zoom effect

Id: 8GPPJpiLqHk

Length: 61min 11sec (3671 seconds)

Published: Wed Sep 09 2020