JSFiddle - React, Tailwind, and code Playground

by Chris Moore

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

CSS

body {
  margin: 0;
}

.star {
  position: absolute;
  height: 1px;
  width: 1px;
  background-color: #FFF;
}

.star_container {
  display: inline-block;
  background-color: #000;
  margin: 0;
  vertical-align: top;
  position: relative;
}

JavaScript

var minNumber = 0;
var maxNumber = 15;

function randomNumberFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomPointInSpace(a, b, c, d) {
  var e = randomNumberFromRange(a, b);
  var f = randomNumberFromRange(c, d);
  var locations = new Array();
  locations['x'] = e;
  locations['y'] = f;
  return locations;
}

$(document).ready(function() {
  var height = $(window).height();
  var width = $(window).width();
  //console.log(height + ' ' + width);

  var h = height / 10;
  var w = width / 10;
  //console.log(h);
  //console.log(w);

  for (var i = 0, l = 10; i < l; i++) {
    for (var j = 0, m = 10; j < m; j++) {
      $("body").append('<div class="star_container"></div>');
    }
  }

  $('.star_container').each(function(i, obj) {
    var number_of_stars = randomNumberFromRange(minNumber, maxNumber);
    //console.log(number_of_stars);
    for (var k = 0; k < number_of_stars; k++) {
      $(this).append('<div class="star"></div>');
    }
    $(this).css('width', w);
    $(this).css('height', h);
  });

  $('.star').each(function(i, obj) {
    var position = randomPointInSpace(0, h, 0, w);
    $(this).css('top', position['x']);
    $(this).css('left', position['y']);
    //console.log('top:'+position['x']+' left:'+position['y']);
  });

});