We Keep Coding

Permutation tree not making sense with the code

I watched a youtube video where this basic permutation tree was shown. If you look at this bit of code:
function recursion(input, set = [], result = []) {
if (!input.length) {
result.push([...set].join(''));
}
for (let i = 0; i < input.length; i++) {
const newArr = input.filter((n, index) => index !== i);
set.push(input[i]);
recursion(newArr, set, result);
set.pop();
}
return result.join(', ');
}
you can see that the base case (if statement) is at the top before the parameter nums is filtered. So, my whole question is how the tree and the code makes sense because for me the code would remove one too many digits from the set array. Becuase it pops an item of when returning and doesn't it return more than two times?

Does this log add clarity?
/ entering recursion with input = [1,2,3], set = [], result = []
| looping, i = 0
| adding 1 to set
| / entering recursion with input = [2,3], set = [1], result = []
| | looping, i = 0
| | adding 2 to set
| | / entering recursion with input = [3], set = [1,2], result = []
| | | looping, i = 0
| | | adding 3 to set
| | | / entering recursion with input = [], set = [1,2,3], result = []
| | | | adding 123 to result
| | | \ returning [123]
| | | removing 3 from set
| | \ returning [123]
| | removing 2 from set
| | looping, i = 1
| | adding 3 to set
| | / entering recursion with input = [2], set = [1,3], result = [123]
| | | looping, i = 0
| | | adding 2 to set
| | | / entering recursion with input = [], set = [1,3,2], result = [123]
| | | | adding 132 to result
| | | \ returning [123,132]
| | | removing 2 from set
| | \ returning [123,132]
| | removing 3 from set
| \ returning [123,132]
| removing 1 from set
| looping, i = 1
| adding 2 to set
| / entering recursion with input = [1,3], set = [2], result = [123,132]
| | looping, i = 0
| | adding 1 to set
| | / entering recursion with input = [3], set = [2,1], result = [123,132]
| | | looping, i = 0
| | | adding 3 to set
| | | / entering recursion with input = [], set = [2,1,3], result = [123,132]
| | | | adding 213 to result
| | | \ returning [123,132,213]
| | | removing 3 from set
| | \ returning [123,132,213]
| | removing 1 from set
| | looping, i = 1
| | adding 3 to set
| | / entering recursion with input = [1], set = [2,3], result = [123,132,213]
| | | looping, i = 0
| | | adding 1 to set
| | | / entering recursion with input = [], set = [2,3,1], result = [123,132,213]
| | | | adding 231 to result
| | | \ returning [123,132,213,231]
| | | removing 1 from set
| | \ returning [123,132,213,231]
| | removing 3 from set
| \ returning [123,132,213,231]
| removing 2 from set
| looping, i = 2
| adding 3 to set
| / entering recursion with input = [1,2], set = [3], result = [123,132,213,231]
| | looping, i = 0
| | adding 1 to set
| | / entering recursion with input = [2], set = [3,1], result = [123,132,213,231]
| | | looping, i = 0
| | | adding 2 to set
| | | / entering recursion with input = [], set = [3,1,2], result = [123,132,213,231]
| | | | adding 312 to result
| | | \ returning [123,132,213,231,312]
| | | removing 2 from set
| | \ returning [123,132,213,231,312]
| | removing 1 from set
| | looping, i = 1
| | adding 2 to set
| | / entering recursion with input = [1], set = [3,2], result = [123,132,213,231,312]
| | | looping, i = 0
| | | adding 1 to set
| | | / entering recursion with input = [], set = [3,2,1], result = [123,132,213,231,312]
| | | | adding 321 to result
| | | \ returning [123,132,213,231,312,321]
| | | removing 1 from set
| | \ returning [123,132,213,231,312,321]
| | removing 2 from set
| \ returning [123,132,213,231,312,321]
| removing 3 from set
\ returning [123,132,213,231,312,321]
You can see how I added the logging to your code in this snippet:
const log = (depth, message) =>
console .log ('| '.repeat (depth) + message)
function recursion(input, set = [], result = [], depth = 0) {
log (depth, `/ entering recursion with input = [${input}], set = [${set}], result = [${result}]`)
if (!input.length) {
log (depth, `| adding ${[...set].join('')} to result`)
result.push([...set].join(''));
}
for (let i = 0; i < input.length; i++) {
log (depth, `| looping, i = ${i}`)
const newArr = input.filter((n, index) => index !== i);
log (depth, `| adding ${input[i]} to set` )
set.push(input[i]);
recursion(newArr, set, result, depth + 1);
log (depth, `| removing ${input[i]} from set` )
set.pop();
}
log (depth, `\\ returning [${result}]`)
return result.join(', ');
}
console .log (recursion([1, 2, 3]))
.as-console-wrapper {min-height: 100% !important; top: 0}
(but the console output there is limited to the last 50 lines.)

