JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Debug
<input id='buildings' /> <input id='build' type='button' value='Build...' /> <br/><br/> -->
<div id="loc" style="color:white"></div>
<div id='area' style='height: 100%; width: 100%; '>
</div>
CSS
body
{
background: black;
}
.b
{
background-color: black;
float: left;
}
.f
{
width: 100px;
background-color: black;
}
.w
{
height: 10px;
width: 10px;
margin: 2px;
background-color: Red;
float: left;
}
JavaScript
DrawBuildings();
//Building Constructor
function Building()
{
this.height = Math.floor((Math.random()+1)*12);
this.width = Math.floor((Math.random()+1)*4);
}
//Create a building
function DrawBuilding(building)
{
var b = "<div class='b'>";
//Build Building
for(i = 0; i < building.height; i++)
{
b += "<div class='f'>";
for(j = 0; j < building.width; j++)
{
b += '<div class="w" onClick="show('+i+','+j+')"></div>';
}
b += "</div>";
}
b += "</div>";
$("#area").append(b);
}
function show(i,j) {$('#loc').html(i + ' - ' + j)}
// Debug
//$('#build').click(function()
//{
// DrawBuildings();
//});
//Draws the Buildings
function DrawBuildings()
{
//var n = parseInt($("#buildings").val());
var n = Math.floor($(window).width()/ 100);
for(l = 0; l<n; l++)
{
DrawBuilding(new Building());
}
FlattenBuildings();
ColorWindows();
}
//Flattens out Buildings
function FlattenBuildings()
{
$('.b').each(function()
{
$(this).css('margin-top',GetTallestBuilding()-$(this).height());
});
}
//Colors the Windows
function ColorWindows()
{
var cs =["#080808","#1E1E1F","#4A4A4A","#6E6E6E","#525557","#86888A","#ADADAD","#DBDBDB"];
$('.w').each(function()
{
$(this).css('background-color',cs[Math.floor((Math.random())*cs.length)]);
});
}
//Gets the tallest building
function GetTallestBuilding()
{
var max = -1;
$(".b").each(function() {
var h = $(this).height();
max = h > max ? h : max;
});
return max;
}