Javascript: Fill in a grid, one section per second - javascript

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

Related

How to combine multiple queries from sqlite3 table from node.js

I just started with sqlite3 and was stuck on using (union) and combining multiple queries, is there a proper way of doing this
I am dealing with the following data
sql table =>
account |ledger_num | date_from | interest | name | loan | loan_type
____________|___________|_______________|_______________|___________|_________|____________________
Book_1 | HP2269 | 2017-03-31 | 15 | Samuel | 120 | type_a
Book_3 | HP2236 | 2020-03-31 | -20 | bob | 190 | type_a
Book_1 | HP2269 | 2019-04-01 | 250 | Samuel | 1500 | type_b
Book_3 | HP2236 | 2019-04-01 | -3 | bob | 36 | type_b
Book_2 | L01 | 2020-03-31 | 16 | josh | 95 | type_a
Book_1 | HP2269 | 2022-04-01 | 400 | Samuel | 4050 | type_c
and this is what I am trying to do
var sql_1 = `SELECT SUM(loan) ,SUM(interest) FROM allYearAllAcc WHERE (account = 'Book_1' AND date_from > '2018-03-31')`
var sql_2 = `SELECT SUM(interest) FROM allYearAllAcc WHERE (account = 'Book_2' AND date_from > '2017-04-01' AND interest < 0)`
var sql_3 = `SELECT SUM(loan) FROM allYearAllAcc WHERE (account = 'Book_3' AND date_from < '2022-04-01')`
temp_db.all(``+sql_1+`UNION`+sql_2+`UNION`+sql_3+``,(err,data)=>{
console.log(data)
})
this clearly isn't working I want this to appear as an json array which I have to use it in my code

Use conditional aggregation with a single query on your table:
SELECT
SUM(CASE WHEN account = 'Book_1' AND date_from > '2018-03-31'
THEN loan ELSE 0 END) AS loan1,
SUM(CASE WHEN account = 'Book_1' AND date_from > '2018-03-31'
THEN interest ELSE 0 END) AS interest1,
SUM(CASE WHEN account = 'Book_2' AND date_from > '2017-04-01' AND interest < 0
THEN interest ELSE 0 END) AS interest2,
SUM(CASE WHEN account = 'Book_3' AND date_from < '2022-04-01'
THEN loan ELSE 0 END) AS loan2
FROM allYearAllAcc;

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

Can't remove space between vertical elements

I'm trying to code an infinite scrolling monster (like endless.horse but without jQuery). But it keeps showing spaces in between elements when scrolling and it doesn't look that good. Doing line-height will just smosh the lines together into a weird blob and achieve nothing. White space does nothing to stop the spaces. What should I do?
window.onscroll = function() {hello()};
function hello() {
var para = document.createElement("pre");
var node = document.createTextNode(` | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
`);
para.appendChild(node);
var element = document.getElementById("hello");
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
}
<html>
<head>
<title>My first three.js app</title>
<script src="myScript.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#hello
float: left;
padding: 0;
margin: 0;
display: inline-block;
}
pre {
padding: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<pre>
_-~~~-_ _-~~~-_
/~ ~\ : , \
' ~ , |: :
{ /~~\ :--~""""\.: :
\ (... : /^\ /^\ ;
~\_____ | | | |:~
/ |__O|_|_O|;
( / O \
\ ( `\_______/)
`\ \ /
) ~-------~'\
/ \
: ||
| | ||
| |.======[]==+'|
(~~~~) | |~)
/ \ | | \
~\ \___/)______/^\__|_/
`\ // | | | |
`\__//' | | | |
~~ | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
</pre>
<div id="hello">
</div>
</body>
</html>

add got pre{margin:0;}
window.onscroll = function() {hello()};
function hello() {
var para = document.createElement("pre");
var node = document.createTextNode(` | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
`);
para.appendChild(node);
var element = document.getElementById("hello");
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
}
pre{margin:0;}
<html>
<head>
<title>My first three.js app</title>
<script src="myScript.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#hello
float: left;
padding: 0;
margin: 0;
display: inline-block;
}
pre {
padding: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<pre>
_-~~~-_ _-~~~-_
/~ ~\ : , \
' ~ , |: :
{ /~~\ :--~""""\.: :
\ (... : /^\ /^\ ;
~\_____ | | | |:~
/ |__O|_|_O|;
( / O \
\ ( `\_______/)
`\ \ /
) ~-------~'\
/ \
: ||
| | ||
| |.======[]==+'|
(~~~~) | |~)
/ \ | | \
~\ \___/)______/^\__|_/
`\ // | | | |
`\__//' | | | |
~~ | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
</pre>
<div id="hello">
</div>
</body>
</html>

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

Categories