Web Development Tutorial - JavaScript, HTML, CSS - Rock Paper Scissors Game

[@suraj-ram7488]

Honestly, one of the best videos that show how to combine your HTML, CSS and JS skills

[@kmz16]

is there any projects like this in yt?

[@abdelrahmanelshemy3841]

F

[@_.sunnyraj._]

Thx

[@TheLifeOfMarcus]

Yea. I have learned js but never really used it in a website because I didn’t know how to

[@discjrolli]

U r right ram bro

[@pjsingh569]

I love that he shows how the page looks after every step has been applied. very detailed.

[@prointernetuser]

I like how he tests with console.log every time he writes a function. That's good coding discipline.

[@Joe.stark2]

I love how he combines HTML , CSS , and javascript and explains his whole thought process. Some other videos the person just writes codes and doesnt explain why they did it. . Really good video

[@bob-ny6kn]

Real coders comment their code.

[@Joe.stark2]

@@bob-ny6kn god coders don’t need comments

[@bob-ny6kn]

@@Joe.stark2 Good coders comment. You are referring to people who think they are irreplaceable, but are not. I did loads of unpacking code so it could be reused or modified.

[@Joe.stark2]

@@bob-ny6kn it was a joke my guy , get the stick out of your ass

[@bob-ny6kn]

@@Joe.stark2 oops. sry.

[@manishgarhwal7119]

Man,,, I gotta say it.... I FOUND THE BEST TEACHER OF ALL. THE WAY YOU EXPLAIN ( EVERY MINOR DETAIL). DAMN BRUH.

[@moea.9120]

When we know HTML, CSS and JS, we can do almost everything in terms of web design.

[@JohnLow7627]

@@RyeRob.isnt it node is base on javascript?

[@flumiie]

Anything that encompass front-end, including desktop app like electron for example @@JohnLow7627 NodeJS as the name says.

[@WinterSnowism]

Node brings Javascript out of the browser. Which means Javascript can now be used for anything (server, desktop, mobile, web, games, etc.)

[@mr_wormhole]

wrong, you have to know frameworks(react,vue,angular, bootstrap,etc...) of js to be able to do some serious stuffs or your web design will be close to 90s and 80s.

[@nomatter56]

@@mr_wormhole 😩is that so!? Nevermine, even you can do a huge efficient and an effective web using bootstrap css html. Java script also. All these were very easily found! So can easily do.

[@santigogaming8630]

i'm proud of saying: I made the game in my computer and learned a lot of things. Thank you!

[@martinmecir2548]

1:19:40 You know he is programmer, when he start counting seconds from 0 BTW Thanks for great tutorial!!!

[@lplache]

HAHA lol!

[@samixpunch9678]

hahaha I am not a real programmer but I get it lol

[@trumpgaming5998]

@@samixpunch9678 no its because you actually count from 0 in programming

[@mytwins5653]

Best video of making rock paper scissors ever. So simple and easy to understand. I like the way he explains what he is doing and why. Much better than many other people just writing without explaining. Thank you.

[@navalkumarshukla9447]

Wow man, total respect for ya. Especially the way he explained his thinking process (in a fun way) was super duper fun to watch. It was such a pleasure to write a code with something like him.

[@saidsaid-nn1qk]

This is so good, clear and short with no gibberish or unnecessary explanation , I just love it !

[@hodgepodge3923]

Just ran through the entire tutorial now. Thank you so much for the upload, learnt quite a bit and really excited to be adding interactivity to my own website soon. Keep up the good work.

[@jonhatfield9902]

This is like one of the small, select few KZbinrs that actually do high quality teaching. Thank you so much for your excellent videos.

[@outis99]

I followed all the HTML CSS and then did the entire Javascript almost on my own, I looked to see how to use event listener some function ideas but the mechanics I coded on my own and it was really fun how we did it basically the same! Awesome tutorial!

[@LUCKYYT-fq6xq]

