We Keep Coding

Loop check classes and swap it JavaScript

I created a loop to check all the classes in a grid.
I have 4 boxes ( blue, orange, brown and yellow ) the blue box is moving right side in the grid and once it goes into a colored box of the grid they should swap with the yellow spot.
I am working only on the orange and yellow at the moment.
So the loop is checking the classes if found it should swap it.
The problem is that The yellow box goes into the orange one but not vice versa.
Any suggestions?
let moveCounter = 0;
let score = 0;
let obs = 10;
document.getElementById('score').textContent = '0';
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 49; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var obstacles = [];
while (obstacles.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {
obstacles.push(randomIndex);
var drawObstacle = document.getElementById('square' + randomIndex);
$(drawObstacle).addClass("ob1")
}
}
var obstacles = [];
while (obstacles.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {
obstacles.push(randomIndex);
var drawObstacle = document.getElementById('square' + randomIndex);
$(drawObstacle).addClass("ob2")
}
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var drawPone = document.getElementById('square' + randomIndex);
$(drawPone).addClass("p-0")
}
}
var addPoints = $('#score');
$('#button_right').on('click', function() {
moveCounter += 1;
$pOne = $('.p-0')
$pOneNext = $pOne.next();
$pOne.removeClass('p-0');
$pOneNext.addClass('p-0');
if ($(".p-0").hasClass("ob2")) {
//alert("found")
selectElementAndCheckClass(".ex_box", "def", "ob1", "ob2")
}
});
function selectElementAndCheckClass(element, className) {
let arrOfClasses = $(element).attr('class').split(" ");
for (var i = 0; i < arrOfClasses.length; i++) {
if (arrOfClasses[i] === className) {
alert('HELP'); //SWAP CLASSES
$('.ex_box').removeClass('def');
$('.ob2').addClass('def');
$('ex_box').addClass('ob2');
$('.ob2').removeClass('ob2');
} else {
alert("not found")
}
}
}
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.ob1 {
background-color: brown;
}
.ob2 {
background-color: orange;
}
.p-0 {
background-color: blue;
}
.move {
text-align: center;
}
.ex_box {
height: 32px;
width: 32px;
border: solid 2px black;
}
.def {
background-color: yellow;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box">
</div>
<div class="move">
<button id="button_right">right</button><br>
</div>
<div class="ex_box def" id="score">
</div>

Supposed that you want to swap color then:
$('.ob2').addClass('def');
$('.ob2').removeClass('ob2');
$('.ex_box').addClass('ob2');
$('.ex_box').removeClass('def');
Since your .def has yellow color and .ob2 has orange color.
Logic is let the orange have yellow color then remove the orange from it. Then let the yellow color has orange color then remove the yellow one.
Snippet:
let moveCounter = 0;
let score = 0;
let obs = 10;
document.getElementById('score').textContent = '0';
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 49; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var obstacles = [];
while (obstacles.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {
obstacles.push(randomIndex);
var drawObstacle = document.getElementById('square' + randomIndex);
$(drawObstacle).addClass("ob1")
}
}
var obstacles = [];
while (obstacles.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {
obstacles.push(randomIndex);
var drawObstacle = document.getElementById('square' + randomIndex);
$(drawObstacle).addClass("ob2")
}
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var drawPone = document.getElementById('square' + randomIndex);
$(drawPone).addClass("p-0")
}
}
var addPoints = $('#score');
$('#button_right').on('click', function() {
moveCounter += 1;
$pOne = $('.p-0')
$pOneNext = $pOne.next();
$pOne.removeClass('p-0');
$pOneNext.addClass('p-0');
if ($(".p-0").hasClass("ob2")) {
//alert("found")
selectElementAndCheckClass(".ex_box", "def", "ob1", "ob2")
}
});
function selectElementAndCheckClass(element, className) {
let arrOfClasses = $(element).attr('class').split(" ");
for (var i = 0; i < arrOfClasses.length; i++) {
if (arrOfClasses[i] === className) {
alert('HELP'); //SWAP CLASSES
$('.ob2').addClass('def');
$('.ob2').removeClass('ob2');
$('.ex_box').addClass('ob2');
$('.ex_box').removeClass('def');
} else {
alert("not found")
}
}
}
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.ob1 {
background-color: brown;
}
.ob2 {
background-color: orange;
}
.p-0 {
background-color: blue;
}
.move {
text-align: center;
}
.ex_box {
height: 32px;
width: 32px;
border: solid 2px black;
}
.def {
background-color: yellow;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box">
</div>
<div class="move">
<button id="button_right">right</button><br>
</div>
<div class="ex_box def" id="score">
</div>

Grid if box has specific class stop JavaScript

I have a grid with a player, yellow box, and obstacles (.ob) and black boxes. I don't want the player to go in the obstacle squares when I click the 'UP' button.
I was thinking to check if the next class has .ob do not go there. Any suggestions?
let moveCounter = 0;
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 50; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var obstacles = [];
while (obstacles.length < 20) {
var randomIndex = parseInt(49 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {
obstacles.push(randomIndex);
var drawObstacle = document.getElementById('square' + randomIndex);
$(drawObstacle).addClass("ob")
}
}
var playerTwo = [];
while (playerTwo.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (playerTwo.indexOf(randomIndex) === -1) {
playerTwo.push(randomIndex);
var drawPtwo = document.getElementById('square' + randomIndex);
$(drawPtwo).addClass("p-1")
}
};
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box > div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.p-1 {
background-color: yellow;
}
.ob {
background-color: black;
}
<div id="grid-box"></div>
<div class="move">
<button id="button_up">UP</button><br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
jsFifddle

Use the following code
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10
var idUpMove = 'square' + idMove;
if($('#' + idUpMove).hasClass('ob')){
return false;
}
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
});
Here we check the next selected class having ".ob" class if its return true then we stop the process if it returns false then process continues
if($('#' + idUpMove).hasClass('ob')){
return false;
}
Fiddle

