1

Given below are Html files then css file i need the javascript according to that see...

Question

Given below are Html files then css file i need the javascript according to that see...
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
EXPLORER (> as6.html X > OPEN EDITORS VASSA > asba.html #main.css JS mains (> asa.html> Sidoctype html 2 <!-- Assignment 6a : working with Dom elements --> 3 <html> 4 <head> 5 <title>Tic Tac Toe</title> 6 <meta name="viewport" content="width-600"/> 7 <link rel="stylesheet" href="main.css"/> 8 <script defer src="main.js"></script> 9 </head> 10 <body> 11 <h1>Tic Tac Toe</h1> 12 <div id="players"> 13 <div id"X" class"">Player X</div> 14 <div id="0" class="">Player O</div> 15 <input type="button" class="button" value="New Game"/> 16 </div> 17 <table> 18 <tbody> 19 <tr> 20 <td id="co"></td> 21 <td id="c1"></td> 22 <td id="c2"></td> 23 </tr> 24 <tr> 25 <td id="c3"></td> 26 <td id="c4"></td> 27 <td id="c5"></td> 28 </tr> 29 <tr> 30 <td id="c6"></td> 31 <td id="c7"></td> 32 <td id="c8"></td> 33 </tr> 34 </tbody> 35 </table> 36 </body> 37 </html> I 8
main.css - As6a - Visual Studio action View Go Run Terminal Help # main.css X RS 1 # main.css > & body body { 2 text-align: center; 3 font-size: 16px; font-family: 'Comic Sans MS', Helvetica, sans-serif; al 5 2 } 4 5 6 7 8 table { margin-left: auto; margin-right: auto; width: 551px; -webkit-user-select: none; border-collapse: collapse; I } td { height: 175px; width: 175px; text-align: center; font-size: 12px; } td:nth-of-type(2) { border-left: 2px solid #cccccc; border-right: 2px solid #CCCCCC; content: "200"; 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 tr:nth-of-type(2) td { border-top: 2px solid #cccccc; border-bottom: 2px solid #CCCCCC; } #players { margin-left: auto; margin-right: auto; padding: 28px 10px 10px 10px; width: 511px; text-align: left; #players > div { display: inline-block; padding-right: 25px; color: #CCCCCC; -webkit-transition-duration: 200msi Type here to search
padding-right: 25px; color: #CCCCCC; -webkit-transition-duration: 200ms; 37 38 39 40 41 42 43 } .button { float: right; I } 44 .current-player { color: black !important; -webkit-transform: scale(1.5); } 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 .X-marker { color: rgb(40, 143, 66); } .X-marker:before { content: "x"; } .0-marker { color: rgb(31, 0, 284); } .0-marker:before { content: ""; } .X-marker.o-marker { color: rgb(241, 79, 4); } .X-marker.o-marker:before { content: ">"; }
60% WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic Tac Toe game. Do the following using JavaScript. Do not modify the HTML file. When you see this symbol: save and refresh the browser (this should happen automatically if you are using Brackets with Live Preview), then check your code to make sure it is working before you proceed. 1. Create two variables called "playerX" and "player". Set them to the DOM element with the id "X" and "O" respectively 2. Add the class "current-player" to the playerX® element. Notice that the style changes on the "Player X at the top of the page. 3. Create a named function with whatever name you like. (This will be refered to as the event handler" in further instructions.) In this function add a console.logstatement to display a message in the console. 4. Use a for loop to add this function as a click event handler to each of the TD elements in the table. Open the console and click a square. You should see your message. 5. In your event handler, add a statement to get the id of the element with the class "current-player" and store it to a variable. Display this value in the console.log() you already have. 6. At the end of your event handler, add a statement to switch the "current-player" class from playerX to player or visa-versa (Remember you can toggle classes.) 7. In your event handler, add a statement to add the class "X-marker" or "O-marker" to the target element depending on who's turn it is. (the target element is the one that was clicked on. Hint: the event object has a target property.) You should see Xoro appear when you click on a square 8. Add an event handler to the "New Game" button to clear all the squares 9. Notice that if you click on a square that is taken by the other player, the marker may turn into a question mark. This is because you have added both "X-marker" and "O-marker classes to the document. If you used className you would be able to take over another players square. Also, if you click on your own square you wasted your turn. Modify the event handler to check to see if there is a class on the element already. (Hint: this is a good use of className but there are other ways to do it.) Don't put a marker or count the turn of the square is already taken 10. Add the code below to the beggining of your program. This will be used to check if there is a winner 11 Array of winning combinations const wins = 1 [0, 1, 21. 13, 4, 51.
+ 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 player who's turn it is. I.E. X-marker or 0-marker checkwin returns true if there is a winner and false if not */ function checkWin(player) { 11 squares' is an list of all the TD elements in the game. 1/ Change it to the name of the variable you used let grid = Array.from(squares, function (square) { return square.classList.contains (player); }); for (let win of wins) { if (grid win []] && grid [win [1]] full grid[win [2]]) { for (let sq of win) { 11 Add code here to set background color to 'lightgreen'. sq' is the index of the To } return true; } } return false; } 11. Call the checkwin () function from the event handler. The player argument is "X-marker" or "o marker". Change the name of the squares variable to match the name you used for your list of td elements. 12. When there is a winner, set the background colour of the three winning squares to highlight them and open an alert box to say who the winner is. Do this by adding code where the comment is in the checkWin() function. 13. In the event handler for the "New Game" button, add code to remove the background colour and reinstate the event handler for the table. Optional items. Not for extra marks but think how satisfying it will be! 1. Stop the game play once there is a winner. You can do this using a global variable set to false until there is a winner. Be sure to reset it when you press the "New Game" button 2. Display a message if the game ends with no winner
td elements 12. When there is a winner, set the background colour of the three winning squares to highlight them and open an alert box to say who the winner is. Do this by adding code where the comment is in the checkWin() function 13. In the event handler for the "New Game" button, add code to remove the background colour and reinstate the event handler for the table. Optional items. Not for extra marks but think how satisfying it will be! 1. Stop the game play once there is a winner. You can do this using a global variable set to false until there is a winner. Be sure to reset it when you press the "New Game" button. 2. Display a message if the game ends with no winner. 3. Add a setTimout to the winner alert. Delay it about 50 milliseconds so the board will draw before the alert pops up.

Answers

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); 


Similar Solved Questions

1 answers
Figure 4-5 Price (dollars per month $2,500 2.000 Demand 0 200400 800 Quantity (apartments) Figure 4-5...
Figure 4-5 Price (dollars per month $2,500 2.000 Demand 0 200400 800 Quantity (apartments) Figure 4-5 shows the market for apartments in Springfield. Recently, the government imposed a rent ceiling of $1.000 per month. 2) 2) Refer to Figure 4-5. Suppose that instead of a rent ceiling, the government...
1 answers
The variable cost per unit depends on how many units are produced. True or False True...
The variable cost per unit depends on how many units are produced. True or False True True False False...
1 answers
​Order: Nitroglycerine 50 mg in 250 mL Normal​ Saline, infuse at 100​ mcg/minute. Calculate the rate...
​Order: Nitroglycerine 50 mg in 250 mL Normal​ Saline, infuse at 100​ mcg/minute. Calculate the rate in​ mL/h. A. 2​ mL/h B. 30​ mL/h C. 20​ mL/h D. 0.5​ mL/h...
1 answers
During year 1, Benson Manufacturing Company incurred $51,600,000 of research and development (R&D) costs to create...
During year 1, Benson Manufacturing Company incurred $51,600,000 of research and development (R&D) costs to create a long-life battery to use in computers. In accordance with FASB standards, the entire R&D cost was recognized as an expense in year 1. Manufacturing costs (direct materials, di...
1 answers
SiThe eruph bclov shors the resuilts of an csperimenbin whick mice learned to gh m Using...
SiThe eruph bclov shors the resuilts of an csperimenbin whick mice learned to gh m Using this graph, answer the questions below a maze. 25 20 601 15 10 No reward Food reward Day a.) (2 points) State an appropriate hypothesis for this experiment b.) (2 points) Which was the control group and which wa...
1 answers
Enter a partial decay series for Rn-220 undergoing the following sequential decays: α, α, β, and...
Enter a partial decay series for Rn-220 undergoing the following sequential decays: α, α, β, and α. Part C: β decay (Express your answer as a nuclear equation)...
1 answers
11 The bone of the upper arm is the and two forearm bones are the Of...
11 The bone of the upper arm is the and two forearm bones are the Of the two forearm bones, which one is on the lateral side (the "outside" Remember, always refer to a body in anatomical position.) and the of the arm? 12 What is the anatomical name for the wrist bones? 13 The innominate bone...
1 answers
NCS = 1,548,264 - 1,314,239 + 93,078 = 327,105 c) Changes in NWC (B/S) = ending...
NCS = 1,548,264 - 1,314,239 + 93,078 = 327,105 c) Changes in NWC (B/S) = ending NWC - Beginning NWC 31 Dec 18 1- Current Assets 228,414,460 222,367,920 2- Current Liabilities 20,426,482 21,527,131 Change in NWC = 6,046,540 + 1,100,649 = 7,147,189 CFFA = 7,481,048 - 327,103 - 7,147,189 = 6,756 2-CFFA...
1 answers
Balance sheet and income statement relationships across five years Compute the missing values for the following...
Balance sheet and income statement relationships across five years Compute the missing values for the following chart and analyze the financial performance and position of this company. The first year of operations is 2005. 2011 2010 2009 2008 Assets: Cash $500 $2410 $ 3...
1 answers
Part A - The activity of a certain isotope dropped from 3200 Ci to 800 Ci...
Part A - The activity of a certain isotope dropped from 3200 Ci to 800 Ci in 4.0 years. What is the half-life of this isotope (in years)? Essay answers are limited to about 500 words (3800 characters maximum, including spaces). 3800 Character(s) remaining Submit Request Answer Part B - How many half...
1 answers
Please provide detailed steps GO ste: T.t IS n NCISTavyto pev.fo/m fin ste) ?
Please provide detailed steps GO ste: T.t IS n NCISTavyto pev.fo/m fin ste) ?...
1 answers
Calculate the mass of precipitate formed when 2.12 L of 0.0820 M Ba(OH)2 are mixed with 3.11 L of...
Calculate the mass of precipitate formed when 2.12 L of 0.0820 M Ba(OH)2 are mixed with 3.11 L of 0.0664 M Na2SO4....
1 answers
6) A pair of eclipsing binaries viewed edge-on shows the following light curve. (You can estimate...
6) A pair of eclipsing binaries viewed edge-on shows the following light curve. (You can estimate relevant quantities by reading off the scales.) 1.0 0.8 0.6 0.2 0.4 0.6 0.8 1.0 Time (days) (a) If the larger star is 0.5Ro in radius, estimate the radius of the smaller star. (b) If the larger star has...
1 answers
Draw a tree diagram displaying all possible outcomes given a roll of a six sided die,...
Draw a tree diagram displaying all possible outcomes given a roll of a six sided die, a coin flip, then a second coin flip. Examples of possible outcomes are 5H H meaning a roll of a , then a Heads, and a Heads TH meaning a roll of a 1, then a Tails, then a Heads...
1 answers
Problem 1 (15 points) Giving the following structure: a) (5 points) Identify two functional groups b)...
Problem 1 (15 points) Giving the following structure: a) (5 points) Identify two functional groups b) (5 points) Draw the expanded structural formula C) (5 points) Write the molecular formula Problem 2 (20 points) Given the following molecule: HC-00 HC-OO HC-o a a) (5 points) What kind of lipid is i...
1 answers
What is the importance of total quality management?
What is the importance of total quality management?...

-- 0.015181--