tic tac toe v.1

Fraju-pc · Jun 9, 2023 · a0b750b · a0b750b
1 parent ae2d0a3
commit a0b750b
Show file tree

Hide file tree

Showing 7 changed files with 283 additions and 0 deletions.
diff --git a/Week-10-JavaScript_and_DOM_Manipulation/class.html b/Week-10-JavaScript_and_DOM_Manipulation/class.html
@@ -0,0 +1,41 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body style="background-color: black; color: white">
+    <input type="text" id="make-input">
+    <button id="make-button">Make Something</button>
+    <ul id="make-list"></ul>
+<button onclick="clearAll()">Delete</button>    
+<script>
+const makeButton = document.getElementById('make-button');
+makeButton.addEventListener('click', makeIt);
+let makeInput= document.getElementById('make-input');
+
+const todolist[];
+
+
+function makeIt(){
+    console.log(makeInput.value);
+    const newBabyLi = document.createElement('li');
+    const makeList = document.getElementById('make-list');
+    newBabyLi.innerHTML = makeInput.value;
+    newBabyLi.addEventListener('click', () =>{
+        newBabyLi.remove();
+    });
+    makeList.appendChild(newBabyLi);
+    makeInput.value = '';
+};
+
+function clearAll() {
+    while(makeList.hasChildNodes()){
+        makeList.removeChild(makeList.lastChild);
+    }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/Week-11-JQuery_and_AJAX/.gitignore b/Week-11-JQuery_and_AJAX/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/Week-11-JQuery_and_AJAX/index.html b/Week-11-JQuery_and_AJAX/index.html
@@ -0,0 +1,69 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tic Tac Toe</title>
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="tictac.css">
+
+</head>
+<body>
+
+    <div class="container text-center">
+        <div class="turn-display"></div><br>
+    <div class="row">
+        <div class="col md-4 cell" data-index="1">
+
+        </div>
+        <div class="col md-4 cell" data-index="2">
+
+        </div>
+        <div class="col md-4 cell" data-index="3">
+
+        </div>
+    </div>
+    <div class="row">
+        <div class="col md-4 cell" data-index="4">
+
+        </div>
+        <div class="col md-4 cell" data-index="5">
+
+        </div>
+        <div class="col md-4 cell" data-index="6">
+
+        </div>
+    </div>
+    <div class="row">
+        <div class="col md-4 cell" data-index="7">
+
+        </div>
+        <div class="col md-4 cell" data-index="8">
+
+        </div>
+        <div class="col md-4 cell" data-index="9">
+
+        </div>
+    </div>
+    <div class="row">
+        <br><br>
+        <div class="restart"><button id="playAgain" class="btn btn-danger" onclick="playAgain()">Play Again</button></div>
+        <br>
+        <br>
+        <div id="game-result"></div>
+    </div>
+    </div>
+    <br><br>
+
+
+
+
+
+
+
+    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
+    <script src="node_modules/jquery/dist/jquery.js"></script>
+    <script src="tictac.js"></script>
+
+</body>
+</html>
diff --git a/Week-11-JQuery_and_AJAX/package-lock.json b/Week-11-JQuery_and_AJAX/package-lock.json
diff --git a/Week-11-JQuery_and_AJAX/package.json b/Week-11-JQuery_and_AJAX/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "bootstrap": "^5.3.0",
+    "jquery": "^3.7.0"
+  }
+}
diff --git a/Week-11-JQuery_and_AJAX/tictac.css b/Week-11-JQuery_and_AJAX/tictac.css
@@ -0,0 +1,29 @@
+body {
+    background-color: black;
+}
+
+.cell {
+    border-radius: 10px;
+    height: 100px;
+    width: 100px;
+    border: 2px solid white;
+    box-shadow: 1px 1px 10px 10px pink;
+    color: White;
+    font-size: 50px;
+    display: flex;
+    justify-content: center;
+    text-shadow: 2px 2px 2px pink;
+}
+
+#game-result{
+    color: White;
+    font-size: 50px;
+    display: flex;
+    justify-content: center;
+}
+.turn-display{
+    color: White;
+    font-size: 50px;
+    display: flex;
+    justify-content: center;
+}
diff --git a/Week-11-JQuery_and_AJAX/tictac.js b/Week-11-JQuery_and_AJAX/tictac.js
@@ -0,0 +1,91 @@
+let currentPlayer= "X";
+let plays = 0;
+let gameFinished = false;
+let currentPlayed= {
+    X: [],
+    O: [],
+};
+
+const winPositions = [
+    [1,2,3],
+    [4,5,6],
+    [7,8,9],
+    [1,4,7],
+    [2,5,8],
+    [3,6,9],
+    [1,5,9],
+    [3,5,7]
+
+];
+
+$(document).ready(function() {
+
+   // $('.turn-display').text("It is Curently " + currentPlayer + "'s Turn");
+$('.cell').on('click', function() {
+
+    if(!gameFinished){
+        $(this).text(currentPlayer);
+        plays++
+        currentPlayed[currentPlayer].push(parseInt($(this).attr('data-index')));
+
+        if(isWinner()){
+            gameFinished = true;
+           showResult('Win') 
+        };
+        if(!gameFinished && isDraw()){
+            showResult('Draw');
+        }
+
+        currentPlayer = (currentPlayer === "X") ? "O" : "X";
+
+        $('.turn-display').text("It is Curently " + currentPlayer + "'s Turn");
+    }
+    });
+
+});
+
+function playAgain(){
+    currentPlayer= "X";
+    plays = 0;
+    gameFinished = false;
+    currentPlayed= {
+        X: [],
+        O: [],
+    };  
+    $(".cell, #game-result").text(' ');
+
+};
+
+function showResult(type){
+    gameFinished = true;
+    if (type === 'Win'){
+        $('#game-result').text('Winner is: ' + currentPlayer);
+    }else{
+        $('#game-result').text('It is a Draw!');
+    }
+
+}
+
+function isDraw(){
+    return plays === 9;
+
+}
+
+function isWinner(){
+    if (plays < 5)
+    return;
+
+    for (let i = 0; i < winPositions.length; i++){
+        let isWinner = true;
+
+        for(let j=0; j < winPositions[i].length; j++){
+            if ($.inArray(winPositions[i][j], currentPlayed[currentPlayer]) < 0){
+                isWinner = false;
+                break;
+            }
+        }
+            if (isWinner)
+            return true;
+
+    }
+}