where i can get png images

[@danielmadison4451]

Very nice. Coming from a 30 year background Assmbly, Fortran, Pascal, C, C++ and now learning Web Design HTML5, CSS, JS, PHP , Servlets. GREAT VIDEO... Does it all. Thanks

[@md.akib5124]

52:40 switch (userChoice + computerChoice) { case 'rs': case 'sp': case 'pr': console.log('User wins'); console.log(userChoice, computerChoice); break; case 'rp': case 'ps': case 'sr': console.log('Computer wins'); console.log(userChoice, computerChoice); break; default: console.log('Match drawn'); console.log(userChoice, computerChoice); } this reduces some extra line

[@MrStealthWarrior]

@@MilanDrazic There are only 9 possible combinations. How in the world there could be more draws when 6 options are covered?

[@MrStealthWarrior]

@@MilanDrazic Then it's just the way random works.

[@HimanshuKumar-xz5tk]

While following the tutorial, I developed my own code, and it was working fine. Then I saw yours. It had better readability and was done in less number of lines. Plus I didn't know we could access a CSS class in JS. I used style.border in JS itself. Today, I learnt a lot. Thank you so much,

[@Ginfio]

This is like a movie episode. I can’t stop watching.

[@sarahrose7198]

Great video! Very easy to follow, explained thoroughly, straightforward, and your tangents didn't branch too far off; just enough to learn helpful little tips, then right back to the point. The upbeat attitude kept me more engaged, excited, and absorbing more info than KZbinrs with monotone voices who speak rather quickly

[@sounak2009]

"I am never losing. I think there's something wrong there" LOL

[@cluelessdev3851]

okay, 11 minutes in and this is amazing! This is probably among the best tutorials so far. I already know how to programm so it is a bit tedious to look at more beginner tutorials so this is amazing. Thanks a lot man

[@TbirdEnergy]

Love how fast this is. I'm working on my own projects, so this was perfect to help me learn to tie things together more eloquently. Deepened my understanding on a couple things such as the DOM. Thanks! Also reminded me to look for immediate feedback after every step by refreshing the index page. Great quality and well spoken. Learned a few more css tools as well :]

[@abdous-i8s]

learning to interact with the dom is a great way to get into javascript

[@nicolasazoidis9064]

Bro you are the best teacher in plain English! I think i would learn programming just hanging out with you and talking...my respects. You should become the main teacher at FCC.

[@IQUBE]

For those of you getting this error : Uncaught TypeError: Cannot read property 'addEventListener' of null Do this: on the first line of app.js add this piece of code : document.addEventListener('DOMContentLoaded', () => { // all code goes inside here // all code goes inside here }) Hope this helps :)

[@funnybro6504]

You saved my life dude!! I was stuck in this for so looooong!!

[@emailbot3278]

Oh this worked!! Thanks

[@gamerpro-ke9pi]

Thanks a lot man!! I couldn't find anything in Stack Overflow but I found your comment and it worked

[@jevitamariasaldanha1618]

Just to clarify, paste the entire code of the file inside this function guys.

[@a.n.7338]

hi i am getting error at function rock.addEventListener("click", function()) can someone help me?

[@kenhsu4229]

This is really a fantastic intro for web developing beginners. Even though I have no basic knowledge about JS, it's still easy to understand by what the hoster instructed or explained in the video(for those people who are watching this, I recommend you pause the video and search those unfamiliar methods or functions by yourself when you are stuck). This is an absolutely rare masterpiece that can be so simple to learn but simultaneously maintain its complexity. Great job! Please keep making these types of thorough tutorials. I believe that it will definitely benefit more people, especially students and beginners!

[@MuhammadArshad]

Thank you man, this is my first JS tutorial, coming from Python, you made it quite easy for me. Appreciate it. :)

[@TheAznBeaner]

your ability to explain what you're doing is very considerate and clear, thank you

[@lueizack6639]

brother you nailed this tutorial i mean nothing could be better than ur explanation awesome job bro keep learning for our learning

[@hochingcheung7020]

I am a beginner of JS. Your explanations are very clear and detailed. Like the debugging parts. Learn a lot from this video. Thank you very much :)

