Question with array and random function

**kikiwho** · 03-31-2016, 06:42 AM

I got a tricky javascript question relating to random function and arrays, which I have ask around but no one seems to understand or able to solve.

For testing purpose, a fixed number value is hardcoded to the variable.

I would like to achieve the following result:
- 12 black stay fixed on "b" spot
- Followed by 53 red to be random place within only the 'r' spots on refresh or button click

('r' spot is every 3 row, first 15 box)
- Unfilled 'r' spots + rest of unfilled box fill with lightblue = 19, lime = 34, yellow = 17, pink = 42, green = 102 random position on refresh or button click

There should be no unfilled box

jsfiddle.net/e4rcorzd

I trying my luck here, see if anyone could help me out.
Thank you.

**Beverleyh** · 03-31-2016, 03:25 PM

For reference - to avoid duplication by anyone wishing to participate - below are responses and evolution from other coding forums;

https://www.sitepoint.com/community/...riction/219466
http://www.blackhatworld.com/blackha...m-funtion.html
https://forums.digitalpoint.com/thre...ction.2777333/
http://stackoverflow.com/questions/3...urs-generating
http://www.webdeveloper.com/forum/sh...ble-cell-color (looks like most of the JavaScript has been provided via this forum - possible origin post?)
http://www.dreamincode.net/forums/to...h-restriction/

**jscheuer1** · 03-31-2016, 08:39 PM

Demo:

http://john.dynamicdrive.com/demos/t...ycho_cal_h.htm

Code:

<!DOCTYPE html>
<html>
<head>
<title>Psychotic Calendar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function colorThem($){
	$('td').css({color: ''}).data('backgroundColor', '');
	$('td:contains("b")').css({backgroundColor: 'black', color: 'white'}).data('backgroundColor', 'black');
	$('td:contains("r")').colorRand(53, 'red');
	$('td').colorRand(19, 'lightblue').colorRand(34, 'lime').colorRand(17, 'yellow').colorRand(42, 'pink').each(function(i, td){
		if(!$(td).data('backgroundColor')){
			$(td).css({backgroundColor: 'green', color: 'white'});
		} else if ($(td).data('backgroundColor') === 'red') {
			$(td).css({color: 'white'});
		}
	});
}
jQuery(function($){
	$.fn.colorRand = function(num, color){
		var pcol = this, pcols = -1, apcol, tot = pcol.length;
		while(++pcols < num){
		apcol = pcol.eq(Math.floor(Math.random() * tot));
			if(apcol.data('backgroundColor')){
				--pcols;
			} else {
				apcol.css({backgroundColor: color});
				apcol.data('backgroundColor', color);
			}
		}
		return pcol;
	};
	colorThem($);
	$('button:contains("Random Test")').click(function(){
		colorThem($);
	});
});
</script>
</head>
<body>
<table id="tbl" border='1'>  
<tbody>
<tr>
<td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>r</td><td>x</td><td>x</td><td>b</td><td>x</td><td>x</td><td>x</td>
</tr>
<tr>
<td class="twentyNine">x</td><td class="twentyNine">x</td><td class="twentyNine">x</td><td class="thirty">x</td><td class="thirty">x</td><td class="thirty">x</td><td class="thirty-one">x</td><td class="thirty-one">x</td><td class="thirty-one">x</td>
</tr>
<tr><td class="twentyNine">x</td><td class="twentyNine">x</td><td class="twentyNine">x</td><td class="thirty">x</td><td class="thirty">x</td><td class="thirty">x</td><td class="thirty-one">x</td><td class="thirty-one">x</td><td class="thirty-one">x</td>
</tr>
<tr><td class="twentyNine">r</td><td class="twentyNine">r</td><td class="twentyNine">r</td><td class="thirty">r</td><td class="thirty">r</td><td class="thirty">r</td><td class="thirty-one">r</td><td class="thirty-one">r</td><td class="thirty-one">r</td>
</tr>
</tbody></table>
<button>Random Test</button>
</body>
</html>

**kikiwho** · 04-01-2016, 01:04 AM

Originally Posted by Beverleyh

For reference - to avoid duplication by anyone wishing to participate - below are responses and evolution from other coding forums;

https://www.sitepoint.com/community/...riction/219466
http://www.blackhatworld.com/blackha...m-funtion.html
https://forums.digitalpoint.com/thre...ction.2777333/
http://stackoverflow.com/questions/3...urs-generating
http://www.webdeveloper.com/forum/sh...ble-cell-color (looks like most of the JavaScript has been provided via this forum - possible origin post?)
http://www.dreamincode.net/forums/to...h-restriction/

Thank you.
I move on to the next forum as I am stuck on the same question for over 2 weeks.

**kikiwho** · 04-01-2016, 01:06 AM

Just want to take the time to come back to thank you, John for your attempt, really appreciate it, you also gave me hope, at least I see something.
Although this is just examples of playing with colors, i learn array and random function from this.

If I want to remove 'r' and 'b' text, and based on each color give it a name instead, is it possible?
Previously, I encounter click button seem to mess up as after generate 'b' and 'r' text are cleared
Example - If background color is red , .html('this is red');

Once again, thank you.

**jscheuer1** · 04-01-2016, 02:19 AM

I believe I did exactly what your post requested (not an 'attempt'), and a little more (made the letters more legible after background color change, mostly to demonstrate the requirements had been fulfilled). If there are new requests, and/or will also be other new requests - as often is my experience with these sorts of things, please just get it over with and just say what you really want.

In other words - I just made a custom page to your specifications for free. If you want another, please be very specific and make it be, if at all possible the last one in this series. It can also be helpful, though not required, if you explain why you want this. "Why" often makes details more apparent. Though again, I already did everything you initially requested in your post here in our forum, right? Did I leave anything out from the initial request?

**kikiwho** · 04-01-2016, 06:31 AM

Originally Posted by jscheuer1

I believe I did exactly what your post requested (not an 'attempt'), and a little more (made the letters more legible after background color change, mostly to demonstrate the requirements had been fulfilled). If there are new requests, and/or will also be other new requests - as often is my experience with these sorts of things, please just get it over with and just say what you really want.

In other words - I just made a custom page to your specifications for free. If you want another, please be very specific and make it be, if at all possible the last one in this series. It can also be helpful, though not required, if you explain why you want this. "Why" often makes details more apparent. Though again, I already did everything you initially requested in your post here in our forum, right? Did I leave anything out from the initial request?

Yes, you are great! My apologize if I said something wrong, which not what's my intention, just cant thank you enough.

As I attempt myself, I would encounter new things.

I tried implementing with date.
1) Is it possible to group 9 td as 1 and give it a id?
date 1st = number 1 big box
date 30th = number 30 big box
Reason for this : I realise we cant assume number 6 column is always saturday. Based on the saturday date in current month,
let say saturday date are : 2,9,16,23,30.
Saturday date 2 point to number 2 big box, which consists of 9 small box and the last column paint 3 black

Similar for red,
Again based on monday to friday date, match to each big box number , in the big box, last 3 row is red placeholder and red only to be random within here.

Unfilled 'r' spots + rest of unfilled box fill with lightblue = 19, lime = 34, yellow = 17, pink = 42, green = 102 random position on refresh or button click

2)
If I want to remove 'r' and 'b' text, and based on each color give it a name instead, is it possible?
click button seem to mess up the generate after first generation have done and 'b' and 'r' text are cleared
Example - If background color is red , .html('this is red');

Thank you.

**jscheuer1** · 04-01-2016, 03:28 PM

OK, I actually don't mind doing this sort of thing as much as I may have given the impression that I do. But it does seem that you're are making things up as you go along, and not necessarily being all that clear about what you want. If there's any reason for this, or any part(s) of it - Again, it would help me to help you if I knew what the why(s) are. Why are we doing this? If it's just for learning, that's OK, but if there are also other reasons, those would be good to know. Still the main issue is clarity. If we can get really clear on what you want, I can easily tell you whether or not I can do it. If I can, I will.

