The Front-end Developer's Delight: Exploring CodePen Projects

I like the comments here too. Set num so this is how the number is set, which is basically like hey I get the number but when I click eight here this is what sets the number so this is when the number is clicked and gets the current number selected so okay I understand how we're getting the current number. Get attribute data num. Okay so whatever I'm typing in there is being gotten displayed. The current number so I believe that's maybe there wow I love that. So if you do eight divided by zero it goes "you broke the universe" or it goes "uh look at what you've done" and it goes "reset universe". That's beautiful. Aha that's where it's coming from.

So in CSS, the value fades in that appears and so they're happening right here and the content we're getting from data num so for example whatever content I have that's in our data num that is what I believe ends up showing right here. So this one really freaking beautiful. The front-end is awesome love this project really good project and oh by the way, I'm I just typed in JavaScript at the top on CodePen and we're just checking out some of the projects there so you could do that too and then look at projects that have JavaScript in them.

Okay so let's take a look at something else that's interesting. So we looked at three projects that's so far, that were pretty freaking cool. Alright, so here's another one and I really like this project actually, this is really fun. We have our chat built here and I can basically send a message so I can be like "hey what is going on" and if I send this message, I get a reply back beautiful. All of this is happening without any backend, this is just with front-end and what's happening is we have our JavaScript code right here and our JavaScript code basically we have an array of random messages those random messages are coming out right why did the web developer leave the restaurant because of the table layout and that's this joke right here and that's just being randomly displayed, that's good so far.

And then the rest of it is heavy on CSS there's a lot of styling going on here right. So you have to know how to be able to make a layout like this using HTML/CSS. You can use frameworks, you could use grid for this or you could use flexbox and to know okay how are we getting a chat box that looks like this and now my front-end skills are not the best as you guys have seen some of my videos right my back-end skills are probably a lot better than my front-end skills but all of this is happening front-end. We're sending a message and then we have piece of JavaScript that essentially waits and then you know I assume it's this set timeout and then we append that to the list of messages and then we boom send that message, but it's fancy because of even how we get the message right when Vincent responds it's in green it's on the left-hand side it has a timestamp right and what's cool is that it's also pulling the current timestamp, timestamp is also styled that's freaking cool.

It's every response we get it about one and a half seconds later I believe that's what that 1500 right there probably means we're able to scroll this thing that's also really cool. And all of this is pure, pure JavaScript and CSS so not even libraries or anything like that being used so beautiful project really really awesome. I really like it how we have this showing up here we can search oh crap the search works yo what that's awesome I don't even think they're using React here I don't think so. Can you check out if they're not using React here? Let's look, nope, we're just using Font Awesome well that's for CSS, jQuery handlebars but yeah definitely not using React here.

So really cool project really really awesome project actually to look at chat widget that's it. I hope you guys had fun with this video I hope you got to learn something out of it or at least you just had fun. Look if you enjoy content like this what I recommend you check out is I had a CSS battle with my boy Nas maybe you want to see who wants maybe you want to see how it went so what I recommend you to do is go ahead and click that video and go watch that video right now you're going to have a ton of fun. You're going to enjoy it.

And with that said, I love your beautiful face if you enjoyed the video smash the like button so this video goes out everywhere this is your boy Cozzy I love your beautiful face and I'll see you in the next video go click that video while I juggle these lemons I freaked out at the end because I realized I had a cup of coffee right here if it splashed onto it it would destroy my entire studio.