[@willurban837]

Thank you for the tutorial, it was my first time using HTML, CSS and JS all together. I really had a good time following this video and learned a lot.

[@omaralsayed6842]

Easiest way used to explain Javascript . Hope I can find more videos like that..

[@iBakoBence]

Man, You teach pretty damn well! Thank you! :)

[@mhnarun]

What a fantastic video! Please continue to keep doing these short and crisp videos!

[@pshreekumar]

Positioning that 'user' and 'comp' badge was cool! That was super cool!! Dhanyawad!

[@himanshunahak5105]

I sat and watched the entire video and this was very informative!

[@life_is_music7686]

Just saying, if you use Visual Studio Code, there is an extension called live server so basically whenever you save, it shows up on the localhost ur working of :)

[@Hirand2349_3]

Woah! what an explanation and u beautifully combined HTML,CSS,JS ... Hats off u

[@sal_amat498]

Good job very nice tutorial, and well presented.. make more tutorial sir. Tnk u

[@linhbebu912]

I don't normally comment on KZbin Videos but this is a great tutorial with all the explanations. Thanks so much!

[@nabilfahimi9061]

where di you get the images fomr?

[@clownn7267]

u are literally the best dude on this platform for tutorials.. nice job

[@chandanswroop3932]

Well Nice video.!!! But next time tried to write code in bit larger Font size in bright screen which helps in to make more understandable.. Good Explanation.. Keep it up.

[@jaydon.2833]

bright? thats R A C I S T

[@cityzenishaan536]

Helped me soooo much with a coding project thanksssssss

[@ErickNishimoto]

Thx from Brazil!!!

[@PedroHenrique-es8rv]

​@@fabioleonam Entra no canal dele e olha.

[@3xxiled]

dude, great video; fast paced learning is what I'm all about. A lot of other tutorials spend way too much time re-explaining concepts, which I agree is important for people. But for me, I just need to grab the important details and move on.

[@prateshtamhankar3568]

hi, i really like this tutorials, it is like a spoon feeding , please let me know from where i can get those icons. thank you

[@mellepella]

The explaining of all the code in this video is good and understandable, but one thing I find important to teach new coders is how to organize all the code. If they don't do that they will find out that the hard way by needing to scroll down thousands of lines of code to find whatever you want to change. You organized HTML, CSS and Javascript separately and that's good, but you have to organize it a little more specific, for example: styles (folder) > typography.css (where you will find the CSS for things like font-family, text color, font-size and so on). Other than that, great video!

[@lucasreis49]

const choices = ['Rock', 'Scissors', 'Paper']; const getComputerChoice = () => {return choices[Math.floor(Math.random() * choices.length)]}; function game(userChoice){ let compChoice = getComputerChoice(); if(userChoice === compChoice){ draw(userChoice, compChoice); }else{ if( ((choices.indexOf(userChoice)+1)%3) === choices.indexOf(compChoice) ){ win(userChoice, compChoice); }else{ lose(userChoice, compChoice); } } } This reduces some lines. Also you don't need to use convertToWord anymore, you can just use: `${userChoice} beats ${compChoice}. You win!` for example.

[@raoaleemakhtar8903]

You could have used rock, paper and scissors in the array and the switch and the IDs(and wherever else you used r, p and s). That would've made line: 27, 28, 29 much more neater and the switch much more readable. and are also HTML tags. By the way your code is super super neat.

[@bradliu1891]

One Important question: where to download those three png files? Thks!

[@firdauz7413]

i'm using another clip art, the result not as exact as it should, but it's fun because i need some modification and i'm happy for that, this is my new skill during quarantine xD.

