Javascript Rock Paper Scissors Game Tutorial | Web Development Tutorial

[@developedbyed]

Hope you enjoy this one! It got dark already lol. Might take a while to process the video for 1080p.

[@mohamedh.394]

Hey Ed. @30:44 why did you use a regular 'function' rather than an arrow function '()=>' ? Thanks for the videos. *edit* Haha Nevermind. My question was answered a minute later in the video.

[@brahimnkhili7057]

Thank you sooo much for this beautiful videos, you made programming soooo FUN, you're my HEROO

[@lutfula9006]

Thank you Ed

[@abdulsubhan1950]

hi sir i have a problem in code i follow same steps u did but in 31: 43 its show error Uncaught TypeError: options.forEach is not a function what can i do plzz help

[@KRAMDROIDTECH]

Thank You so much ed😊

[@mhm6]

i wish u were my professor during college. you make programming really fun and you have a cheerful tone in your voice that makes you sound very approachable for help outside the classroom.

[@justadudeuu]

i love the energy

[@farazmehraien3913]

your sense of humor and skills are fantastic

[@abhisheksunam4869]

Ed is like "your friendly neighbourhood dev".

[@jakeylee.mp4]

42:15 "I think i saw a gang sign in there.." lmfao

[@6MyK]

You "rock" man ! I like your tone and explainations, thanks for sharing and giving us the opportunity to learn this almost basic stuffs. And yes you did cross the ocean to teach a french guy ;)

[@saidsaid-nn1qk]

42:10 "I think I saw a gang sing in there " lol

[@krishnachakraborty9053]

I have gone through may videos to learn javascript but get hopeless soon. yours are the most compact and useful videos. Thank you.

[@lynx1850]

i dont usually comment but it was i able to find most helpful javascript tutorial series. Thank you so much, its gave me a lot.

[@dmitry9718]

The best video to learn for beginners. Very clear explanations. Thank you

[@DanielSouza-nq1hw]

6 months and there's no dislikes omg this is so good

[@rassoultaleb9373]

you jinxed it.

[@sauhardbhandari8435]

It was so much fun watching, doing, learning and everything... Thank you .. thank you so much for being a great tutor out there!!

[@rohinisampath]

First video which doesn't have dislikes!🖤👌

[@trelala789]

This is great tutorial, but it is missing one small detail at the end (I didn't realize that at first either). Hands should always do 'shaking' with rock. But now it stays in whichever options was the last. For resetting to rock for next round, place this in options.addEventListener function: playerHand.src = `assets/rock.png`; computerHand.src = `assets/rock.png`;

[@williamwalker4494]

Thanks Renate. Important that this code goes after line 43 }, 2000); . However this is still no animation on subsequent rounds. Know how to fix this?

[@trelala789]

@@williamwalker4494 I'm not sure what you mean. Yes, need to place this code outside of the setTimeout function, but otherwise it doesn't matter. It works same for me regardless of placing it at the very top or at the end. Did the animations work for you, before trying to reset it with this code?

[@madmike0064]

Thanks Renata this worked for me. I placed this after line 35 & it seems to be working perfectly.

[@duncansareto7854]

umeweza! thats a swahili word of saying you've done it well. Your teaching is mindblowing and inspiring. keep the good work.

[@pawezawadzki9113]

I just want to notice, that if anybody has the same problem as me (that is - when fadeOut style overrides fadeIn, even after applying startGame function [24:25]) you can easily solve it by adding !important to both arguments: div.fadeIn { opacity: 1 !important; cursor.event: all !important; I am working at Safari, and it came up even though I followed every step of this tutorial, and this solution works like a charm.

[@jadijohnson2899]

kzbin.info/www/bejne/Y4uuqICil96lapo this video is better alternative

[@pawezawadzki9113]

@@jadijohnson2899 It is nowhere as good as this tutorial. I know you linked your friend's/your channel in order to get views, but its creator use "var" keyword which is a bad practice in almost every case. It is also not as detailed project as this one. There's absolutely no explanation on why he/she uses this or another function over other. Also - no music, no voiceover, just awfully placed subtitles. I guess it is indeed alternative way of coding the same project, but it's definitely not a better one for learning.

[@jadijohnson2899]

@@pawezawadzki9113 I let him know

[@pettersonabade5956]

WOW, this is awesome! I'm learning javascript with you.

[@andrewblyth3776]

This was really easy to follow and you made it fun. Thanks a lot!

[@leonragnasheneider1393]

in 22:04 the line 11 in java script section it says to me that "Cannot read property 'addEventListener' of null" When I exactly trying to copy the codes for studying purpose.

[@davidcarter4116]

Nice work... and I enjoy your videos and please keep the mistakes and troubleshooting in the videos that has a lot of value and it is real world. These types of mistakes happen all the time, even to developers with years for experience, people get stuck all the time is it important to know how fix these issues it is part of a developer's skillset. It also let newer developers know that experienced developers run into the same issues. Anyway I appreciate the time and effort you take to create these videos.

[@prasannapurohit582]

hey, Dev Ed, the way you do while writing code is mind-blowing, I just watch your videos to look the cool stuff of face and action you do. keep doing dude.

[@anotherbaby9703]

You are doing amazing Edwin! Started with your 1st javascript tutorial today.... Hope I learn it faster than I could.

[@abicinemafood]

Hey Ed, I know it's late since you posted this, but I think one thing remained unsolved. At the end when you delayed the fist/rock shaking hands, that only works for the first round, because in the next rounds, images don't delay. So I guess you should add that for each round, on every time that buttons get clicked

6:03 " - Let's take a look how does looks and it is gonna look [ 2 seconds ] HORRIBLE!! NICE !! " Hahahaha Thanks for the tutorial, I've had so much fun learning JS so far.

[@pauljerome162]

Hey man, thanks for this video it helped my solve a problem on my website that has bugging me forever. keep it up!

[@lavanyam9337]

Thanks a lot !! You are so young and educate a lot of young minds. Extremely glad to become your subscriber!

[@raj89378]

Amazing Video. Love watching your videos man. Keep it up bud!

[@johanhellberg9677]

Thank you for the fun and easy to follow along rock paper scissor tutorial!

[@jenskristianlaufrederiksen3554]

Nice tutorial! I found these percentages a bit more appealing though xD @keyframes shakeComputer { 0% { transform: translateY(0px); } 30% { transform: translateY(-50px); } 44% { transform: translateY(0px); } 58% { transform: translateY(-50px); } 72% { transform: translateY(0px); } 86% { transform: translateY(-50px); } 100% { transform: translateY(0px); } }

[@rawgz01]

Guys, you can add playerHand.src = `./assets/rock.png`; computerHand.src = `./assets/rock.png`; before computer choice to reset the images to rock when shaking after 1st time. GJ Ed.

[@jadijohnson2899]

kzbin.info/www/bejne/Y4uuqICil96lapo this video is better alternative

[@Jakersfire]

Another brilliant tutorial, great work

[@badasscoder4481]

Sir this is more different and unique than others on Ytube. Realistic

[@lautaroarcturus]

thank you man,. i couldnt make it work, but i took your aproach to the challenge i got in my bootcamp. ill try to make it work with tdd, using cypress

[@HostDotPromo]

Remember playing this game when I was a kid. Man I am addicted to Javascript vids.

[@igoroliveira7862]

Ed, thanks so much! You teach really well and your english is terrific. I am not a native english speaker but I can understand you very well.

[@PS-le4mf]

3:21 in & I did one like this from some other youtuber - again - yours is better. When you do a few videos that others do - then just do it in your style; people will see hands down who teaches better! This has been happening to me all the time. I'm doing this because the last time I couldn't get it completely working. I have none of those issues with your teaching apparently!

[@developedbyed]

I see you are learning Plastic Spoon! Thanks as always for the lovely messages!

[@247tomoekaoru]

Thank you so much, this was so FUN and interesting!!! Keep uploading cool tutorials like this.

[@pranavvyas7797]

1:52 PC making noise... Ed : " Bady computer wants some spanking huh ! 😂😂 " Ed is amazing ! I wish he was my JS professor in College.

[@marioskanellopoulos8780]

What a great concept dude!!! I know its been a while since you posted me but its still a really good one!!! Thumbs up from me for sure! I subscribed to you already and cant wait for more staff! Keep up the good work!!

[@love_tacos]

"So many Ps......and zero poops"" LMFAO

[@judygoergen8948]

39:54 "Oh, God. What are we doing with our lives?"

[@tanmaygadade5514]

At 24:26 mins my 'Into screen' is fading out but it's showing me an error in the ("fadeOut"). Can someone help me with this issue?

[@dereka6964]

Really good tutorial and jumping off point. Keep up the good work

[@davidmirza1366]

Thank you for this great VIDEO!! You are a very good teacher man !

[@tuitionstonight]

Welldone bro :) You have mindblowing programming skills :)

[@kritigandotra3622]

Thank you so much for this amazing project! Looking forward to making more projects with you and learning.

[@alinkhan238]