drawing a line between two table cells

My homework was to create a scipt that connects two marked cells of a table. My solution works fine, but the result line is a bit disproportionate.
As you can see, the last row is 4-cells long while all other rows are 3-cells long. But I'd like the middle part of a line to be the longest. Like this:
How to get the desired result and not make the code too complicated. The code itself:
function connectThem() {
if (markedCells.length == 2) {
y_distance = markedCells[0][0] - markedCells[1][0];
y_distance = Math.abs(y_distance) + 1; // vertial distance
x_distance = markedCells[0][1] - markedCells[1][1];
x_distance = Math.abs(x_distance) + 1; // horizontal distance
if (x_distance > y_distance) { // if horizontal distance greater than vertical distance
x_distance -= 0;
alert("horizontal connection");
totalRows = y_distance;
for (var row = 0; row < y_distance; row++) {
thisRowLength = Math.floor(x_distance / totalRows);
for (var c = 0; c < thisRowLength; c++) {
document.getElementById('cell-' + markedCells[0][0] + '-' + markedCells[0][1]).style.backgroundColor = "red";
markedCells[0][1] = parseInt(markedCells[0][1]) + 1;
}
markedCells[0][0] = parseInt(markedCells[0][0]) + 1;
totalRows -= 1; // vertical remaining
x_distance -= thisRowLength; // horizontal remaining
}
} else {
y_distance -= 0;
alert("vertical or horizontal connection");
totalCols = x_distance;
for (var col = 0; col < x_distance; col++) {
thisColLength = Math.floor(y_distance / totalCols);
for (var r = 0; r < thisColLength; r++) {
document.getElementById('cell-' + markedCells[0][0] + '-' + markedCells[0][1]).style.backgroundColor = "red";
markedCells[0][0] = parseInt(markedCells[0][0]) + 1;
}
markedCells[0][1] = parseInt(markedCells[0][1]) + 1;
totalCols -= 1;
y_distance -= thisColLength;
}
}
alert("x distance: " + x_distance + " y distance: " + y_distance);
} else {
alert("Can't connect " + markedCells.length + " cells together :-(")
}
}
var htmlElements = ""; // storing the whole table here
for (var r = 1; r < 41; r++) { // creating the table row by row
htmlElements += '<tr>';
for (var c = 1; c < 61; c++) { // and column by column
htmlElements += '<td class="tCell white" id="cell-' + r.toString() + '-' + c.toString() + '"></td>';
}
htmlElements += '</tr>'
}
var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;
var allTableCells = document.querySelectorAll("td"); // adding all cells to an array
var markedCells = [] // storing marked cells here
for (var i = 0; i < allTableCells.length; i++) {
allTableCells[i].addEventListener("click", function() { // when click any cell
let stringID = this.id.split('-');
if (this.className == "tCell white") {
this.className = "tCell red";
markedCells.push([stringID[1], stringID[2]]);
} else {
this.className = "tCell white";
let index = markedCells.indexOf([stringID[1], stringID[2]]);
markedCells.splice(index, 1);
}
console.log(markedCells);
});
}
body {
background-color: #333;
}
#workspace {
position: absolute;
width: 900px;
height: 600px;
background-color: whitesmoke;
top: 50%;
left: 50%;
margin-left: -450px;
margin-top: -300px;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0;
}
table {
width: 900px;
height: 600px;
}
.red {
background: red;
color: white;
}
.white {
background: white;
color: black;
}
#btn {
position: absolute;
width: 100px;
top: 50px;
left: 50%;
margin-left: -50px;
}
<div id="workspace">
<table id="tab">
</table>
</div>
<button id="btn" onclick="connectThem()">Connect!</button>