[@cyberbiosecurity]

best tutorial video on web dev i've seen so far

[@Darkthuggg]

Really like that color picker, what is the name of the extension?

[@sob3ygrime]

agreed!

[@mystickid1]

@Darkthuggg it's called "Sip" on the mac. FInd it at sipapp.io/

[@sakshammanocha640]

Colorzilla for windows

[@sob3ygrime]

@@sakshammanocha640 thanks so much got it added to my tool belt :)

[@Silverjerk]

Frank Deloupe is also a great, minimal app as well.

[@kriete2883]

This video litearlly was the source that helped me figure out how to put a score board onto my js pong game for my class. Learning how to make a html/js/css into one note pad file was thanks to you man!

[@EduardoLeviBC]

excellent tutorial, congrats! just couldn't do the classList.. it showed "Uncaught TypeError: Cannot read property 'classList' of null"

[@brendanleighton]

You ever figure this out?

[@stspapergenius]

@@brendanleighton did you ever figure it out? lol. I'm so stuck

[@brendanleighton]

@@stspapergenius Sorry, I don't remember this at all. I probably found an answer through Google. Literally, just copy and paste the error message into Google and you will probably find the answer.

[@victorrus01]

Thus channel is the best in the entire internet!!

[@marufawal]

Hi I'm a newbie how did all you guys get the rock paper scissor images?

[@marufawal]

@Lucas thanks fam

[@marufawal]

@Martin Bekus thanks fam

[@daniyalkhan9702]

oh man u just nailed it. 🔥 The way you telling these all things in the simplest way. Love it

[@ausglobeman]

omg what was that app that tells you the color of something I NEED IT

[@qsmfoui]

sip color picker

[@suhailmalik8248]

You are a great teacher. I didn't get bored. Thanks for tut.

[@ShivamPanchbhai]

he removed the hover function while explaining javascript give us the art work please watch dom tutorial videos first for the javascript part in this video he is using atom code editor in dev mode and had installed the following packages in it: file-type-icons atom-html-preview atom-css-comb color-picker atom-beautify open in browser(cnrl-alt-o)

[@anuragchitnis9330]

I am following your channel from a long time... And this is one of the few channels where I like the video then I will watch it..... Thanks for amazing content freecodecamp guys

[@bobans]

Nice tutorial. You should try VS Code instead of Atom, it's much faster!

[@Silverjerk]

Atom and VSCode are both built on Electron and perform very similarly. Although I use VSCode myself, I was an Atom user for years and it's still an amazing editor. Github and Microsoft have also collaborated heavily on development, so while the "Use VSCode" recommendation is an extremely popular response, it is often based on the notion that everyone should be using the most popular editor at the time, because both editors are now on similar roadmaps. It took me almost 6 months to transition away from Atom, due to how heavily invested I was in that environment, how much tweaking and theming work I had done, and how effective I was at using it. Before that I had similar challenges switching from Textmate to Sublime. So although I do love VSCode, if it weren't for some of the built-in functionality I'd probably still be using Atom, as I do run into some issues with VSCode that make me regret switching from time to time. Sometimes using an editor isn't as easy as "use what's popular;" for a professional developer working full-time on a team, shipping and looking at deadlines on the horizon, the notion of switching can be a daunting, and potentially hazardous one.

[@bobans]

@@Silverjerk nice response. Very well documented and clear. You are right about the switch from an editor to another, because the learning curve takes time and time is not something to take for granted in 2018.

[@Silverjerk]

​@@bobans Definitely. And despite what I said above, I'm happy to be living in a world where deciding between editors is a difficult choice, because many of them are making good arguments for themselves. I've been through my share of frustrating experiences, so I always try and check myself a bit when I start complaining about this or that feature, remembering there was a time when I was writing HTML in Notepad.

[@Silverjerk]

