Web Development Tutorial - JavaScript, HTML, CSS - Rock Paper Scissors Game
ฝัง
- เผยแพร่เมื่อ 6 ต.ค. 2024
- This web development tutorial shows how to use JavaScript, HTML, and CSS to create a Rock Paper Scissors Game in the browser.
Tutorial by whatsdev. Check out their channel: / @whatsdev
--
Learn to code for free and get a developer job: www.freecodeca...
Read hundreds of articles on programming: medium.freecod...
![CAMPปลิ้น | EP.82[2/2] เมาท์มอยกับ 3 สาวเพื่อนซี้ ที่พร้อมขยี้พ่อหมีได้ทุกเมื่อ](http://i.ytimg.com/vi/Wwn7WnylNtQ/mqdefault.jpg)
Honestly, one of the best videos that show how to combine your HTML, CSS and JS skills
is there any projects like this in yt?
F
Thx
Yea. I have learned js but never really used it in a website because I didn’t know how to
U r right ram bro
I love that he shows how the page looks after every step has been applied. very detailed.
I like how he tests with console.log every time he writes a function. That's good coding discipline.
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
Real coders comment their code.
@@bob-ny6kn god coders don’t need comments
@@IsraelHernandez-fq9dy 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.
@@bob-ny6kn it was a joke my guy , get the stick out of your ass
@@IsraelHernandez-fq9dy oops. sry.
Man,,, I gotta say it.... I FOUND THE BEST TEACHER OF ALL. THE WAY YOU EXPLAIN ( EVERY MINOR DETAIL). DAMN BRUH.
When we know HTML, CSS and JS, we can do almost everything in terms of web design.
@@RyeRob.isnt it node is base on javascript?
Anything that encompass front-end, including desktop app like electron for example
@@JohnLow7627 NodeJS as the name says.
Node brings Javascript out of the browser. Which means Javascript can now be used for anything (server, desktop, mobile, web, games, etc.)
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.
@@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.
i'm proud of saying: I made the game in my computer and learned a lot of things. Thank you!
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 :)
You saved my life dude!! I was stuck in this for so looooong!!
Oh this worked!! Thanks
Thanks a lot man!! I couldn't find anything in Stack Overflow but I found your comment and it worked
Just to clarify, paste the entire code of the file inside this function guys.
hi i am getting error at function rock.addEventListener("click", function()) can someone help me?
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.
1:19:40
You know he is programmer, when he start counting seconds from 0
BTW Thanks for great tutorial!!!
HAHA lol!
hahaha I am not a real programmer but I get it lol
@@samixpunch9678 no its because you actually count from 0 in programming
This is so good, clear and short with no gibberish or unnecessary explanation , I just love it !
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.
This is like one of the small, select few TH-camrs that actually do high quality teaching. Thank you so much for your excellent videos.
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!
where i can get png images
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
This is like a movie episode. I can’t stop watching.
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,
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 :)
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 :)
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.
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.
brother you nailed this tutorial i mean nothing could be better than ur explanation
awesome job bro keep learning for our learning
your ability to explain what you're doing is very considerate and clear, thank you
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 :]
learning to interact with the dom is a great way to get into javascript
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 TH-camrs with monotone voices who speak rather quickly
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
@@MilanDrazic There are only 9 possible combinations. How in the world there could be more draws when 6 options are covered?
@@MilanDrazic Then it's just the way random works.
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.
Thank you man, this is my first JS tutorial, coming from Python, you made it quite easy for me. Appreciate it. :)
Easiest way used to explain Javascript . Hope I can find more videos like that..
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.
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
Positioning that 'user' and 'comp' badge was cool! That was super cool!! Dhanyawad!
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
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
thanks a bunch if it counts 5 months later
i love the way you do the logic of the game, the first think is use various if
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.
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 !!
"I am never losing. I think there's something wrong there" LOL
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!
Man, You teach pretty damn well! Thank you! :)
Helped me soooo much with a coding project thanksssssss
where di you get the images fomr?
Woah! what an explanation and u beautifully combined HTML,CSS,JS ... Hats off u
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
I mean this is probably the best combination tutorial of web design. It's better than a one-week book reading...
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.
bright? thats R A C I S T
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!
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)
u are literally the best dude on this platform for tutorials.. nice job
Good job very nice tutorial, and well presented.. make more tutorial sir. Tnk u
I don't normally comment on TH-cam Videos but this is a great tutorial with all the explanations.
Thanks so much!
Could have just renamed the Div ID's to Rock Paper Scissors instead of writing a whole new function for it.
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.
excellent tutorial, congrats!
just couldn't do the classList.. it showed "Uncaught TypeError: Cannot read property 'classList' of null"
You ever figure this out?
@@brendanleighton did you ever figure it out? lol. I'm so stuck
@@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.
I will be doing this at night to keep practicing my skills, I'm so excited!
Thx from Brazil!!!
@@fabioleonam
Entra no canal dele e olha.
I have followed each and every step along with some extra features i have added. Great tutorial from which i learned a lot.
Nice tutorial. You should try VS Code instead of Atom, it's much faster!
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.
@@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.
@@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.
@@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.
Great!👍 I Wish My College had Teachers like you who explains so well🙌🙌
One Important question: where to download those three png files? Thks!
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.
Your explanations are outstanding. It truly shows how knowledgeable you are. Thank you!
Really like that color picker, what is the name of the extension?
agreed!
@Darkthuggg it's called "Sip" on the mac. FInd it at sipapp.io/
Colorzilla for windows
@@sakshammanocha640 thanks so much got it added to my tool belt :)
Frank Deloupe is also a great, minimal app as well.
Excellent solution oriented video on html, css, JS. !!! The way you explained is awesome. Many thanks.
omg what was that app that tells you the color of something I NEED IT
sip color picker
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!
Which is the name of the color picking tool?
u can use Colorzilla extension on chrome
@@trungpvq8181 Thanks!
Thanks for the tutorial! this makes me clearly know how html, css, javascript work with each others in a very fun way!
What is the name of the color picking software?
Ryan Jin you mean the software to code this, If so it is called HTML 5
@@jupiter4264 No I meant the color picking tool
@@ryanjin6638 dont know ... I use ColorZilla
@@andresbf830 Thx man!
@@ryanjin6638 happy to help! :)
Thank you for the wonderful tutorial! It's so great to have the opportunity to see the entire development process from beginning to finish!
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)?
He know and he mention that on video
or just add it to the body element
Check out my chanel
What a fantastic video! Please continue to keep doing these short and crisp videos!
Hi I'm a newbie how did all you guys get the rock paper scissor images?
@Lucas thanks fam
@Martin Bekus thanks fam
thank you for this video, this doesnt even have any advertisement.
What is that color picking tool he used lmao it was magic
you can use pixie
thank you sir you make it really easy
and the thing you said "the difference between good and great is little extra" blow my mind
You are amazing sir
love from Nepal
Full screen please
Check out my chanel
i knew to use cases but wasnt familiar enough with them, didnt know you could use multiple cases before breaking out, good stuff, a lot less code than my attempt before i watched, Good Tutorial!
16:58 that's what she said
Great tutorial, thank you.
I've added a reset button in the footer.
34:56
for me it says in console "Uncaught TypeError: document.GetElementById is not a function at app.js:3"
It should be document.getElementById
js is sensitive document.GetElementById *WRONG*:
_*RIGHT*_: document.getElementById()
@@rosenclosed that what i was saying for two months xD
@@rosenclosed and we have a saying that means if your hungry eat.... thats a nice saying right xD?
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
Code link coming in a few days.? reply when its available
available
@@thecommentary direct link to the actual page?
@@JNET_Reloaded Did you find it?
@@madeyeatreides4055 no, neeed a direct link to it im not signing up.
codepen.io/255994/pen/qQaByN
Yooo you are a really good teacher whatsDEV really explaining every step very good
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.
Thanks, dude! Appreciate that!
Thank you very much bro
You forgot the cursor property dude XD
I sat and watched the entire video and this was very informative!
how can i get these images?
i don't know i search too
Search for hand emojis on google images
Thank you! You are a very super teacher
please register the video in 1080p. Not very sharpen
*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
Hahaha, that was exactly what I thought xP
I just enjoyed this course, it is super fun and easy to follow tutorial, thanks 😊 what's dev sir.
1:11:27 -> it do what he says! OMG
Check on me
@@nomatter56 Don't be such a beggar! Ew
You are a great teacher. I didn't get bored. Thanks for tut.
Why does this look like Python?
How fucking dumb do you have to be to think JS looks like Python.
oh man u just nailed it. 🔥 The way you telling these all things in the simplest way. Love it
I liked the way u dealt with probabilities using switch (y)
Something all first Year Comp Sci students should be able to do. Still I like how you go back and check your code to make it more elegant, Writing code is like poetry it should look nice to the reader and sound nice (function properly).
This is really good. i watched the entire video and did the coding. really good intro to the whole web development thing. thanks guys.
Why is this so satisfying to watch?
Yo... I made a rock paper scissors game, I got an idea to make from this video, but it is so lit!! thank you.
Great explanation of "Caching the dom"
That was fun and a great exercise for practicing. I also appreciated that you showed some ES6. Thanks!
Nice video for guys who have done some tutorials before watching this . But a bit confusing during lots of function stuff need to focus for understanding. So time to play rock paper scissors 😁😀