Math in JavaScript (Numbers)

I have a table as follows:
+----+----+----+
| A | B | C |
+----+----+----+
| 1 | 2 | 3 |
+----+----+----+
| 4 | 5 | 6 |
+----+----+----+
| 7 | 8 | 9 |
+----+----+----+
| 10 | 11 | 12 |
+----+----+----+
| 13 | 14 | 15 |
+----+----+----+
| 16 | 17 | 18 |
+----+----+----+
| 19 ....
If I choose a random number (for example : 24)
The number 24 will be in C
Is there a way to know where any number will be located?

If it's just converting number to character based on this logic, you can use String.fromCharcode() like this:
const getChar = n => String.fromCharCode((n-1) % 3 + 65)
console.log(getChar(1))
console.log(getChar(2))
console.log(getChar(3))
console.log(getChar(4))

I think like this code
function get(n) {
return ['A', 'B', 'C'][(n - 1) % 3];
}
console.log(get(1)); // A
console.log(get(5)); // B
console.log(get(24)); // C

How to group similar names using PHP from mySQL results?

I am running this query
SELECT distinct make, model FROM `used`order by make
in order to get all the available make / models in the database.
My end goal though is to edit the date using PHP and have this result:
var alfa-romeo= '<select name="stage_type">
<option value="Mito">Mito</option>
</select>';
var audi= '<select name="stage_type">
<option value="A4">A4</option>
<option value="A5">A5</option>
<option value="Allroad">Allroad</option>
</select>';
for all the results.
How can I do this?

Consider the following...
<?php
/*
DROP TABLE IF EXISTS cars;
CREATE TABLE cars
(car_id SERIAL PRIMARY KEY
,make VARCHAR(20) NOT NULL
,model VARCHAR(20) NOT NULL
,UNIQUE(make,model)
);
INSERT INTO cars (make,model) VALUES
('Alfa Romeo','Mito'),
('Audi','A4'),
('Audi','A5'),
('Audi','Allroad'),
('Audi','Q5'),
('Audi','S3'),
('Audi','SQ5'),
('Audi','TT'),
('BMW','1.14'),
('BMW','116'),
('BMW','320'),
('BMW','525'),
('BMW','X1'),
('BMW','X3'),
('BMW','X5'),
('Chevrolet','Aveo'),
('Chevrolet','Orlando'),
('Chevrolet','Spark'),
('Citroen','Berlingo'),
('Citroen','C-ELYSEE'),
('Citroen','C1'),
('Citroen','C3'),
('Citroen','C4'),
('Citroen','C4 Grand Picasso'),
('Citroen','C4 Picasso');
SELECT * FROM cars ORDER BY make,model;
+--------+------------+------------------+
| car_id | make | model |
+--------+------------+------------------+
| 1 | Alfa Romeo | Mito |
| 2 | Audi | A4 |
| 3 | Audi | A5 |
| 4 | Audi | Allroad |
| 5 | Audi | Q5 |
| 6 | Audi | S3 |
| 7 | Audi | SQ5 |
| 8 | Audi | TT |
| 9 | BMW | 1.14 |
| 10 | BMW | 116 |
| 11 | BMW | 320 |
| 12 | BMW | 525 |
| 13 | BMW | X1 |
| 14 | BMW | X3 |
| 15 | BMW | X5 |
| 16 | Chevrolet | Aveo |
| 17 | Chevrolet | Orlando |
| 18 | Chevrolet | Spark |
| 19 | Citroen | Berlingo |
| 20 | Citroen | C-ELYSEE |
| 21 | Citroen | C1 |
| 22 | Citroen | C3 |
| 23 | Citroen | C4 |
| 24 | Citroen | C4 Grand Picasso |
| 25 | Citroen | C4 Picasso |
+--------+------------+------------------+
25 rows in set (0.00 sec)
*/
require('path/to/connection/stateme.nts');
$query = "
SELECT * FROM cars ORDER BY make,model;
";
$result = mysqli_query($conn,$query);
$array = array();
while($row = mysqli_fetch_assoc($result)){
$array[] = $row;
}
$new_array = array();
foreach($array as $v){
$new_array[$v['make']][] = $v['model'];
}
print_r($new_array);
?>
Outputs:
Array
(
[Alfa Romeo] => Array
(
[0] => Mito
)
[Audi] => Array
(
[0] => A4
[1] => A5
[2] => Allroad
[3] => Q5
[4] => S3
[5] => SQ5
[6] => TT
)
[BMW] => Array
(
[0] => 1.14
[1] => 116
[2] => 320
[3] => 525
[4] => X1
[5] => X3
[6] => X5
)
[Chevrolet] => Array
(
[0] => Aveo
[1] => Orlando
[2] => Spark
)
[Citroen] => Array
(
[0] => Berlingo
[1] => C-ELYSEE
[2] => C1
[3] => C3
[4] => C4
[5] => C4 Grand Picasso
[6] => C4 Picasso
)
)

