IT izaicinājums m1raz#1

Sveiks,

Gribi pierādīt sev un citiem, ka vari/ proti? Okay than. No sākuma īss interduction kas tas ir.
Te IT jomas cilvēki mērās ar sava koda garumu, tīkla sarežğītību, dziņa ātrdarbību un no slavenību iCloud nozagtām nude-photo.

Noteikumi vienkārši. Jūms ir dots uzdevuma apraksts, atļautie rīki izmantošanai, termiņš.
Jauno izaicinājumu var veidot jebkurš, jebkad un neierobežotā skaitā. Attiecīgi, title norādot savu nickname un jūsu challenge kārtas numuru. Tādā veidā tēmas nosaukumi neatkartosies un varēs mierīgimierīigi izmantot meklētaju.

Pirms savas tēmas obligāti jāiekopē šie noteikumi, lai nav jāmekle “pirmo vampīru”!!!

Okay.

Uzdevums: ir ekrāns ar išķirtspēju FullHD. Tas atrodas pie sienas pagriezts pa 90° pa pulksteni (sanāk, ka, ja toolbar bija apakšā, tagad tas ir kreisajā malā). Tam netiek pielietota sistēmā iebuvētā pagriešanas funkcija.
Tev tam ekrānam jāizveido web-lapu, kas attēlos tabulu ar datiem visa ekrāna garumā (datus izdomā pats). Browserj: Google Chrome uz šo brīdi aktuāls update, bez plugin un ar fullscreen režīmu. Attiecīgi lai dati būtu salasāmi visai lapai jābūt pagrieztai pa 90°. Jāņem vērā, ka tabula nevar netrāpīt ekrāna ietvaros un tai jābūt redzamai un izplatītai pa visu ekrānu.

Atnākšu mājās parādīšu screen, lai būtu vairāk saprotams uzdevums.

Var lietot: HTML/ css/ js izpildei. visu pasauli info iegūšanai.
Termiņš: 1 week.

Have fun.

2 Likes

Izskatās interesanti. Pamēģināšu :smiley:

Un, kas tad mums šeit beidzās? Jau vairāk nekā nedēļa pagājusi… interesanti būtu pastīties.

Yeah. Bik nebij laika pieķerties. 15 minūtēs uzcepts šāds paslinks variants.
@Onii_chan, tad nu gaidu tavu variantu :D

<html>
	<head>
		<style>
		
			#myTable {
				transform:rotate(270deg);
			}
			
			#myTable {
				position: absolute;
				bottom: -260;
				left: 260; /* fix */
			}
			td{
				font-size: 800%;
			}
			
		</style>
	</head>
	<body>
		<table id="myTable">
			<tbody>
				<tr>
					<td>a</td>
					<td>1</td>
					<td>8</td>
				</tr>
				<tr>
					<td>b</td>
					<td>2</td>
					<td>9</td>
				</tr>
				<tr>
					<td>c</td>
					<td>3</td>
					<td>10</td>
				</tr>
				<tr>
					<td>d</td>
					<td>4</td>
					<td>11</td>
				</tr>
				<tr>
					<td>e</td>
					<td>5</td>
					<td>12</td>
				</tr>
				<tr>
					<td>f</td>
					<td>6</td>
					<td>13</td>
				</tr>
				<tr>
					<td>g</td>
					<td>7</td>
					<td>14</td>
				</tr>
			</tbody>
		</table>
		<div id="debug"></div>
	</body>
</html>
	<script>
		if(screen.width != 0){			
			var first_tr = document.getElementsByTagName('tr')[0];
			var cols = first_tr.childElementCount;
			var col_height = screen.height/cols;
			for(i = 0; i < cols; i++)
				first_tr.getElementsByTagName('td')[i].style.width = col_height + "px";
			var table = document.getElementsByTagName('tbody')[0];
			var rows = table.childElementCount;
			var row_width = screen.width / rows;
			var colors = ['red', 'green', 'blue', 'yellow', 'orange', 'brown'];
			for(i = 0; i < rows; i++){
				var tr = table.getElementsByTagName('tr')[i];
				for(n = 0; n < cols; n++){
					var r = Math.floor(Math.random() * 6);
					tr.getElementsByTagName('td')[n].style.height = row_width + "px";
					tr.getElementsByTagName('td')[n].style.background = colors[r];
				}
			}
			setInterval(function(){
				for(i = 0; i < rows; i++){
					var tr = table.getElementsByTagName('tr')[i];
					for(n = 0; n < cols; n++){
						var r = Math.floor(Math.random() * 6);
						tr.getElementsByTagName('td')[n].style.background = colors[r];
					}
				}
			},100);
		}
	</script>
4 Likes

pls use querySelector/querySelectorAll.
Also, DRY.

var first_tr = document.querySelector('tr');
var columns = first_tr.querySelectorAll('td');
var col_height = screen.height / columns.length;
columns.forEach((td) => {
	td.style.width = col_height + 'px';
});

var cols = columns.length;
var tbody = document.querySelector('tbody');
var rows = tbody.querySelectorAll('tr');
var row_width = screen.width / rows.length;
var colors = ['red', 'green', 'blue', 'yellow', 'orange', 'brown'];

function setCellStyles(setHeight = false)
{
	rows.forEach((tr) => {
		tr.querySelectorAll('td').forEach((td) => {
			var color = Math.floor(Math.random() * colors.length);
			td.style.background = colors[color];
			
			if (setHeight) {
				td.style.height = row_width + 'px';
			}
		});
	});
}

setCellStyles(true);
setInterval(setCellStyles, 100);
1 Like

Krāsu maiņa bija mana fīča, bet nu ,still works :D