Amazing dear...🥰 Enjoyed the whole steps

[@sachinmohan6935]

Really enjoyed this project!!

[@snakone]

on the playMatch function at line 24 you might use event Delegation to avoid having the same function for each option, even if you ever click a button, you may not use this functions but they using unneccesary memory

[@sunnyshang4350]

Okay this is so fun to go thru. Love it

[@qrx.4596]

please help i left youtube just as Ed said at 6:12 and video disappeared, i don't know what to do

[@acacius6655]

Hey Ed! Really enjoying your videos. I was wondering - what extension are you using that formatted your code at 48:10 ~ ? It automatically made the code "consistent" in it's spacing after the "transform:" part. Cheers

[@edricko7]

the extension name is preetier

[@wojciechsnopkowski6971]

Great content. Much, much, much appreciated! Keep it up!👍🏻

[@GjentiG4]

How can I do a for (option of options) instead a for.each? min 30:15

[@anathkantonda]

May God bless you for this tutorial. Thank you so so much!!

[@parmeetsehdev9973]

Updating Images code is not working for me ... any solution 41:35 ... plz ???

[@ney1185funk]

Very nice Bud. thx for sharing.!!

[@harvygrados5298]

Love watching your videos !!!

[@Ch3Lu87]

Excellent video! Thanks!

[@BlackParaffin-pn8zb]

I couldn't finish this js project due to 41:30 image update, my code is not working. I've spend almost 3hours for this problem and I checked all the comments bellow but I've found no solution for this....😥😥😥😥😥😥😥😥😥

[@imindproduction9484]

Thank you @Dev Ed for your amazing tutorial and i have a question here, when we are creating the compareHand function and we gave it to parameters (computerChoice, playerChoice) with no previous mention to playerChoise above! although we needed the textContent of the buttons to compare it with the computerChoise. how we did that ?

[@karimaladdinmansour9636]

this.textContent or playerChoice refered to option in options , which was the button u clicked! const options = document.querySelectorAll(".options button"); so clearly playerChoice given by you (the user who clicked the button)

[@tannerbarcelos6880]

gonna take a bit of work to really understand DOM stuff but JS overall and . html/css have come relatively easily. its that portion of making a variable and saving a whole query into it but then walking through th elogic in a function which messes me up a bit! but that isnt on you, its on me as the learner! thank you for everything, and i will watch this video tomorrow morning in depth more!

[@jeffjames15]

Great tutorial!

[@chrisdanikas7918]

awesome dude keep up the good work

[@bikramchettri9405]

another wonderful and conceptual video. your js series is awesome. can you do a tutorial on how to make accordions,tabs ....etc

[@developedbyed]

Absolutely!

[@bikramchettri9405]

dropdown menu too while you are at it.

[@bikramchettri9405]

@@developedbyed I created an accordion. codepen.io/bikram-chettri/pen/omGeqp

[@sheerazahmadkhan1437]

Hi Ed, in the update function why are using const though we gotta update the variables.

[@jaimeojeda4780]

How does it know what "playerchoice" is.

[@Glam_by_Ak]

Hi dev this is Aman here I just started learning coding and I always watch your videos it’s very good and understanding I also tried this game but I want to try reset button on this game I tried to do but couldn’t can you please help how can we make reset button with js.

[@byedwardleung]

do you have anymore projects based on vanilla javascript?

[@maheshtamang6158]

dear Dev ed, I'm facing a problem in linking the image file as shown in 40:27 my vs code simply dose not recognize .src as a built in function which lead to not being able to link the file can if you know why it's hapening will please help me

[@marvij7715]

same problem.

[@ivanros9974]

@@marvij7715 My mistake was I wrote document.querySelectorAll instead of document.querySelector in playerHand and computerHand...

[@shrimpXD]

hey dev ed i wanted ask something at 37:21 instead of making 2 if statements can we just use an and operater && eg: if(playerChoice === 'rock' && computerChoice === 'scissors'){ winner.textContent = 'Player wins' }

[@ayanbanerjee5136]

You are just awesome bro!

[@LucaCirfeta]

One question, at 31:55 on //Check for Rock, I can also use a if statement with AND && like if(playerChoise === 'rock' && computerChoise === ''scissors)?

[@zoltankarpati8028]

Thank you, it is very inspiring. I really enjoyed it!

[@thequickcode5144]

Sir Great Effort I love your quality content and the way you teach is really awesome so thanks again for this tutorial

[@MrinalPatraASTU-]

Really enjoyed it, please make more videos on js

[@TheAsphixiator]

