ZuoTi.Pro
Question
Given below are Html files then css file i need the javascript according to that see the last photos for the detailed description of what you have to do...i need solution for this! Javascript
EXPLORER (> as6.html X > OPEN EDITORS VASSA > asba.html #main.css JS mains (> asa.html> Sidoctype html 2 <!-- Assignment 6a :
main.css - As6a - Visual Studio action View Go Run Terminal Help # main.css X RS 1 # main.css > & body body { 2 text-align: c
padding-right: 25px; color: #CCCCCC; -webkit-transition-duration: 200ms; 37 38 39 40 41 42 43 } .button { float: right; I } 4
60% WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic Tac Toe game. Do the followi
+ 60% [6, 7, 8], [0, 3, 6), [1, 4, 71, [2, 5, 8], [0, 4, 8], [2, 4, 6] 1; /* The argument to checkwin is the class of the pla
td elements 12. When there is a winner, set the background colour of the three winning squares to highlight them and open an

as6a.html:-
<!doctype html>
<!-- Assignment 6a : Working with DOM elements -->
<html>
<head>
<title>Tic Tac Toe</title>
<meta name="viewport" content="width=600"/>
<link rel="stylesheet" href="main.css"/>
<script defer src="main.js"></script>
</head>
<body>
<h1>Tic Tac Toe</h1>
<div id="players">
<div id="X" class="">Player X</div>
<div id="O" class="">Player O</div>
<input type="button" class="button" value="New Game"/>
</div>
<table>
<tbody>
<tr>
<td id="c0"></td>
<td id="c1"></td>
<td id="c2"></td>
</tr>
<tr>
<td id="c3"></td>
<td id="c4"></td>
<td id="c5"></td>
</tr>
<tr>
<td id="c6"></td>
<td id="c7"></td>
<td id="c8"></td>
</tr>
</tbody>
</table>
</body>
</html>

main.css :-
body {
text-align: center;
font-size: 16px;
font-family: 'Comic Sans MS', Helvetica, sans-serif;
}
table {
margin-left:auto;
margin-right:auto;
width: 551px;
-webkit-user-select: none;
border-collapse: collapse;
}
td {
height: 175px;
width: 175px;
text-align: center;
font-size: 120px;
}
td:nth-of-type(2) {
border-left: 2px solid #cccccc;
border-right: 2px solid #cccccc;
content: "20S";
}
tr:nth-of-type(2) td {
border-top: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;
}
#players {
margin-left:auto;
margin-right:auto;
padding: 20px 10px 10px 10px;
width: 511px;
text-align: left;
}
#players > div {
display: inline-block;
padding-right: 25px;
color: #cccccc;
-webkit-transition-duration: 200ms;
}
.button {
float: right;
}
.current-player {
color: black !important;
-webkit-transform: scale(1.5);
}
.X-marker {
color: rgb(40, 143, 66);
}
.X-marker:before {
content: "X";
}
.O-marker {
color: rgb(31, 0, 204);
}
.O-marker:before {
content: "O";
}

.X-marker.O-marker {
color: rgb(241, 79, 4);
}
.X-marker.O-marker:before {
content: "?";
}


all you have to make is script.js
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Please find the javascript code below.

//variable to set game status
var gameStatus = true;

// array of all squares or tds
var squares = document.getElementsByTagName('td');

// Array of winning combinations
const wins = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6]
];

// function to check if there's a winner
function checkWin(player) {
        console.log("checkwin " + player);
        let grid = Array.from(squares, function(squares) {
                return squares.classList.contains(player);
        });

        for (let win of wins) {
                if (grid[win[0]] && grid[win[1]] && grid[win[2]]) {
                        gameStatus = false;
                        for (let sq of win) {
                                squares[sq].style.backgroundColor = "lightgreen";
                        }

                        return true;
                }
        }
        
        console.log("checkwin false " + player);
        return false;
}

// function to check for tie
function checkTie() {
if(gameStatus){
        console.log("checktie()");
        var tie = true;
        for (let sq of squares) {
                if (sq.classList.length === 0) {
                        tie = false;
                }
        }
        
        if (tie == true) {
                console.log("It's a tie...");
                return true;
        }
}
        return false;
}

var playerX = document.getElementById("X");
var playerO = document.getElementById("O");

document.getElementById("X").classList.add('current-player');

function placeHere(e) {
        console.log("placeher " + e.target.id);

        if (e.target.classList.length === 0 && gameStatus === true) {
                
                var currentPlayer = document.getElementsByClassName("current-player")[0].id;
                console.log(currentPlayer);
                document.getElementById("X").classList.toggle('current-player');
                document.getElementById("O").classList.toggle('current-player');
                e.target.classList.add(currentPlayer + '-marker');
                checkWin(currentPlayer + '-marker');
                checkTie();
        }
        console.log("placeher exit " + e.target.id);
}

for (var i = 0; i < squares.length; i++) {
        squares[i].addEventListener("click", placeHere);
}

function newGame(e) {
        gameStatus = true;
        for (var i = 0; i < squares.length; i++) {
                squares[i].classList = "";
                squares[i].style.backgroundColor = "";
        }
}

newGameBtn = document.getElementsByClassName("button")[0];
newGameBtn.addEventListener("click", newGame);
0 0
Add a comment
Know the answer?
Add Answer to:
Given below are Html files then css file i need the javascript according to that see...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • given below are the project description and their Html and css files i need javascript according to the project and other files!

    HTML------------------------------------------------------CSS---------------------------------------------------WEB230 - JavaScript 1 Assignment 7 - FormsSome of these tasks would be better done in HTML or CSS but do them in JavaScript to practice whatwe have learned.1. Select the form element and save it in a variable. From here we can access all of the form fields.2. When the page loads do the following:add the password value "monkey"select the favourite city "New York"clear the textarea3. Add an event handler to the "name" field to change the background color...

  • given below are the project description and their Html and css files i need javascript according...

    given below are the project description and their Html and css files i need javascript according to the project and other files! WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...

  • I'm having trouble to link the .js file to the html so changes for the html...

    I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style>     .hidden {display: none;}     .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...

  • USE THE GIVEN STARTER HTML & JS FILES (DON'T NEED CSS FILE): Using a state machine...

    USE THE GIVEN STARTER HTML & JS FILES (DON'T NEED CSS FILE): Using a state machine design pattern and keypress() create a website that can capture user keyboard input. Each time the user types in something and hits <enter> a new TODO list item will be added to the panel. Using click() add a reset button that clears the list. $(document).ready(function() { $("li").css("id", "uw"); const states = ["idle", "gather", "process"]; var state = states[0]; var words = new Array (...

  • I need help with my javascript project, I've started on it but I can't seem to...

    I need help with my javascript project, I've started on it but I can't seem to get ym java scripts to work with my index.html. Can someone please help me fix my code? I need the main.js & scratchpad.js to work with my index.html .Thank you Directions: Go to the following link: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics On that page, scroll down to "A 'hello world' example". Follow the step-by-step instructions to download their code and edit it in your text editor of choice....

  • I need some help in jquery or javascript. I managed to do the hover effects using...

    I need some help in jquery or javascript. I managed to do the hover effects using css and js but i can't seem to "hold" the hover effects on the default page or even after i clicked on a particular page and landed there. Am i missing something in my css or js or both? You can download the working files here together with the instructions + screenshots so that you can better understand what i am trying to describe:...

  • I have to make a pixel art maker using javascript. HTML and CSS were already provided....

    I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • I need to Design an image gallery inside an HTML file with Js, I already have...

    I need to Design an image gallery inside an HTML file with Js, I already have the HTML file built just need to add an image gallery for 4 pics. that has arrows and links for the pics. So basically an image carousel the js needs to be inside the HTML not in a separate folder

  • I am trying to make it so that radio buttons when clicked execute a javascript file....

    I am trying to make it so that radio buttons when clicked execute a javascript file. I have to to have the exercises in external files. Here is what I have so far. I am reusing a script that was used to make radio buttons switch CSS files so I think I have to change the set attribute options. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> 4.2 Output: The first 20 Fibonacci numbers, which are...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT