We Keep Coding

Javascript random table td -- nooverlap vertical-horizontal

I'm trying to avoid horizontal and vertical lines.
It stopped working with the Javascript array and for the rest of it.
I don't know how to create Javascript to randomly generate the first line and don't overlap with daeumjul. Please let me know. The code has been raised to jsfiddle.
Screenshot:
Javascript
var arr_person = ["#B22222","#0000cd","#FF00FF","#DAA520","#008000","#FF69B4","#4B0082","#E6E6FA","#ADD8E6","#90EE90"];
var arr_date = ['mon', 'tue', 'wed', 'thu','fri'];
var arr_subject = ['subject1','subject2','subject3','subject4','subject5'];
var arr_subject_check = new Array();
for(m=0; m < arr_subject.length; m++){
arr_subject_check[m] = new Array();
}
var arr_time = ['morning','after'];
var str = "";
function pickFromPool() {
var r = Math.floor(Math.random() * arr_pool.length);
return arr_pool.splice(r,1)[0];
}
str += "<table>";
for(var i=0; i < arr_date.length; i++){ // arr_date
var arr_pool = arr_person.slice();
str += "<tr>";
for(var j=0; j < arr_subject.length; j++ ){ //arr_subject
var arr_subject_check_cur = arr_subject_check[j].slice();
for(var n=0; n < arr_subject_check_cur.length; n++) {
var dup_index = arr_pool.indexOf(arr_subject_check_cur[n]);
if(dup_index < 0) {
} else {
arr_pool.splice(dup_index,1);
}
}
for(var k=0; k < arr_time.length; k++ ){
var pickedValue = pickFromPool();
arr_subject_check[j].push(pickedValue);
if(k == 0){
str += "<td style='border-left:#fff 4px solid;background-color:" + pickedValue + "'></td>";
} else {
str += "<td style='background-color:" + pickedValue + "'></td>";
}
}
for(var m=0; m < arr_subject_check_cur.length; m++) {
if(arr_subject_check_cur[m] !== '') {
arr_pool.push(arr_subject_check_cur[m]);
}
}
}
str += "</tr>";
}
str += "</table>";
jQuery('body').html(str);
https://jsfiddle.net/ipadorusa/vx8t25ts/1/
I'm trying to avoid horizontal and vertical lines.

Javascript Can't use array content as array index?

When I trird to run the js code, it always said "Uncaught TypeError: Cannot read property '_id' of undefined" for
deployedID.push(data[j]._id);
So after some thinking, I believe the problem lies in
var j = deploy[i];
Is there any way to solve it? Thanks in advance.
Below is the complete code:
var deploy = [];
var deployedID = [];
var deployedename = [];
var deployedoname = [];
var deployedrank = [];
function popularizeTable(){
$.get("/SSS/getlist", function(data){
deploy = randomunique(data.length ,100);
for (var i = 0; i < 100; i++){
var j = deploy[i];
deployedID.push(data[j]._id);
deployedename.push(data[j].ename);
deployedoname.push(data[j].oname);
deployedrank.push(data[j].rank);
}
var str = " ";
var k = 0;
for (var i = 0; i < 5; i++){
str += "<tr>";
for(var j = 0; j < 20; j++){
str += "<td><section id=\"" + deployedID[k] + "\" class=\"container\"><div class=\"card\">"
str += "<figure class=\"front\"><img src=\"images/back.jpg\"></figure>";
str += "<figure class=\"back\"><img src=\"images/Clear/" + deployedename[k] + "/001.jpg\"></figure></div></td></section>";
k++;
}
str += "</tr>";
}
$("#table").append(str);
});
}
$( document ).ready(function() {
popularizeTable();
$(document).on("mouseover", ".card", function(){
$(this).toggleClass("flipped")});
});
function randomunique(max, num){
var uniquelist = [];
for (var j = uniquelist.length; j < num; j++){
var i = parseInt(Math.random() * (max - 1) + 1);
if (uniquelist.indexOf(i) == -1){
uniquelist.push(i);
}
}
return uniquelist;
}

How to show message in for-loop issues in javascript or using jquery

I tried this for almost two days but still nothing. Maybe someone can help who is highly skilled in javascript loops.
I have this code:
$(function(){
var len = $('#groupContainer > div').length;
var arr = [];
for(var i=0; i < len; i++){
var number = $('#number_' + [i + 1]);
var date = $('#date_' + [i + 1]);
var count = i + 1;
var message ="";
console.log(number)
var a = number.map(function(){
return this.value;
});
var b = date.map(function(){
return this.value;
});
var newObj = {number: a[0], date: b[0]}
arr.push(newObj);
}
var message = "";
for(var c = 0; c < arr.length; c++)
{
for(var d in arr[c])
{
message += 'Group: ' + [c + 1] + '\n';
if(arr[c].hasOwnProperty(d))
{
if(arr[c][d] == "")
{
message += d + ' is required!\n';
}
}
message = message + "\n";
}
}
alert(message);
});
And the expected output:
If all the fields in group 1 is filled and group 2 is not show alertbox:
Group 2:
Number is required!
Date is required!
If all field is not filled show:
Group 1, 2 Number is required!
Group 1, 2 Date is required!
If all field is filled do nothing.
Here's my FIDDLE

Your code here is too much complicated and should be simplified.
You need to save the messages in an object and loop through them later to show the messages in order.
var messages = {};
var message = "";
for(var c = 0; c < arr.length; c++)
{
var groupMessage = false;
for(var d in arr[c])
{
if(arr[c].hasOwnProperty(d))
{
if(arr[c][d] == "")
{
if(messages[d]==undefined) {
messages[d]={groups:[]};
}
messages[d].groups.push(c+1);
}
}
}
var lastgroup = "";
for(i in messages) {
m = messages[i];
if(m.groups.join(",")==lastgroup) {
message = message.replace("Group "+m.groups.join(",")+" ","Group "+m.groups.join(",")+":\n");
message+=i+" is required!\n";
}
else {
message+="Group "+m.groups.join(",")+" "+i+" is required!\n";
}
lastgroup = m.groups.join(",");
}
// .....
}