Single Player mode in Tic-tac-toe

I am trying to create a one-player tic-tac-toe game using JavaScript. Following is the code for JavaScript, CSS, and HTML respectively:
const grid = [];
const GRID_LENGTH = 3;
let turn = 'X';
function initializeGrid() {
for (let colIdx = 0; colIdx < GRID_LENGTH; colIdx++) {
const tempArray = [];
for (let rowidx = 0; rowidx < GRID_LENGTH; rowidx++) {
tempArray.push(0);
}
grid.push(tempArray);
}
}
function getRowBoxes(colIdx) {
let rowDivs = '';
for (let rowIdx = 0; rowIdx < GRID_LENGTH; rowIdx++) {
let additionalClass = 'darkBackground';
let content = '';
const sum = colIdx + rowIdx;
if (sum % 2 === 0) {
additionalClass = 'lightBackground'
}
const gridValue = grid[colIdx][rowIdx];
if (gridValue === 1) {
content = '<span class="cross">X</span>';
} else if (gridValue === 2) {
content = '<span class="cross">O</span>';
}
rowDivs = rowDivs + '<div colIdx="' + colIdx + '" rowIdx="' + rowIdx + '" class="box ' +
additionalClass + '">' + content + '</div>';
}
return rowDivs;
}
function getColumns() {
let columnDivs = '';
for (let colIdx = 0; colIdx < GRID_LENGTH; colIdx++) {
let coldiv = getRowBoxes(colIdx);
coldiv = '<div class="rowStyle">' + coldiv + '</div>';
columnDivs = columnDivs + coldiv;
}
return columnDivs;
}
function renderMainGrid() {
const parent = document.getElementById("grid");
const columnDivs = getColumns();
parent.innerHTML = '<div class="columnsStyle">' + columnDivs + '</div>';
}
function onBoxClick() {
var rowIdx = this.getAttribute("rowIdx");
var colIdx = this.getAttribute("colIdx");
let newValue = 1;
grid[colIdx][rowIdx] = newValue;
renderMainGrid();
addClickHandlers();
}
function addClickHandlers() {
var boxes = document.getElementsByClassName("box");
for (var idx = 0; idx < boxes.length; idx++) {
boxes[idx].addEventListener('click', onBoxClick, false);
}
}
initializeGrid();
renderMainGrid();
addClickHandlers();
.parentTop {
display: flex;
align-items: center;
justify-content: center;
}
.gridTop {
border-color: "#f44336";
border: '1px solid red';
display: flex;
flex-direction: column;
}
.lightBackground {
background-color: 00FFFF
}
.columnsStyle {
display: flex;
flex-direction: column;
}
.rowStyle {
display: flex;
}
.darkBackground {
background-color: F0FFFF
}
.box {
width: 100;
height: 100;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 100px;
}
.cross {
color: #f90;
font-size: 2.5em;
border-radius: 5px;
line-height: 100px;
}
<div class="header">
<h1> Tic Tac Toe</h1>
</div>
<div class="parentTop">
<div class="gridTop">
<div id="grid">
</div>
</div>
</div>
<script type="text/javascript" src="./index.js"></script>
<link rel="stylesheet" href="./index.css">
Here box represents one placeholder for either X or a 0.
We have a 2D array to represent the arrangement of X or O is a grid
0 -> empty box
1 -> box with X
2 -> box with O
User is playing with Computer so every alternate move should be by Computer
X -> player
O -> Computer
I am not able wrap my head around the implementation of the algorithm used for computer (Min-max algorithm is one) in code.