Hey Ed, great video, but for some reason, when I add the fadeIn class to my Match, it doesn't seem to work! Its somehow getting overwritten by the fadeOut we added in the HTML. Please help someone!

[@byedwardleung]

I just followed the code and it seems to work fine, you sure you didn't mistype something?

[@akshayvinod1235]

replace match.classList.add("fadeIn") with match.classList.remove("fadeOut")

[@ChrisGatt]

I'm still early in the tutorial but finding it really useful so far. Thanks so much! I noticed that your 'Live Server' seems to update almost instantly. I have about a 10 second lag. How have you set it up to be so immediate?

[@tusharjain5500]

You can set it in settings search for live server then their is by default delay of 100 milliseconds change it. And you are done

[@ilonarybka2333]

Good tutorials. Much appreciated.

[@mohamedh.394]

Thanks for the video, Dev! I found the theme you're using but how did you get your folder icons on the left side to look like that? That's really cool.

[@meenubakshi8653]

make a folder and add inex.html to it then on same folder add images then app.js and style.css

[@sayandutta2669]

AWESOME MAN 👌👌❤️❤️

[@hadinmz7877]

Thanks, Great tutorial 👍

[@love_tacos]

@Dev Ed: I have a question regarding the div.match element. I notice div.match has three children (, and ) and am curious about the width of the div.match. How is the browser computing the width of div.match? Or more specifically: Why isn't the div.match spanning the entire viewport? I noticed has CSS rules of position, top, left, transform....but nothing determining the width. And the three children (listed above) are all block elements, so I expect them to span the entire viewport. Maybe you or someone else can explain, if this makes sense. Thanks for the great tutorial! It's teaching me loads of good stuff!

[@andress6726]

Thank you Ed!

[@kibrisgazetesi6586]

Pressed like as soon as he slap his machine 😂

[@mohanedbenmansour5927]

bring your i7 back home :( love the tutorial

[@atikrangnekar3337]

which software are you using for recording

[@ledude_]

This is a great video to learn : At this time 40:57 for me this doesnt work : playerHand.src = '../assets/${this.textContent}.pgn'; computerHand.src = '../assets/${computerChoice}.pgn'; I just cant write it like this, putting a ${} in a src its like forbidden ... i tried to write it a different way but its beyond my knowledge.

[@anishsharma1281]

You have to use backtick ` ` not single quote ' '. Below is the correct code. playerHand.src = `../assets/${this.textContent}.png`; computerHand.src = `../assets/${computerChoice}.png`;

[@ajaykmr8684]

Hey, I hope that you're already out of this problem. But there might be some people who might be looking for the same doubt so instead of going for this complex approach, i have a simpler one for beginners so they might eventually get rid of this . so instead of writing such complex thingy, use "assets/" + this.textContent + ".png";

[@harshitpal5217]

@@ajaykmr8684 Thanks, I was stuck at this.

[@jamesharrold5045]

@@ajaykmr8684 Hey, thanks for the solution. When I enter ./ I don't get the drop down menu that allows me to link the assets file, do you know why this may be?

[@goodboy8180]

are you get the solutions

[@chaitanya_p]

I defined playerChoice along with computerChoice as playerChoice = option.className; the method in the video wasn't working for some reason

[@Jason.Rivera]

I had no idea that building a rock, paper, scissors game would be this damn complicated. *cries internally* I can't picture myself coming up with this all on my own....feeling kinda discouraged now

[@billyfairbank]

The good news is almost anything you want to create has been (at least partially) done before. Use this as a launchpad for making your own versions of great ideas. Even experienced devs feel discouraged sometimes. I'm sure it took MANY revisions to make this tutorial.

[@Jason.Rivera]

@@billyfairbank thank you

[@tomisinergy4963]

He doing programing at js manny years imagine yourself to programming like 5 years. You will do this game with closed eyes. But you put an honest answer unlike this other fake programmers.

[@joemao5473]

So awesome. Thank you so much !

[@sayyedshoeib7107]

how to find ho is winner after the player or computer point is 5,10 final result

[@MasterZiomekPL]

If you're new to JS understanding *this* part will save you a lot of trouble 30:35 At least it would for me.

[@davidngassa2135]

Awesome video! Thanks

[@manglesh0605]

every round should starts with the rock and than after animation should change to whatever value it get . how to do that sir plss rply.

[@zenu4558]

Awesome!!!!stuff loved it🥰🥰🥰

[@tonit6549]

What do I do if when i run it saids deprecated feature used?

[@starlight1468]

My hole compare hands method not working please help?????

[@aryanagarwal9845]

How did you attach that assets folder there?