Welcome to my channel! I am passionate about creating exciting and engaging projects using the latest technologies and techniques.
On this channel, you will find a range of tutorials, tips, and tricks that will help you to learn and improve your front-end web development skills. From building responsive and user-friendly websites to integrating interactive elements and animations, my videos cover a wide range of topics to help you take your skills to the next level.
Whether you are a beginner looking to get started with front-end web development or an experienced developer looking for new ideas and inspiration, my channel is the perfect place for you. Subscribe now and join our community of front-end web development enthusiasts!
thank you very much for the tutorial, it was really helpfull, but the sound quality wasn't that good like the noise on the background when you speak was a bit annoying, I advice to enhance the sound quality so the user can watch more and understand without getting distracted 🙏♥
Thanks for the pointer, I think you would love to know that I have since upgraded my sound on my latest videos. Have a watch and let me know your thoughts on the sound.
In response to the assignment to stop being able to play after X or O has won, I declared a global variable (let aPlayerHasWon = false) and will do that also in the restart routine. In case of a winner, I set the value of aPlayerHasWon to true. In the beginning of the function boxClicked() I now put if(aPlayHasWon) return. This prevents the game to continue. When the restart button is pressed the game is "released" due to the value of aPlayerHasWon. I really enjoyed this tutorial, which is very helpful! A small issue: in the video you do not use the .innerHTML to set the playerText, however you do in the code provided (thanks!). I was a little hard to find at first ;-) (nice exercise though). You gained a fan.
Hi, did you follow the video tutorial in order to complete the project? Check-out the follow-up video where I explain how to add more features to the application. Hope that helps
Great video. I was looking for such a video for a few day now. The videos I found was very complicated and the were not beginner friendly. This video is very nice especially the javascript part, the logic is very straight forward and well explained. thanks for the great video I have learned a lot from it. Keep up the good work 💯
Helpful vid. My project isnt exactly tic tac toe but i think (yikes) some logic of this game is gonna help me in the process. i hope to get my game working. pray for me! haha
Hi, can you do a version where it's player vs computer? A very stupid computer that just randomly places its symbol on available cells without analyzing the player's choices. 🙏
That sound like a great idea but it will need to know the blocks already selected so that the pc choose available blocks. Will definitely add this to my todo list. Thanks 😉
I am studying IT and had to leave my home country (South Africa 😢) I need help with an assignment while being homesick. The i came across your video and with 5 seconds into the video i knew were you were from. Not only did your video make my day but will definitely help my studies 😊
A silly question from a beginner whats the difference between writing the script in head and body as i wrote the script in head it didnt work and why is it that stylesheet works in the head but not the js file .... can someone explain plzzz???
So code gets read from top to bottom right. No imagine in your script you are looking for a div-tag that has not rendered yet, that script will be null or undefined which will cause your code not work correctly. Stylesheet on the other hand are not manipulators meaning they don't change the the DOM but rather adds to it. if that makes sense.
wanted to say great video but I am getting stuck on the part where you put const id = e.traget. id the issue I get is my event listener it is saying uncaught type error cannot read properties of the undefined id
This code defines an arrow function called start that adds a click event listener to each element in a collection of boxes. The forEach() method iterates over each element in the boxes collection and attaches a click event listener to each element. The event listener is a function called boxClicked, which is not defined in the code you provided. When a box is clicked, the boxClicked function will be called. The purpose of this function depends on its implementation, which is not shown in the code you provided.
I don't understand this point. let start = () => {boxes.forEach(box => {box.addEventListener('click',boxClicked) });} 14:16 where does the box come from and what is it?
On line 3 you will that I declare a variable that contains an array of boxes. This are the boxes from the html. That is why when I loop over the array, I name the single entry "box"
Make sure your style.css file is in the same directory as your index.html file. This could be the reason why your css file is not picking up. Hope this helps.
I am using Nextjs which has router build-in. I am assuming as to why I am not using UseRouter() hook to refresh the page right? If so, I do not want the entire page to reload but only the data to sync with the update done on Clerk side.
This can be caused by a number of things, my suggestion would be first check the variables where you set the X and O if they set correct. From there just follow both videos to make sure you not skipping a step. Happy coding 👍
Currently the blocks highlight function uses the css to highlight the winning combo. The issue or challenge with using lines is that the winning combo wont always be in a straight line. You will need to check the position of the second block from the first one in order to draw the line vertical, horizontal or diagonal. Drop me a link once you get this right 😉
You can download the file from my github account and compare the code. Most of the time is just a simple naming conversion that is not the same which could break the entire code base. Hope this helps
Hey Quick Idea @coding with siphiwo :- can you make a playlist or and entire course where you go through all the most used JS methods and how and when to use them in day to day life for example how to chain methods like Filter().map().reduce().sort() etc etc probably a stoooopid idead to chain all these but ive seen people chain Filter().map() what do these do and how to understand them
Hey Prebhu, that is not a bad idea. I will create a playlist that explain each of those methods and when or how to use them. Will discuss the chain effect of these methods. Thanks
Hi Rushika, unfortunately it is a bit difficult to assist you with your issue as it is unclear to me. You can make sure that you follow both the creation and solution to the Tic Tac Toe game videos. Hope you come right and good luck on your coding journey
Hey Ayu, you can add more functionality to this if you want to, creating something like a username field will be great. You can then display the name of the user on top of the buttons section. Send me a link to your github once you have done this to review. Happy coding!
hello! I really liked your tutorial, and I followed it step by step, but now I have a problem: when I click on the boxes, nothing happens. What am I missing or what am I doing wrong?
Hey Mblede, glad you like the tutorial. If you are experiencing issues, make sure you follow the initial video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oZrp3Atkz18.html This one provides the solution to the question at the end of part 1
Hey so I loved the video for me this is my very first project that im working on and it was really easy to follow through and understand what is going on however I am confused when you use document in your js files because it says document is undefined. Is there something that I may be missing?
Thanks man, I have sinced this video started doing that as I noticed that you can barely see it on mobile. Check out the other projects I have created and let me know your thoughts.
I encourage everyone to try and implement this functionality in this game on their own. This is part of developing your coding skills. If you just want the solution / draw functionality, here is the video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-y2Y25r94QLs.html
Hi there, for some reason the end part where u are putting calculate winner I copied and pasted it twice change the name for paper and scissors and [1][2] but the score still shows at 0 in the Ui
At point 29:26 I had to copy the case statement in order to include the other 2 options. This was only set to rock for testing. Could this be your issue?
@@siphiwocode hi yes this could be the case, but when I did try that I didn’t work , what should I do ? I’ve also tried to add on discord but the link is expired or I don’t have permission
hi yes this could be the case, but when I did try that I didn’t work , what should I do ? I’ve also tried to add on discord but the link is expired or I don’t have permission
Hi there I’ve completed it but the player won trigger is not coming up after they have won and also when the players have draws it doesn’t come up either but the colour for when they win and draw works. It’s the innerHTML part that doesn’t work for some reason. So it works without the innerHTML but with it the player won and the draw part doesn’t change. Do you have linked in etc I would need some help to prepare for a technical test I got in two weeks
Hey Ellz. I got a discord channel that you we can chat on. From what you said, u can't help without looking at your code. Try to make sure that you do not have a semicolon or any character out of place. Small things like this can cause bugs in your code
Hi there I’ve completed it but the player won trigger is not coming up after they have won and also when the players have draws it doesn’t come up either but the colour for when they win and draw works. It’s the innerHTML part that doesn’t work for some reason. So it works without the innerHTML but with it the player won and the draw part doesn’t change
Glad you tried to do the challenge and complete the game. For your issue, I suggest watching the solution here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-y2Y25r94QLs.html
