Javascript Tic Tac Toe Game

How To Make A TIC TAC TOE Game In Javascript  

javascript tic-tac-toe game


In This Javascript Tutorial we will See How To Build A Tic-Tac-Toe Game With Replay And Get The Winner And Change Winning Boxes Color Using JS And Netbeans Editor + HTML5 + CSS3 .

Part 1

                                                                          Part 2



Project Source Code:

    
<!DOCTYPE html>
<html>
    <head>
        <title>Javascript TIC TAC TOE</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            *{box-sizing: border-box}
            
            .container{width: 300px;
                       overflow: hidden;
                       margin: 50px auto 0 auto;
                     }
            
            .container span{width: 100%;
                            display: block;
                            text-align: center;
                            font-family: sans-serif;
                            color: #fff;
                            font-size: 25px;
                            background: #446CB3;
                           }
            
            .container .box{float: left;
                            width: 100px;
                            height: 100px;
                            border: 1px solid #000;
                            transition: all .25s ease-in-out;
                            font-family: sans-serif; 
                            font-size: 85px;
                            text-align: center;
                            line-height: 100px; 
                            cursor: pointer;
                          }
            
            .container .box:hover{background: rgba(10,10,10,0.5);
                                  color: #fff
                                 }
            
            button{background: #26C281;
                   color: #fff;
                   font-weight: bold;
                   border: 1px solid yellow;
                    cursor: pointer; 
                    width: 200px;
                    height: 40px; 
                    font-size: 22px;
                    display: block;
                    margin: 10px auto}
            
            .win{background: #F9690E; color: #fff}
            
        </style>
        
    </head>
    <body>
       
        <div class="container" id="main">
            <span id="turn">Play</span>
            <!-- show X or O on div click -->
            <div class="box" id="box1"></div>
            <div class="box" id="box2"></div>
            <div class="box" id="box3"></div>
            <div class="box" id="box4"></div>
            <div class="box" id="box5"></div>
            <div class="box" id="box6"></div>
            <div class="box" id="box7"></div>
            <div class="box" id="box8"></div>
            <div class="box" id="box9"></div>
        </div>
        <!-- Play Again And Reset All Info -->
        <button onclick="replay()">Play Again</button>
        
        <script>
            
            var turn = document.getElementById("turn"),
             // boxes => all boxes
            // X_or_O => to set X or O into the box
                boxes = document.querySelectorAll("#main div"), X_or_O = 0;
            
            function selectWinnerBoxes(b1,b2,b3){
                b1.classList.add("win");
                b2.classList.add("win");
                b3.classList.add("win");
                turn.innerHTML = b1.innerHTML + " Won Congrat";
                turn.style.fontSize = "40px";
            }
            
            function getWinner(){
                
                var box1 = document.getElementById("box1"),
                    box2 = document.getElementById("box2"),
                    box3 = document.getElementById("box3"),
                    box4 = document.getElementById("box4"),
                    box5 = document.getElementById("box5"),
                    box6 = document.getElementById("box6"),
                    box7 = document.getElementById("box7"),
                    box8 = document.getElementById("box8"),
                    box9 = document.getElementById("box9");
            
            // get all posibilites
              if(box1.innerHTML !== "" && box1.innerHTML === box2.innerHTML && box1.innerHTML === box3.innerHTML)
                 selectWinnerBoxes(box1,box2,box3);
         
              if(box4.innerHTML !== "" && box4.innerHTML === box5.innerHTML && box4.innerHTML === box6.innerHTML)
                 selectWinnerBoxes(box4,box5,box6);
             
              if(box7.innerHTML !== "" && box7.innerHTML === box8.innerHTML && box7.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box7,box8,box9);
             
              if(box1.innerHTML !== "" && box1.innerHTML === box4.innerHTML && box1.innerHTML === box7.innerHTML)
                 selectWinnerBoxes(box1,box4,box7);
             
              if(box2.innerHTML !== "" && box2.innerHTML === box5.innerHTML && box2.innerHTML === box8.innerHTML)
                 selectWinnerBoxes(box2,box5,box8);
             
              if(box3.innerHTML !== "" && box3.innerHTML === box6.innerHTML && box3.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box3,box6,box9);
             
              if(box1.innerHTML !== "" && box1.innerHTML === box5.innerHTML && box1.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box1,box5,box9);
             
              if(box3.innerHTML !== "" && box3.innerHTML === box5.innerHTML && box3.innerHTML === box7.innerHTML)
                 selectWinnerBoxes(box3,box5,box7);
             
            }
            
            
            // set event onclick
            for(var i = 0; i < boxes.length; i++){
                boxes[i].onclick = function(){
                    // not allow to change the value of the box
                    if(this.innerHTML !== "X" && this.innerHTML !== "O"){
                    if(X_or_O%2 === 0){
                       console.log(X_or_O);
                       this.innerHTML = "X"; 
                       turn.innerHTML = "O Turn Now";
                       getWinner();
                       X_or_O += 1;
                       
                    }else{
                        console.log(X_or_O);
                       this.innerHTML = "O";
                       turn.innerHTML = "X Turn Now";
                       getWinner();
                       X_or_O += 1;  
                    }
                }
                    
                };
            }
            
            function replay(){
                
                for(var i = 0; i < boxes.length; i++){
                    boxes[i].classList.remove("win");
                    boxes[i].innerHTML = "";
                    turn.innerHTML = "Play";
                    turn.style.fontSize = "25px";
                    
                }
                
            }
            
        </script>
        
    </body>
</html>



OUTPUT:


javascript tic tac toe game start
Start


tic-tac-toe div hover
Mouse Hover

js tic-tac-toe O turn
O turn


js tic tac toe X turn
X Turn

js tic tac toe O win
O Win



js tic tac toe X win
X Win



javascript tic-tac-toe win
Super Goku Win

VB.Net Course

Learning Visual Basic .NET - A Guide To VB.NET Programming Course
  

                     
           Instructor : Infinite Skills
           Lectures   : 85
           Hours        : 7
           Students   > 2,100
           Rating        = 4.5 / 5

Course Description (from udemy)

Are you ready to learn how to program?
This course assumes no previous experience in vb.net and takes you from the absolute beginner concepts like how to build classes that define properties, methods, and events in VB.NET, as well as understand and use overloaded methods and operators and perform calculations.
+ Other Topics:
                       - debugging programs.
                       - working with data types.
                       - branching and looping statements. 
                       - use subroutines.
                       - functions.
                       - object-oriented techniques. 
                       - using LINQ to select, modify, and sort.
                       - read and write data in files. 
                       - printing and print previews.

What is the target audience?

  • This course is aimed at beginners. No previous programming experience is assumed

Java Contact Information Management System Source Code

How To Create A Contacts Manager System In Java NetBeans 

Contact Management System Project In Java


In This Java Project Serie we will See How To Make A Simple Contact Information Management System To Manage friends, colleague, familly, informations ( address, phone numbers, email address ) Using Java With Netbeans Editor And MySQL Database To Store The Users and Contacts Information .



How It Work:

 1 - SignUp Form

     in this form a new user can register to the system and we will use a isUsernameExist function to check if the user name is already exists in the database, and browseImage function from Myfunc class to browse and show image into a jlabel ( in this form jlabel name is jLabelPic ), + a verifData function to check if 
  - the first name + last name + username + password are not empty
  - the password is equal to the retype password field
  - the user selected or not an image
and when you click on jLabelCreateAccount this form will close and login form will open .
 
signup form

 2 - Login Form

     in this form the user can logIn to the system by entering the username and password
if you enter the wrong username or password an error message will popup else the main form 
the user can show and hide the password characters by checking the checkbox ( 
jCheckBoxShowPass
 ) 
and when you click on jLabelCreateAccount this form will close and SignUp form will open
.
 
login form

3 - Main Form

     when the user login 
successfully this form will show up with the logged user profile pic and username displayed in the form top left .

main form 1

as you can see when the user login a contact list will showup in the jtable at the bottom of the form, when you select a row from the jtable the data will be displayed into the fields .

main form 2

you can add edit delete contacts , navigate between contacts, see contacts .

Functions Used In This Form

populateJtable : to display the logged user contacts in jtabel .
browseImage : to browse image from the computer to the jlabel .
insertContact : function from contactQuery class to insert a new contact into the database .
refreshJtable : to clear and populate a jtable again after insert update delete to show the new data .
clearFields : to clear all fields, set the combobox selected index to 0, set jtabel icon to null,  set imgPath to null .
updateContact : function from contactQuery class to edit the selected contact information .
deleteContact : function from contactQuery class to remove the selected contact information from the database .
showData : to navigate between contacts ( show first, next, pervious, last ) .

main form 3


I hope you liked this project you can wath the full serie from HERE
Note: the source code file do not contain the database script

the source code is free ( you can pay what you want minimum $0.00 ) and if you can share it will be helpful.



VB.Net Populate DataGridView From MySQL

How To Fill A DataGridView From MySQL DataBase In VBnet

Fill Datagridview From MySQL Using Vbnet

In This VB.Net Tutorial  We Will See How To Load Data Into A Datagridview From MySQL DataBase Using Visual Basic.Net Programming Language Visual Studio Editor.


Project Source Code:

Imports MySql.Data.MySqlClient


Public Class Populate_Datagridview_From_MySQL

    Private Sub Populate_Datagridview_From_MySQL_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        Dim connection As New MySqlConnection("datasource=localhost;port=3306;username=root;password=")
        Dim table As New DataTable()
        Dim adapter As New MySqlDataAdapter("SELECT * FROM s_t_d.student", connection)

        adapter.Fill(table)

        DataGridView1.DataSource = table

        
    End Sub
End Class
      
///////////////OUTPUT:





show mysql records in datagridview using vbnet

VB.Net Connect To MySQL

How To Connect Vbnet To MySQL DataBase 

connect vb.net to mysql

In This VB.Net Tutorial  We Will See How To Create A Connection Between MySQL DataBase And Visual Basic.Net Programming Language And How To Deconnect In Visual Studio Editor.


Project Source Code:

Imports MySql.Data.MySqlClient

Public Class Connect_To_MySQL

    Dim connection As New MySqlConnection("datasource=localhost;port=3306;username=root;password=")

    ' button connect
    Private Sub ButtonConnect_Click(sender As Object, e As EventArgs) Handles ButtonConnect.Click

        Try

            connection.Open()
            Label1.Text = "connected"

        Catch ex As Exception

            MessageBox.Show(ex.ToString())

        End Try
        

    End Sub

    ' button deconnect
    Private Sub ButtonDeconnect_Click(sender As Object, e As EventArgs) Handles ButtonDeconnect.Click

        Try

            connection.Close()
            Label1.Text = "not connected"

        Catch ex As Exception

            MessageBox.Show(ex.ToString())

        End Try
        

    End Sub
End Class
      
///////////////OUTPUT:





Connect VBNet To MySQL DataBase

Close MySQL Database Connection With VB.Net

Javascript Reverse UL List Items

How To Reverse All LI From A UL List Using Javascript  

reverse list items in js


In This Javascript Tutorial we will See How To Reverse All <LI> Elements From A <UL> List Using Array And For Loop In JS And Netbeans Editor .


Project Source Code:

    
<!DOCTYPE html>
<html>
    <head>
        <title>Javascript: reverse All LI</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <ul id="list">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        
        <script>
            
            var items = document.querySelectorAll("#list li"),
                 tab = [];
         // populate array with li values
         for(var i = 0; i < items.length; i++){
             tab.push(items[i].innerHTML);
         }
         
         // clear UL
         document.getElementById("list").innerHTML = "";
         var list = document.getElementById("list");
         
         tab.reverse();
         for(var i = 0; i < tab.length; i++){
             
             var textNode = document.createTextNode(tab[i]),
                 liNode = document.createElement("LI");    
             liNode.appendChild(textNode);
             list.appendChild(liNode);
         }
            
        </script>
        
    </body>
</html>


OUTPUT:



reverse li items in js