calculate values from row and column then output to mulltiple cell

i have a table with these columns:
1st col 2nd col 3rd col 4th col
------------------------------------------------------
| | | 1st Inst | 2nd Inst |
| Athletic | 100 | | |
| Socio-cultural | 100 | | |
| Library | 150 | | |
| Medical | 50 | | |
| School Organ | 20 | | |
| Dev't Fee | 100 | | |
------------------------------------------------------
| Buttons: (ADD) (DEL) | | |
------------------------------------------------------
| | |___Input____|___Input____|
------------------------------------------------------
the values on the 1st and 2nd column are generated using php from
the database. this table is a dynamic table wherein the number of the
columns can increase or decrease by pressing the buttons. and at the bottom
of the table i have input fields that can also increase as the columns of the
table increases.
what i want is that when i input a value on the input fields, it will
be process in a calculation together with the values each row in the 2nd column
and that output will be written on the corresponding row of
the 3rd/4th column depending on which input field contains the initial value.
example is like these:
1st col 2nd col 3rd col 4th col
------------------------------------------------------
| | | 1st Inst | 2nd Inst |
| Athletic | 100 | 200 | |
| Socio-cultural | 200 | 400 | |
| Library | 300 | 600 | |
| Medical | 400 | 800 | |
| School Organ | 500 | 1000 | |
| Dev't Fee | 600 | 1200 | |
------------------------------------------------------
| Buttons: (ADD) (DEL) | | |
------------------------------------------------------
| | | 2 | |
i have no problem in the calculation part...what my problem is how can i output
the values on the corresponding columns.
here is the php code for retrieving the values for both 1st and 2nd col.
$stmt = $pdo->prepare('SELECT * FROM miscfeelist');
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$stmt->execute();
$result = $stmt->fetchAll();
if (count($result)){
foreach ($result as $r){
echo '<tbody id="tb"><tr>
<td align="center">'.$r['MiscFee_Name'].'</td>
<td align="center" valign="middle" class="value">'.$r['MiscFee_Value'].'</td>
<td> </td>
<td class="dwn"> </td>
<td class="dwn"> </td>
</tbody></tr>';
}
}
else
{
echo "No Record in the Database.";
}
here is the input field:
<tr>
<td align="center"> </td>
<td align="center" valign="middle" bgcolor="#FF9900"><input class="inst" type="text" style="border:thick" size="12" onkeyup="MiscFeeColl()" placeholder="1st" value="0"></td>
<td align="center" valign="middle" bgcolor="#FF9900"><input class="inst" type="text" style="border:thick" size="12" onkeyup="MiscFeeColl()" placeholder="2nd" value="0"></td>
</tr>
here is my code for the calculation:
for(var i = 0; i < theOddOnes.length; i++){ //rows
for(var l = 0; l < res.length; l++){
inst = theOddOnes[l].value;
fund165 = (MiscFee/GrandTot()*inst);
fund165 = +fund165.toFixed(2);
//columns
Miscfee123 = (parseFloat(val[l].innerHTML)/MiscFee*fund165);
Miscfee123 = +Miscfee123.toFixed(2);
document.getElementsByClassName("dwn")[l].firstChild.nodeValue = Miscfee123;
}
}
the output of these calculation is these:
1st col 2nd col 3rd col 4th col
------------------------------------------------------
| | | 1st Inst | 2nd Inst |
| Athletic | 100 | 200 | 400 |
| Socio-cultural | 200 | 600 | 800 |
| Library | 300 | 1000 | 1200 |
| Medical | 400 | | |
| School Organ | 500 | | |
| Dev't Fee | 600 | | |
------------------------------------------------------
| Buttons: (ADD) (DEL) | | |
------------------------------------------------------
| | |___2________|____________|
------------------------------------------------------
my code is displaying it horizontally.and i've been working on this for the las two weeks..i cant seem to make it to work..pls help..
EDITED
I have tried this one and it make sense somehow but i cant make it work with the other inputs...
var myTable = document.getElementById('billingForm');
for(var i= 0; i < theOddOnes.length; i++){ //rows
for(var l = 0; l < res.length; l++){
inst = theOddOnes[i].value;
fund165 = (MiscFee/GrandTot()*inst);
fund165 = +fund165.toFixed(2);
Miscfee123 = (parseFloat(val[l].innerHTML)/MiscFee*fund165);
Miscfee123 = +Miscfee123.toFixed(2);
// document.getElementsByClassName("dwn")[l].firstChild.nodeValue = Miscfee123;
myTable.rows[l].cells[i].innerHTML = Miscfee123;
}
}
here is the output:
200 2nd col 3rd col 4th col
------------------------------------------------------
| 400 | | 1st Inst | 2nd Inst |
| 600 | 100 | | |
| 800 | 200 | | |
| 1000 | 300 | | |
| 1200 | 400 | | |
| School Organ | 500 | | |
| Dev't Fee | 600 | | |
------------------------------------------------------
| Buttons: (ADD) (DEL) | | |
------------------------------------------------------
| | | 2 | |
i tried to edit the code to other index but it outputs 0 values.
for(var i= 2; i < theOddOnes.length; i++){ //rows
for(var l = 3; l < res.length; l++){
here is the output:
1st col 2nd col 3rd col 4th col
------------------------------------------------------
| | | 1st Inst | 2nd Inst |
| Athletic | 100 | 0 | |
| Socio-cultural | 200 | 0 | |
| Library | 300 | 0 | |
| Medical | 400 | 0 | |
| School Organ | 500 | 0 | |
| Dev't Fee | 600 | 0 | |
------------------------------------------------------
| Buttons: (ADD) (DEL) | | |
------------------------------------------------------
| | | 2 | |

Javascript: Fill in a grid, one section per second

I'm having trouble even getting started with this (pointers to tutorials, etc welcomed)
I'm looking to have a 10x10 grid (say 100px x 100px) that fills in one section every second until full (100 seconds):
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | etc...
One second:
|X| | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | etc...
Two seconds:
|X|X| | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | etc...
Thirteen seconds:
|X|X|X|X|X|X|X|X|X|X|
|X|X|X| | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | etc...
The fill in should be solid - or a simple icon (say a star of david)
I'm good with basic Javascript - but this is confounding me.

Here you go. I used jQuery for the selector. You can use any method you wish:
CSS:
.box {
width : 9%;
height : 20px;
border-left : 1px solid #000;
float : left;
margin-bottom : 5px;
text-align : center;
}
JS:
for (var i = 0; i < 100; i += 1) {
$('<div class="box" />').appendTo('body');
setTimeout(function(i) {
$('.box:empty:first').html('✡'); // Draw Star of David
}, (i + 1) * 1000);
}
Demo: http://jsfiddle.net/QnYNW/

Here, this should help you out, in plain JS:
Demo: http://jsbin.com/esucig/1/edit
HTML:
<table id="grid" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
...
</table>
CSS:
#grid, #grid td {
border: 1px solid black;
}
#grid td {
width: 20px;
height: 20px;
}
JS:
var colors = 'pink,cyan,orange,blue,red,lightgreen'.split(','),
cells = document.querySelectorAll('#grid td');
function colorize(cell) {
var color = colors.shift();
cell.style.backgroundColor = color;
colors.push(color);
}
[].forEach.call(cells, function(cell, i) {
setTimeout(function(){ colorize(cell) }, 500*i);
});

Here another more general solution:
var gridFiller = function(rows, cols, delay, fn) {
var currentRow = 0;
var currentCol = 0;
var runner = function() {
fn(currentRow, currentCol);
if (!(currentRow === rows-1 && currentCol === cols-1)) {
currentRow = ++currentRow % rows;
if (!currentRow) {
currentCol = ++currentCol % cols;
}
setTimeout(runner, delay);
}
};
setTimeout(runner, delay);
};
gridFiller(10, 10, 1000, function(x, y) {
/* Fill Grid Cell */
console.log(x + ' / ' + y);
});

you can use
timer = setInterval(functionThatFillsOnPosition, timeInMiliseconds);
and when you finish just call
clearInterval(timer)
see here http://www.w3schools.com/jsref/met_win_setinterval.asp

Something like this:
myInterval = setInterval((function () {
var count = 0;
return function () {
count++;
var row = Math.floor(count / 10);
var col = count - (row * 10);
// fill in with row & column here
if (count === 100) {
clearInterval(myInterval);
}
}
}()),1000);