@@ShelterDogs Again, there just isn't that much of a difference between the most popular editors to justify a shift in workflow if it's not a requirement (e.g., if you're part of a dev shop that imposes ubiquity between its team members' tools). And even your own point is self-defeating. We can't ALL be on the same page, since VSCode has about 40% of the market right now, with Atom taking up 20%, and Sublime another 30%. So yes, it is about personal preference. Your argument would be valid if everyone was using the same editor, but the reality is that MORE people are using editors that AREN'T VSCode. And here's the thing, I think VSCode is probably the best editor that's come to market, and one of the best products Microsoft has ever released, but your "ugh" reaction seems to be based more on why this guy isn't using the FOTM editor, rather than any real argument against Atom, which is still an amazing editor in its own right (and is even using a shared roadmap with VSCode). Something to also keep in mind is that no tool is perfect. I ran into an issue with VSCode's Prettier plugin during the last update, as it broke formatting in several document types. I ended up working in Atom for a couple of weeks as the workaround was a bit hacky and kind of a pain in the ass. It took me about 10 minutes to install some of the additional plugins I was using in VSCode and the experience was almost identical. The only thing I missed was my Monakai Pro theme.

[@juliusoh]

Yooo you are a really good teacher whatsDEV really explaining every step very good

[@jaimebastida8956]

Which is the name of the color picking tool?

[@trungpvq8181]

u can use Colorzilla extension on chrome

[@jaimebastida8956]

@@trungpvq8181 Thanks!

[@m.o.o.n.c.a.k.e]

I will be doing this at night to keep practicing my skills, I'm so excited!

[@ryanjin6638]

What is the name of the color picking software?

[@jupiter4264]

Ryan Jin you mean the software to code this, If so it is called HTML 5

[@ryanjin6638]

@@jupiter4264 No I meant the color picking tool

[@andresbf830]

@@ryanjin6638 dont know ... I use ColorZilla

[@ryanjin6638]

@@andresbf830 Thx man!

[@andresbf830]

@@ryanjin6638 happy to help! :)

[@vittor1235]

i love the way you do the logic of the game, the first think is use various if

[@EyesReye]

Could have just renamed the Div ID's to Rock Paper Scissors instead of writing a whole new function for it.

[@ksc5552]

you just explained all concepts really clear that I felt confused when I saw other videos about this topic html, css, javascript. Thank you so much !!

[@marcozapata6984]

I just started with CSS and HTML a few months ago so forgive me if my question sounds silly but instead of adding font-family: Asap, sans-serif to every class that needs it wouldn't it be more productive to just add to the Universal selector the font family of Asap and just use font-family to the classes and id's you WON'T be using Asap (in case you needed)?

[@PunyuPunyuMunyu]

He know and he mention that on video

[@orpheuzdevelopment4098]

or just add it to the body element

[@nomatter56]

Check out my chanel

[@muhayminkhan7063]

Wow i am a beginner in Javascript but i understood every single word here because his explanation is so good. Thanks you for this video. It really help me a lot

[@emorgan0085]

16:58 that's what she said

[@tokinakano]

Thanks whatsdev and fcc. Great tutorial.

[@tobiaschristensen9896]

34:56 for me it says in console "Uncaught TypeError: document.GetElementById is not a function at app.js:3"

[@sakshammanocha640]

It should be document.getElementById

[@MrDaLeX-gc1zg]

js is sensitive document.GetElementById *WRONG*: _*RIGHT*_: document.getElementById()

[@MrDaLeX-gc1zg]

@@rosenclosed that what i was saying for two months xD

[@MrDaLeX-gc1zg]

@@rosenclosed and we have a saying that means if your hungry eat.... thats a nice saying right xD?

[@jimchan7352]

I mean this is probably the best combination tutorial of web design. It's better than a one-week book reading...

[@teamnoob9380]

