Build Tic Tac Toe With JavaScript - Tutorial
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Learning web development can be tough and boring, but it doesn't have to be. In this video we take a look at creating an advanced JavaScript tic tac toe game. This is a great project for anyone that wants to create a fun project while learning advanced JavaScript and CSS concepts.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/J...
CodePen Code: codepen.io/WebDevSimplified/p...
JavaScript Defer Attribute Tutorial: • What Is The Fastest Wa...
Why I Do Not Use Class Selectors In JS Article: blog.webdevsimplified.com/201...
CSS Variables Tutorial: • CSS Variables Tutorial
Array Destructoring Tutorial: • Why Is Array/Object De...
🧠 Concepts Covered:
- Advanced CSS Hover Effects
- Advanced JS Game Logic
- CSS Not Selector
- CSS Shape Building
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#TicTacToe #WDS #JavaScript
Right when I thought I was getting the hang of CSS!
Same here lol
same
@@depression_isnt_real how?
I swear
Who is a css?
we need more people like this man! He is shaping a new vision to help beginners do what they want!
Best way to remove the side borders is by not putting borders at all but just use gird-grap to create the lines. No need to separating selecting the elements and removing them.
.board {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(3, auto);
background-color: black;
}
.cell {
background-color: white;
width: var(--cell-size);
height: var(--cell-size);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
Such a tricky project made so simple. Thank you so much Kyle.
I left it out in my college exam
In c++
I made same project using ReactJS - th-cam.com/video/pw2krTJLF6Y/w-d-xo.html
I never thought Id find the day Id finish a youtube tutorial. Been trying to learn programing for years, and recently came across a really good web development course, got the fundamentals and finally really learn't web development and wanted to create a tic tac toe game just curious of the logic. I managed to do my own, but I had started this one before I started my own, and had to come back to see how this one was created because I was fasinated by the design and how good the tutorial is. Mine came nowehere close to how good this is. Thank you so much man !!!
may I ask, what web development course you took? I know how to do the javascript but the css was honestly the most difficult.
@@kebab4640 Hi Mate, CSS I found the hardest. Funnily enough, I mastered js and react but right this moment Im once again going through my old courses on css. I had purchased a course on udemy advanced css by Jonas. Its extremely good for responsiveness, and flex box any many things. But these have been at me for years, Im pretty sure net ninja has it all covered as well. Just keep practising, and don't rush things, and very imp experiment.
@@chasec4897I’m finding it hard mastering JavaScript
Thank you! You've made this so easy to understand. This really is web dev simplified!
Kyle knows his onions! His designs are so thorough, and his use of ES6 functionality and CSS is masterful in its elegance. Great tutorial, with a lot of material illustrated clearly and accurately in application towards delivering a nice little application :) .
This is my first year coding and I have to say that this is by far the most impressive thing I have seen
Great tutorial! Your style gives me a good mix of learning new things (especially in the CSS of this video) and allowing me to try to implement the current part first before I watch you do it
Thank you,man! This clip was amazing!
me:iam wondering why iam thinking of learning css again,
kyle:This is why
Clear and detailed explanations, and extremely well-organized. Great video.
This is such a timely topic for me as my wife wants me to help her create a math game proof of concept and this will be a great foundation. Thank you very much for the detailed explanation.
This was a great film. Works great with great explanation! Keep the videos coming!
So super effective and straight to the point! Awesome!
I like how you get what I'm thinking about and put it in code, with so much ease.
Nice video Kyle, you always put out great material!
every single time I watch your videos I need to stand back and question everything I know,
because of how incredibly clean and easy the code you teach is to learn
thank you so so much!
You are really good man. I love how CSS can be used in place of JavaScript.
Thank you for great tutorials! You are really good at this :)
wow, great project. I'm very impressed with the use of advanced CSS and what it can do for a website. It helped me a lot to code my tic-tac-toe game. great tutorial, indeed very high quality coding skills ....
Hey Kyle thank you for the good video🤙🏼 I would like to ask you could you make video about your background how did you learn programming(front-end) which books did you read and courses did you used?! Thanks advance I do appreciate you job👍🏻
Such a joy to watch you code and explain these projects and topics! Thank you!
Thanks Kyle! I’m curious to know how you decided on which ‘const’ names have uppercase vs camel case. Much appreciated! Love your channel man.
that checkWin function is amazing with the logic ,
I would not thought about doing this function by my self
thnx a lot .
that project has tought me a lot
I really enjoyed the use of different CSS selectors, thanks for that. I came for the JavaScript, but I stayed for the styles. Lol
Note: If your having a problem in 25:06 in CSS part, unable to hide the winning-message
Solution: Try removing the ' display: flex; ' in side the winning-message and add it inside the ' winning-message .show '
thanks
in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs.
why not without it ?
Thank you! You have provided a lot ! I have learned a lot from this tutorial.
After Watching This Video I've Realized Why Say I've Two Yrs Of Experience...
You're A Great Man Kyle! Hats off 👏👏
I'm not skilled enough to create these projects on my own...
BUT this is what I have learnt by following along & making your Clock, Quiz & Tic Tac Toe Projects
- Debugging skills are getting faster & way more effective
- Recognizing patterns & having a somewhat better understanding of wtf is going on
- Implementing your logic & workflow
Thanks so much & I hope to become a great Programmer / Web Developer & one day give back to the community in anyway I can.
Same here. Ive done the clock, quiz, calculator, and now im trying to understand this. Im a self learner and no background just youtube and google.
@@arvsnacs422 Keep pushing!!! Don't give up
@@tremolony4924 sometimes i get discourage because when i do the project again i cant run it right. And sometimes wonder how did they come up with that approach and did they did it a day or what. I dont expect but I will try to learn and get there someday.
@@arvsnacs422 Yes I agree. It can be discouraging when the project doesn't work...
Most people give up when it gets too difficult...
Keep learning & keep doing small projects. It takes time but eventually you will improve :)
Hello Kyle,
While declaring border-top: none in your CSS for the cells, you could just write nth-child(-n+3) instead of writing three lines. The same goes for border-bottom: none as well
so so good - I learned loads from this
The real question is how do you make an NxN Tic Tac Toe game with dynamic win conditions?
Love your videos. Extremely clear and thorough. You're my go to reference when I get stuck at work and the answer isn't on Stack Overflow.
Thank you so much. Awesome as always 😀👍👌
I love your videos because you explain very well thank you kyle :)
Can't say thanks enough for the helpful thorough informative lesson
Super CSS Combinators Exercise: Could fill a whole course on CSS Combinators! Thank's a lot Kyle for this carefully crafted presentation!!
I had a project in collage that I didn't mange to finish. It was a game called Nim. I was supposed to make the game so that you can play it against the PC (The class was virtual intelligence) ,but I didn't manage to make it smart enough so made something else. This seems pretty cool so I will try it . Thanks for the idea.
always amazing got my project easily done thank you kyle(:
Hey, you made the JavaScript part much much simpler than the normal one!!!
Thanks Kyle!!! Awesome Tutorial!
thanks for this video, it helped me better understand when it's a good idea to define new functions.
You have earned a subscriber! You an excellent teacher. I am very impressed.
I love your tutorials. You're the best.
On 8:50, for top and bottom border lines, you can do :
.cell:nth-child(1n+1) {
border-top: none;
}
.cell:nth-child(1n+7) {
border-bottom: none;
}
in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs.
why not without it ?
Your videos are so great! thank you!
INSANE. Pure genius!
Fast paced, but awesome. You're great btw.
Great video and a fun project that I want to try!
Thanks Kyle, your videos are awesome! I am new to JavaScript if you have a full class please let me know, i want in!
You are Really Talented and you deserve more than 1M subs Good Luck .BTW Small projects playlist is best for me to learn something new while quarantined.
I Said you deserve more subs cuz lotta channels out there recommend their own sh*t instead the real content but you are unlike 'em ensures quality of content Again Good Luck
Love from India
Thanks bro, I'm waiting for this project, hope you will come with these types of advance projects....... 👍👍👍
I plan to make more advanced projects like this in the future
@@WebDevSimplified thanks a lot ,,, we are waiting........
@@WebDevSimplified goat.
wow!! i watched the video 5 times! great show & tell :-)
Great video as always. Thanks.
So detailed tutorial
Just Amazing!
MAAAN keep it up, great work great developer very nice very helpful... Keep with you amazing work!
Loved this one
Hello Kyle. These days your face has become one of my own family! Every time I see you a new video, I feel genuine happiness!
Thank you so much! That really means a ton.
@@WebDevSimplified Thank you brother❤ I hope someday I can appreciate you in a tangible way. Words are not enough to show gratitude for your immense contribution.
@@WebDevSimplified Hi Kyle! Is it possible to make this game playing remotely with a friend? 2 remotely players? Somebody is interested to develop this functionality with me? Any help is welcome!
That's so sweet😄
You explained it very well. I just want to give simple suggestion. To get initial hover effect, you just need to add x_class to board class.
that assumes that X always starts
Very nicely done!
Though, personally, I'd use inline SVG for drawing the board, as well as the noughts and crosses. But that's just a personal preference: my main reason for this is the fact I abhor using any more CSS than absolutely necessary to get things working. I find SVG perfectly suited for tasks such as these, as it gives me much more versatility, and I find it easier to maintain and tweak later.
exactly my thoughts. SVG is best suited for a non real-time game, and CSS is best kept to a minimum. it is much easier to use JS to handle dynamic changes in CSS, rather than to do acrobatics with HTML and CSS and query gimnastics which are useless for most projects. BUT, this video is VERY good as a learning tool, it takes you to places you may not think of and it does it brilliantly. so, thank you WDS, you really are helpful!
There's too much going on here! haha Thanks, Kyle! Much appreciate it
You are GEM:))
Accessible and helpfull.
Nice teacher and nice work!
wow amazing tutorial.... i love this channel
Awesome tutorial! 5 stars!
thanks sir, learned new cool stuff watching this video
First comment after I become a big fan of Kyle. Really good job for each video. Thx a lot for ur great job !
You are very welcome!
man I did this on my own and it had literally 20xs more code and was not nearly as clean as this LOL its so good to see it being done in a much more simplified way
Same, mine was around 110 lines of code for 2 player and 288 for computer
This was too good .thank you sir
Your use of CSS in this video is that of a master. Kudos to you sir.
Thank you so much. I love how powerful CSS is now. It makes doing things like this so much easier then it used to be.
in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs.
why not without it ?@@WebDevSimplified
Thank you, so amazing
this game has a lot to do with css, kind of complicated, but good to learn all the basic, and it is a good game, a great tutorial, Mr. Kyle is a mater !!!
Very Amazing tutorial. I'm asking me how do you get this ideas the way you are programming. I mean If I see your tutorial I'm understanding what you are doing but by my self I would never write such code without getting inspired with tutorials like that. So I think you have to be some kind of hyper intelligent to develope those applications without watching tutorials. Or is there any trick ?
Awesome man !!!
Best channel on youtube :)
Thank you so much for your help. Before this video, this game was too difficult to program.
Fantastic content and production quality, thank you for this!
Great Video. My question is why the click event listener has to be removed in the startGame() since the listener is set up with once: true?
Just simple styles in the game.But learnt a lot more than expected
How would you go on and make this a five-in-a-row game with say like 15x15 board?
Great explanation. Thank you 🤏
Still valid, exceptional teaching skills, thank you.
Web Dev Simplified : makes a quiz website in 26 minutes .
also Web Dev Simplified :makes tic tac toe in 41 minutes.
by the way love your videos
Excellent video, thank you
So cool, but can you make a video where you add a 1vsAI , and this 2vs2, where you build an AI for the game? This would be amazing!
Hi! How can I implement a list of questions that are drawn, if the player makes a mistake he passes the turn to the other player?
You deserve wayyy more subscribers
I only started coding a few weeks ago, but I don't think that programmers say this lot Kyle's favorite sentence: "which is exactly what we want" 😂. Great videos btw. How much time does it take for you to create a program like this for the first time?
Many thanks, Kyle!
Will you do a tutorial and how you can implement Wordpress CMS on your website. for example, if I have a site and I want to add a forum on it using Wordpress.
Hey there!
I wonder if you can help how to allow x to play twice or more, i mean how i can make him play two cels in a row then swap
thank you kyle.. you are awesome.
I was waiting for you to put placeMark into a function, and I had no idea what I was gonna do if you didn't.
Good Kyle!
32:07 when you were creating the winning conditions, how did the array in the cell come about in the first place?
I want to make a Dots and Bones game. How would you go about structuring it?
We can make divs and show only corner points. Whenever someone selects two corners we add a border there.
What do you think?
In 3:49, is there a reason to avoid including the "data-winning-message-text" inside the parent div element(with the class="winning-message")
Wonderful tutorial Kyle, love your style! I'm just curious how you would handle tests for example? In another of your videos th-cam.com/video/FNk2NYW-13k/w-d-xo.html you say that testing is so important. So what tests would you put on to be able to refactor your code if needed? Thanks for your help. Cheers.
Next Level CSS!
Hats off mannn 🙌
Nice. I would like to see it implemented with ES6 classes.