traverse it in a loop as column first, and row and then diagonal these are three cases where you have to check consecutive user inputs if first two consecutive user inputs found in any of above case then your program have put their value as third one as apponent

Moving table row to another table

I have this code below that prints the value of random fruits table whenever i click the cell value. The problem is i'm trying to create a function that allows me to move the value of random fruits table into the red fruits table by clicking on for example kiwi and it will move into the red fruits table and also i want to be able to move back that value i moved into red fruits table back to the random fruits table. I tried to do it using the array push method but it only copies the value into the other table and not completely move it. Is there any easy way to do this any suggestion would be greatly appreciated thanks!
var obj = {};
var obj2 = {};
var key = "Red Fruits";
obj[key] = ['Apple', 'Cherry', 'Strawberry'];
var myArray = [];
myArray.push(obj);
var key2 = "Green Fruits";
obj[key2] = ['Watermelon', 'Durian', 'Avacado'];
var myArray2 = [];
myArray2.push(obj);
var key3 = "Random Fruits";
obj2[key3] = ['Kiwi', 'Pomegranate', 'Honeydew', 'Plum'];
var myArray3 = [];
myArray3.push(obj2);
var $header = $("<tr>"),
cols = 0,
bodyString = "";
$.each(obj, function(key, values) {
cols = Math.max(cols, values.length);
$header.append($('<th/>').text(key + ": " + values.length));
});
for (var i = 0; i < cols; i++) {
bodyString += '<tr>';
$.each(obj, function(key, values) {
bodyString += '<td>' +
(values[i] ? values[i] : "") +
'</td>';
});
bodyString += '</tr>';
}
$('.fruitsclass thead').html($header);
$('.fruitsclass tbody').html(bodyString);
var bodyString = '';
var headString = '';
$.each(obj2[key3], function(index) {
bodyString += ('<tr><td>' + obj2[key3][index] + '</td></tr>');
});
headString += ('<tr><th>' + 'Random Fruits' + '</th></tr>');
$('.fruityclass tbody').html(bodyString);
$('.fruityclass thead').html(headString);
$(document).ready(function() {
$("#fruityid td").click(function() {
getval(this);
});
});
function getval(cel) {
alert(cel.innerHTML);
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center
}
.skillsTable th {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
}
table {
float: left;
border-collapse: collapse;
width: 70%
}
td {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
padding-top: 8px;
padding-left: 11px;
font-size: 15px;
}
th {
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #AAA5A4;
padding-bottom: 5px;
}
div {
margin-bottom: 50px;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
</head>
<body>
<div id="result"> </div>
<div class="center">
<table id="fruitsid" class="fruitsclass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
<div class="center">
<table id="fruityid" class="fruityclass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>

Working on top of your code, changed listener function to remove the node:
function listener(obj) {
tbl = document.getElementById("fruitsTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () {
getval(this);
data = this.innerHTML;
k1 = Object.keys(obj).find(k => obj[k].indexOf(data) >= 0 )
if (k1 != 'Random Fruits') {
key = 'Random Fruits'
} else {
key = 'Red Fruits';
}
index = obj[k1].indexOf(data);
obj[k1].splice(index, 1);
obj[key].push(data);
redraw(obj);
listener(obj);
};
}
}
}
It finds the relevant key and removes the element from that array, and pushes that into k2. Once done, it redraws the UI.
Fiddle - https://jsfiddle.net/wqzsn7ou/