"WEBVTTKind: captionsLanguage: eni was watching a front-end developer react to css code so i thought hey how about as a full stack developer i react to some awesome javascript code pens so i came across this kevin powell video and he is talking about css and he's taking a look at some mind-blowing stuff that inspired me and i was like hey how about we take a look at some incredible javascript projects that are done mostly with javascript and we just take a look at them and maybe have a mind-blowing experience together so let's jump right into it so here we have a connect 4 game and it's built using mostly javascript so if you take a look here there's a lot going on in this game tons of it if i went through every single line of this that would take one time but taking a look at this we have a couple of things happening here like if i am looking at this game like look at this right first of all so much is happening whichever column i'm on top of that circle shows up right there and that column gets highlighted that's incredible right and let me click and then it drops so there's a lot of like animation stuff going on here so we'll take a look at the styling for this as well the html seems to be quite simple it's very very basic here just about 70 to 80 lines of html code not much going on on the html side there's quite a lot going on on the css side as well about 200 lines happening here and i believe these keyframes are what are making that animation happen when i click so for example let's comment uh let's take those out to read only how can i edit this let's fork it okay i forked it start again and let's see if we can comment it out beautiful so now it's commented out when i click it it doesn't really know how to behave if i comment all of that out that's adding the bounce actually let's try that again boom so the bounce is happening with these uh with these animations here so let's see if we can add the bounce back in now boom that bounces there that's really nice how we have the bounce happening here hover pointer okay let's take a look now at the javascript side i think that's the side that's um i mean both sides are really interesting here but i also want to take a look at the javascript side quite a bit so on this side we also have a worker here and that worker has our game logic all inside of this so our index.js is making sure it's grabbing our worker and then based off of that it's going so the logic is also important and then how we're able to do all of this stuff happening on the dom that's we're also doing that with javascript as well okay so i'm curious let's see how the row is being column is being highlighted so we have this function called create cursor chip wherever we pass at the index that's where the cursor gets created so for example if i hover over here that chip gets created right on top of this also right on top of this column that's this function create cursor chip so let's find that create cursor chip takes in which player so if it's player two it's gonna be purple if it's player one it's gonna be that turquoise color green color pretty freaking cool project heavy heavy on javascript and logic a lot of fun definitely give yourself a chance to work on something like this but of course there's a lot of css going on in here as well just even this one function here create cursor chip a lot of css being able to retain all this memory then draw those circles then make sure those circles are actually being appended onto every other thing here so really awesome project i love it had ton of fun taking a look at it and now let's take a look at another javascript project so this one is called the terrible cloth the physics of this project is just completely out of this world and that's what kind of blew me away and i was like yo what is happening here but check this out as i hover over it oh like look at how that moves let me refresh and go through it slowly absolutely beautiful i click and i hold and if i right click it cuts like this is just a thing of beauty now i'm not saying as a javascript developer this is what you're going to be doing you have to be a physician to almost make this happen there's a lot of physics going on here so if i could like zoom out here the code a little bit so you can see it but there's tons of physics going on here and the accuracy of the physics house influence gravity jesus i mean space wise spacing tier distance so yeah that type of stuff there's a lot of canvas drawing here and yes tons of physics stuff that i see like i remember even when i was building a game called pong i had to actually apply a lot of physics that i learned in high school that was a lot of fun to make and i made the game with python i remember and it required tons of physics it was cool because i got to take physics that i learned in school and apply it to a actual coding thing and it did real stuff this project freaking awesome heavy on javascript and just the way everything like how bouncy it is right even when i play fifa there's tons of physics in there so when developers are working on things like that in games they really have to go out of their way i mean it's as satisfying to you as it is to me like wow look at that that's just unbelievable unbelievable look at that okay let's go to the next one this is a javascript calculator probably one of the sexiest calculator i've seen to date makes you want to use the calculator to be honest the only thing i wish that this app had is i wish it worked with me typing in my buttons on keyboard it doesn't work with that so here if i do 8 plus 8 equals 16. i really like when i type in 8 or 7 i like when i type in my numbers it has that like little zoom zoom in effect where the number becomes bigger on the screen and the whole thing just has a very clean look like i even like how there's a little delay as i hover over that c or that seven or that eight gives it a nice little touch and even when i do plus right it has those words coming up like divided by plus minus times you you broke it i love that that's funny taking a look at the code here again the html part of it looks really simple this is class num each number our operators have we have a plus operator here class is ops so all the operators i believe are in our ops class so it has a slightly different styling i think it's because what happens here you need access to all of that stuff so you can actually show it happening there i'm curious i really want to know that eight that eight right how does that become big how does that expand so i'm gonna actually check that out okay so i like the comments here too set num so this is how the number is set which is basically like hey i get the number but when i click eight here this is what sets the number so this is when the number is click get the current number selected so okay i understand how we're getting the current number get attribute data num okay so whatever i'm typing in there is being gotten display the current number so i believe that's maybe there wow i love that so if you do eight divided by zero it goes you broke the universe or it goes uh look at what you've done and it goes reset universe that's beautiful aha that's where it's coming from so in css the value fade ins that appear and so they're happening right here and the content we're getting from data num so for example whatever content i have that's in our data num that is what i believe ends up showing right here so this one really freaking beautiful the front end is awesome love this project really good project and oh by the way i'm i just typed in javascript at the top on codepen and we're just checking out some of the projects there so you could do that too and then look at projects that have javascript in there okay so let's take a look at something else that's interesting so we looked at three projects that's so far that were pretty freaking cool all right so here's another one and i really like this project actually this is really fun we have our chat built here and i can basically send a message so i can be like hey what is going on and if i send this message i get a reply back beautiful all of this is happening without any back end this is just with front end and what's happening is we have our javascript code right here and our javascript code basically we have an array of random messages those random messages are coming out right why did the web developer leave the restaurant because of the table layout and that's this joke right here and that's just being randomly displayed that's good so far and then the rest of it is heavy on css there's a lot of styling going on here right so you have to know how to be able to make a layout like this using html css you can use frameworks you could use grid for this or you could use flexbox and to know okay how are we getting a chat box that looks like this and now my front end skills are not the best as you guys have seen some of my videos right my back and skills are probably a lot better than my front end skills but all of this is happening front end we're sending a message and then we have piece of javascript that essentially waits and then you know i assume it's this set timeout and then we append that to the list of the messages and then we boom send that message but it's fancy because of even how we get the message right when vincent responds it's in green it's on the left hand side it has a timestamp right and what's cool is that it's also pulling the current timestamp timestamp is also styled that's freaking cool it's every response we get it about one and a half second later i believe that's what that 1500 right there probably means we're able to scroll this thing that's also really cool and all of this is pure pure javascript and css so not even libraries or anything like that being used so beautiful project really really awesome i really like it how we have this showing up here we can search oh crap the search works yo what that's awesome i don't even think they're using a react here i don't think so can you react here let's look nope we're just using font awesome well that's for css jquery handlebars but yeah definitely not using react here so really cool project really really awesome project actually to look at chat widget that's it i hope you guys had fun with this video i hope you got to learn something out of it or at least you just had fun look if you enjoy content like this what i recommend you check out is i had a css battle with my boy nas maybe you want to see who want maybe you want to see how it went so what i recommend you to do is go ahead and click that video and go watch that video right now you're going to have a ton of fun you're going to enjoy it with that said i love your beautiful face if you enjoyed the video smash the like button so this video goes out everywhere this is your boy cozzy i love your beautiful face and i'll see you in the next video go click that video while i juggle these lemons i freaked out at the end because i realized i had a cup of coffee right here if it splashed onto it it would destroy my entire studio while you're still here go watch the other video i love your beautiful face i'll see youi was watching a front-end developer react to css code so i thought hey how about as a full stack developer i react to some awesome javascript code pens so i came across this kevin powell video and he is talking about css and he's taking a look at some mind-blowing stuff that inspired me and i was like hey how about we take a look at some incredible javascript projects that are done mostly with javascript and we just take a look at them and maybe have a mind-blowing experience together so let's jump right into it so here we have a connect 4 game and it's built using mostly javascript so if you take a look here there's a lot going on in this game tons of it if i went through every single line of this that would take one time but taking a look at this we have a couple of things happening here like if i am looking at this game like look at this right first of all so much is happening whichever column i'm on top of that circle shows up right there and that column gets highlighted that's incredible right and let me click and then it drops so there's a lot of like animation stuff going on here so we'll take a look at the styling for this as well the html seems to be quite simple it's very very basic here just about 70 to 80 lines of html code not much going on on the html side there's quite a lot going on on the css side as well about 200 lines happening here and i believe these keyframes are what are making that animation happen when i click so for example let's comment uh let's take those out to read only how can i edit this let's fork it okay i forked it start again and let's see if we can comment it out beautiful so now it's commented out when i click it it doesn't really know how to behave if i comment all of that out that's adding the bounce actually let's try that again boom so the bounce is happening with these uh with these animations here so let's see if we can add the bounce back in now boom that bounces there that's really nice how we have the bounce happening here hover pointer okay let's take a look now at the javascript side i think that's the side that's um i mean both sides are really interesting here but i also want to take a look at the javascript side quite a bit so on this side we also have a worker here and that worker has our game logic all inside of this so our index.js is making sure it's grabbing our worker and then based off of that it's going so the logic is also important and then how we're able to do all of this stuff happening on the dom that's we're also doing that with javascript as well okay so i'm curious let's see how the row is being column is being highlighted so we have this function called create cursor chip wherever we pass at the index that's where the cursor gets created so for example if i hover over here that chip gets created right on top of this also right on top of this column that's this function create cursor chip so let's find that create cursor chip takes in which player so if it's player two it's gonna be purple if it's player one it's gonna be that turquoise color green color pretty freaking cool project heavy heavy on javascript and logic a lot of fun definitely give yourself a chance to work on something like this but of course there's a lot of css going on in here as well just even this one function here create cursor chip a lot of css being able to retain all this memory then draw those circles then make sure those circles are actually being appended onto every other thing here so really awesome project i love it had ton of fun taking a look at it and now let's take a look at another javascript project so this one is called the terrible cloth the physics of this project is just completely out of this world and that's what kind of blew me away and i was like yo what is happening here but check this out as i hover over it oh like look at how that moves let me refresh and go through it slowly absolutely beautiful i click and i hold and if i right click it cuts like this is just a thing of beauty now i'm not saying as a javascript developer this is what you're going to be doing you have to be a physician to almost make this happen there's a lot of physics going on here so if i could like zoom out here the code a little bit so you can see it but there's tons of physics going on here and the accuracy of the physics house influence gravity jesus i mean space wise spacing tier distance so yeah that type of stuff there's a lot of canvas drawing here and yes tons of physics stuff that i see like i remember even when i was building a game called pong i had to actually apply a lot of physics that i learned in high school that was a lot of fun to make and i made the game with python i remember and it required tons of physics it was cool because i got to take physics that i learned in school and apply it to a actual coding thing and it did real stuff this project freaking awesome heavy on javascript and just the way everything like how bouncy it is right even when i play fifa there's tons of physics in there so when developers are working on things like that in games they really have to go out of their way i mean it's as satisfying to you as it is to me like wow look at that that's just unbelievable unbelievable look at that okay let's go to the next one this is a javascript calculator probably one of the sexiest calculator i've seen to date makes you want to use the calculator to be honest the only thing i wish that this app had is i wish it worked with me typing in my buttons on keyboard it doesn't work with that so here if i do 8 plus 8 equals 16. i really like when i type in 8 or 7 i like when i type in my numbers it has that like little zoom zoom in effect where the number becomes bigger on the screen and the whole thing just has a very clean look like i even like how there's a little delay as i hover over that c or that seven or that eight gives it a nice little touch and even when i do plus right it has those words coming up like divided by plus minus times you you broke it i love that that's funny taking a look at the code here again the html part of it looks really simple this is class num each number our operators have we have a plus operator here class is ops so all the operators i believe are in our ops class so it has a slightly different styling i think it's because what happens here you need access to all of that stuff so you can actually show it happening there i'm curious i really want to know that eight that eight right how does that become big how does that expand so i'm gonna actually check that out okay so i like the comments here too set num so this is how the number is set which is basically like hey i get the number but when i click eight here this is what sets the number so this is when the number is click get the current number selected so okay i understand how we're getting the current number get attribute data num okay so whatever i'm typing in there is being gotten display the current number so i believe that's maybe there wow i love that so if you do eight divided by zero it goes you broke the universe or it goes uh look at what you've done and it goes reset universe that's beautiful aha that's where it's coming from so in css the value fade ins that appear and so they're happening right here and the content we're getting from data num so for example whatever content i have that's in our data num that is what i believe ends up showing right here so this one really freaking beautiful the front end is awesome love this project really good project and oh by the way i'm i just typed in javascript at the top on codepen and we're just checking out some of the projects there so you could do that too and then look at projects that have javascript in there okay so let's take a look at something else that's interesting so we looked at three projects that's so far that were pretty freaking cool all right so here's another one and i really like this project actually this is really fun we have our chat built here and i can basically send a message so i can be like hey what is going on and if i send this message i get a reply back beautiful all of this is happening without any back end this is just with front end and what's happening is we have our javascript code right here and our javascript code basically we have an array of random messages those random messages are coming out right why did the web developer leave the restaurant because of the table layout and that's this joke right here and that's just being randomly displayed that's good so far and then the rest of it is heavy on css there's a lot of styling going on here right so you have to know how to be able to make a layout like this using html css you can use frameworks you could use grid for this or you could use flexbox and to know okay how are we getting a chat box that looks like this and now my front end skills are not the best as you guys have seen some of my videos right my back and skills are probably a lot better than my front end skills but all of this is happening front end we're sending a message and then we have piece of javascript that essentially waits and then you know i assume it's this set timeout and then we append that to the list of the messages and then we boom send that message but it's fancy because of even how we get the message right when vincent responds it's in green it's on the left hand side it has a timestamp right and what's cool is that it's also pulling the current timestamp timestamp is also styled that's freaking cool it's every response we get it about one and a half second later i believe that's what that 1500 right there probably means we're able to scroll this thing that's also really cool and all of this is pure pure javascript and css so not even libraries or anything like that being used so beautiful project really really awesome i really like it how we have this showing up here we can search oh crap the search works yo what that's awesome i don't even think they're using a react here i don't think so can you react here let's look nope we're just using font awesome well that's for css jquery handlebars but yeah definitely not using react here so really cool project really really awesome project actually to look at chat widget that's it i hope you guys had fun with this video i hope you got to learn something out of it or at least you just had fun look if you enjoy content like this what i recommend you check out is i had a css battle with my boy nas maybe you want to see who want maybe you want to see how it went so what i recommend you to do is go ahead and click that video and go watch that video right now you're going to have a ton of fun you're going to enjoy it with that said i love your beautiful face if you enjoyed the video smash the like button so this video goes out everywhere this is your boy cozzy i love your beautiful face and i'll see you in the next video go click that video while i juggle these lemons i freaked out at the end because i realized i had a cup of coffee right here if it splashed onto it it would destroy my entire studio while you're still here go watch the other video i love your beautiful face i'll see you\n"