Like for #1 (which is really more than one thing), let's try to go through each thing and make it clearer:

Is it possible to group 9 td as 1 and give it a id?

No, well maybe in a way. An id in the strictest sense cannot be used for this. Except for - say if all 9 are in the same row and no other td are in that row, then we can give that row an id. In a loose way, we have already grouped td elements. All the b's and all the r's are each treated at certain points as a group. Their id is their text. But it's not an id, it's more like a class, and that's the way we almost always deal with this sort of thing when id is not strictly applicable - we give each td in the group a class name. Then we can easily identify them collectively and enumerate over them in order. Maybe you mean to nest a table withing one of the current boxes, and have nine td elements in that nested table? If so, the nested table and/or the parent td could have an id.

date 1st = number 1 big box
date 30th = number 30 big box

I'm not sure if this is supposed to go with the question about grouping or not. Is it? Right now, there are no big boxes (other than the large rectangular void at the end of the table). Do you mean a big td, or a sequence of td elements that are next to each other in a row or column, or something else? If this does go with the grouping idea, how is a single number or a single date like a group?

Reason for this : I realise we cant assume number 6 column is always saturday. Based on the saturday date in current month,
let say saturday date are : 2,9,16,23,30.
Saturday date 2 point to number 2 big box, which consists of 9 small box and the last column paint 3 black

You've really lost me here. In a real calendar, the same day always falls in the same column because the start and end days of the month are allowed to fall wherever they need to in order to achieve this. So, actually the first thing you say is not true. But if we decide that 1 will always be in the same place, it could be. I'm thinking that in your mind this all ties together, so as a part of trying to work out the details, consider this:

HTML Code:

<td id="couldhaveid"><table id="couldalsohaveid">
<tr><td>x</td><td>x</td><td>b</td></tr>
<tr><td>x</td><td>x</td><td>b</td></tr>
<tr><td>x</td><td>x</td><td>b</td></tr>
</table>
</td>

which is a way to do "big box (with id), which consists of 9 small box and the last column paint 3 black". The last column here represented with b's could be black. If this is what you are going for, and if this is really a calendar, is every date going to need this? Why? What's it for?

Now as for #2:

If I want to remove 'r' and 'b' text, and based on each color give it a name instead, is it possible?
click button seem to mess up the generate after first generation have done and 'b' and 'r' text are cleared
Example - If background color is red , .html('this is red');

I'm not sure if name is valid in this context. Class is. If you put html like 'this is red' into a td in the current setup, it will change its shape and the shape of all other td elements around it that need to shift to accommodate it. That can be done, but will be messy compared to what you have now. If you just want to remove the text r and b, we could make it disappear by making it the same color as the background (relatively easy, but it could still be seen by highlighting it). Or we could remove the text altogether, insert a non-breaking space entity, and give the td a class name to signify which letter belonged there before it was removed. There are various ways.

I think I fixed the problem with the click button - if what you mean is the texts kept getting progressively more numerously white. I just needed to reset the foreground colors each time. Refresh the demo and try again, I've updated code in my post as well. If you're talking about a new modification you've made, I would need to see that. But, it's true - if we actually take out the letters (instead of just making them the same color as the background), we need both a way to know which td elements are which next time we click, and a way to use that information each subsequent time.

**styxlawyer** · 04-01-2016, 07:02 PM

With all the work that John has done for you, I hope you get a top mark in your assessment!

**jscheuer1** · 04-01-2016, 09:27 PM

Originally Posted by styxlawyer

With all the work that John has done for you, I hope you get a top mark in your assessment!

Maybe. Seems too weird though even for that. I've seen a few of these, 'well could we' comebacks once the original request was fulfilled. Usually it's just someone trying to learn on their own.

kikiwho - Often the best way to do that (learn on your own, if that's what you're trying to do here) is to try helping others AND accepting guidance/criticism from other fellow 'helper' people along the way.