$(function(){
var len = $('#groupContainer > div').length;
var arr = [];
for(var i=0; i < len; i++){
var number = $('#number_' + [i + 1]);
var date = $('#date_' + [i + 1]);
var count = i + 1;
var message ="";
var a = number.map(function(){
return this.value;
});
var b = date.map(function(){
return this.value;
});
var newObj = {number: a[0], date: b[0]}
arr.push(newObj);
}
console.log(arr);
var message = "";
for(var c = 0; c < arr.length; c++)
{
haveErrorInGroup = false;
for(var d in arr[c])
{
if(arr[c].hasOwnProperty(d))
{
if(arr[c][d] == "")
{
if(!haveErrorInGroup){
haveErrorInGroup= true;
message += 'Group: ' + [c + 1] + '\n';
}
message += d + ' is required!\n';
}
}
}
}
alert(message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="groupContainer">
<div id ="profileGroup1">
<div class="item">
Number1: <input type="text" id="number_1" value="20">
</div>
<div class="item">
Date1: <input type="text" id="date_1" value="">
</div>
</div>
<div id ="profileGroup2">
<div class="item">
Number2: <input type="text" id="number_2" value="2015-05-05">
</div>
<div class="item">
Date2: <input type="text" id="date_2" value="">
</div>
</div>
</div>

How do i display the longest array in JS?

I want to create a Javascript array of words, then use Javascript to find the longest word and print it to the screen. Here is my code:
var StrValues = []
StrValues[0] = ["cricket"]
StrValues[1] = ["basketball"]
StrValues[2] = ["hockey"]
StrValues[3] = ["swimming"]
StrValues[4] = ["soccer"]
StrValues[5] = ["tennis"]
document.writeln(StrValues);

You can use length to find the longest string in a array. Here is a fiddle http://jsfiddle.net/2sebnb33/1/
for(var i=0;i<StrValues .length;i++){
if(StrValues [i].length>len){
len=StrValues [i].length;index=i;}
}

var strValues = ["cricket", "basketball", "hockey"];
var max = '';
for(var i = 0; i< strValues.length; i++) {
max = strValues[i].length > max.length ? strValues[i] : max;
}
alert(max);

Firstly, you need to correct the way you are creating array.
For instance, it should be like this
var StrValues = [];
StrValues[0] = ["cricket"];
The logic
var longestWord = "";
for (var i = 0 ; i < StrValues.length; i++) {
if(StrValues[i].length > longestWord.length) {
longestWord = StrValues[i];
}
}

See the code below:
var array = [];
array.push("cat");
array.push("children");
array.push("house");
array.push("table");
array.push("amazing");
var maxSize = 0;
var maxSizeWord = "";
for(var i = 0; i < array.length; i++) {
if (maxSize < array[i].length) {
maxSize = array[i].length;
maxSizeWord = array[i];
}
}
alert("The biggest word is '" + maxSizeWord + "' with length '" + maxSize + "'!");

making groups with random names in it in javascript

I am new to coding Javascript. I am trying to to shuffle list of names inputted on a textarea. The user selects the number of groups desired, and shuffle on click, then show the divided groups as output result. Below is my code but it is not working as it should be, pls help!
<script>
function ArrayToGroups(source, groups){
var groupList = [];
groupSize = Math.ceil(source.length/groups);
var queue = source;
for(var r = 0; r < groups; r++){
groupList.push(queue.splice(0,groupSize));
}
return groupList;
}
function textSpliter(splitText){
var textInput = document.getElementById("inputText").value;
var splitText = textInput.split(',');
var newList = [];
for(x = 0; x <= splitText.length; x++) {
var random = Math.floor(Math.random() * splitText.length);
var p = splitText[random];
newList.push(p);
splitText.splice(p,groupList);
}
for(var i = 0; i < newList.length; i++){
var s = newList[i];
document.getElementById('resInput').value += s + "\n" ;
}
return splitText;
}
</script>
Below is my input and output textareas
</head>
<body>
<form>
<textarea id="inputText" placeholder="text" rows="10" cols="40"></textarea>
<input type="number" name="number" max="6" value="1" id="groupNumber">
<textarea id="resInput" placeholder="text" rows="10" cols="40"></textarea>
<input type="button" name="Shuffle" value="shuffle" onclick="textSpliter()">
</form>
</body>
</html>

function shuffle() {
// Get list
// Example: element1, element 2, ele ment 3, ...
var list = document.getElementById("inputText").value.replace(/\s*,\s*/g, ",").split(",");
// Get number of groups
var n = parseInt(document.getElementById("groupNumber").value);
// Calculate number of elements per group
var m = Math.floor(list.length / n);
// Enought elements
if (n * m == list.length) {
// Create groups
var groups = new Array();
for (i = 0; i < n; i++) {
groups[i] = new Array();
for (j = 0; j < m; j++) {
// Random
rand = Math.floor(Math.random() * list.length);
// Add element to group
groups[i][j] = list[rand];
// Remove element to list
list.splice(rand, 1);
}
}
// Output
var text = "";
for (i = 0; i < n; i++) {
text += "Group " + (i + 1) + ": ";
for (j = 0; j < m; j++) {
if (j != 0) { text += ", "; }
text += groups[i][j];
}
text += "\n";
}
document.getElementById("resInput").value = text;
} else {
alert("Add more elements");
}
}

I rewrote your code. It's pretty self-explanatory.
FIDDLE
function textSpliter() {
var input = document.getElementById("inputText").value;
var names = input.split(",");
var groupSize = document.getElementById("groupNumber").value;
var groupCount = Math.ceil(names.length / groupSize);
var groups = [];
for (var i = 0; i < groupCount; i++) {
var group = [];
for (var j = 0; j < groupSize; j++) {
var random = Math.floor(Math.random() * names.length);
var name = names[random];
if (name != undefined) {
group.push(name);
names.splice(names.indexOf(name), 1);
}
}
group.sort();
groups.push(group);
}
printGroups(groups);
}
function printGroups(group) {
var output = document.getElementById("resInput");
output.value = "";
for (var i = 0; i < group.length; i++) {
var currentGroup = "";
for (var j = 0; j < group[i].length; j++) {
currentGroup = group[i].join(",");
}
output.value += currentGroup + "\r";
}
}

ES6 version ;-)
http://jsfiddle.net/dLgpny5z/1/
function textSpliter() {
var input = document.getElementById("inputText").value;
var names = input.replace(/\s*,\s*|\n/g, ",").split(",");
var groupSize = document.getElementById("groupNumber").value;
var groupCount = Math.ceil(names.length / groupSize);
var groups = [...Array(groupCount)].map(() => Array());
var i = 0
while (names.length > 0) {
var m = Math.floor(Math.random() * names.length);
groups[i].push(names[m]);
names.splice(m, 1);
i = (i >= groupCount - 1) ? 0 : i + 1
}
printGroups(groups);
}
function printGroups(groups) {
var output = document.getElementById("resInput");
output.value = groups.map(group => group.join(',')).join('\r');
}