I have uploaded all your code too codepen until you upload it: codepen.io/255994/pen/qQaByN I put reference links back to this tutorial. Really great tutorial! I wish it was in higher quality though, but none-the-less very cool and interesting to watch you piece it all together. I particularly liked when you explained how you can improve the old way of writing functions compared to the new way of writing ES6 functions.

[@st.petesburg9882]

Thanks, dude! Appreciate that!

[@jindani]

Thank you very much bro

[@erk03k81]

You forgot the cursor property dude XD

[@samoguz]

Your explanations are outstanding. It truly shows how knowledgeable you are. Thank you!

[@dosendusche4049]

*declares a const* "we gonna update this later, depending on who wins and stuff [...]" - oh god pls no, don't do this. Time: 27:39

[@mellepella]

Hahaha, that was exactly what I thought xP

[@CarlaDaaniela]

Im watching u from Argentina, thank u so much for that video! My Rock, Paper, Scissors looks amazing ♥

[@navalkumarshukla9447]

If anyone's looking up for the code reference, here's the one that I have written (which is almost the same that has been given in the video): github.com/NKShukla/rock-paper-scissors

[@chasethrillzdafantac]

thanks a bunch if it counts 5 months later

[@narendrasudrik5073]

Excellent solution oriented video on html, css, JS. !!! The way you explained is awesome. Many thanks.

[@Kidaar]

Full screen please

[@nomatter56]

Check out my chanel

[@andrewthomas3467]

What is that color picking tool he used lmao it was magic

[@nakamuraSakahashi]

you can use pixie

[@sathvikvutukuri9179]

I have followed each and every step along with some extra features i have added. Great tutorial from which i learned a lot.

[@SonGoku-ic6hi]

how can i get these images?

[@alphamega7121]

i don't know i search too

[@zemenlezemen6160]

Search for hand emojis on google images

[@shantanumaitra8192]

Great!👍 I Wish My College had Teachers like you who explains so well🙌🙌

[@JNET_Reloaded]

Code link coming in a few days.? reply when its available

[@thecommentary]

available

[@JNET_Reloaded]

@@thecommentary direct link to the actual page?

[@madeyeatreides4055]

@@JNET_Reloaded Did you find it?

[@JNET_Reloaded]

@@madeyeatreides4055 no, neeed a direct link to it im not signing up.

[@AnuragsharanTG]

codepen.io/255994/pen/qQaByN

[@VietAnhNguyen-pj8hm]

31:00 Here's the thing that experienced programmers know that beginners don't. Storing DOM for future use first => always storage DOM elements in varibles on top lines so we won't need to repeat querySelector many times

[@siema32]

1:11:27 -> it do what he says! OMG

[@nomatter56]

Check on me

[@oufcena5092]

@@nomatter56 Don't be such a beggar! Ew

[@coding7909]

loved loved loved the way this guy explains, Absolutely amazing! Thanks alot!

[@nicholasmeyer152]

Why does this look like Python?

[@imnotlmao]

How fucking dumb do you have to be to think JS looks like Python.

[@csking9929]

Thanks for the tutorial! this makes me clearly know how html, css, javascript work with each others in a very fun way!

[@KnoonGnoon]

This awesome video just 1:30hrs but took me a week to finish it lol. Thank you so much! 😊

[@Amolang991]

thank you for this video, this doesnt even have any advertisement.

[@sankamohottala6778]

This is really good. i watched the entire video and did the coding. really good intro to the whole web development thing. thanks guys.

[@camarondeviaje]

Great explanation of "Caching the dom"

[@muhammadjonnazarov146]

Wowww, That's awesome project and video keep going )))

[@JamesBond-sy8wj]

Why is this so satisfying to watch?

[@Galacticcactus16]

Thank you man I finally finished this tutorial was super fun found a new interest!!

[@alenahalota5593]

That was fun and a great exercise for practicing. I also appreciated that you showed some ES6. Thanks!

[@zeeshanhayder3559]

I have enjoyed the whole video, you are rocking man! I have done!