Click Confetti HTML | ARTS 445: Net Art

 
<!DOCTYPE html>
<head>
  <title>Click Confetti</title>
 
  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }
 
    body {
        font-size:180%;
        font-family:"Open Sans";
    }
 
    .dot {
      position:absolute;
      height:30px;
      width:30px;
      background-color:black;
      border-radius:50%;
      opacity: 0.5;
    }
  </style>
 
  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body>
 
<!-- firebase interaction code -->
<script>
  var j = jQuery.noConflict();
 
  function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
   

  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCdUZeJTXzbqEXfVzskUFOoY-Mqh9TnyvU",
    authDomain: "click-function-test.firebaseapp.com",
    databaseURL: "https://click-function-test.firebaseio.com",
    projectId: "click-function-test",
    storageBucket: "click-function-test.appspot.com",
    messagingSenderId: "257165968755"
  };

 
  firebase.initializeApp(config);
 
  var db = firebase.database();
  var dot = db.ref("dot");
  var erase = db.ref("erase");
 
  dot.on('value',function(dataSnapshot) {
    var rawData = dataSnapshot.val(); // "300,100"
    var xyData = rawData.split(',');
    var x = xyData[0];
    var y = xyData[1];
 
    var newDot = j("<div class='dot'></div>");
    newDot.css("left", x+"px");
    newDot.css("top", y+"px");
    newDot.css("background-color",getRandomColor);
    j('#container').append(newDot);
  });
 
  erase.on('value',function() {
    j('.dot').remove();
  });
 
 
  // runs when the page is fully loaded
  j(document).ready(function() {
    j(document).keypress(function() {
      erase.set(Math.random());
    });
 
 
 
    j(document).click(function(e) {
      var position = e.pageX+","+e.pageY;
 
      dot.transaction(function() {
        return position;
      });
 
    });
  });
 
 
</script>
 
  <!-- finally, our HTML -->
  <div id="container">
    <div id="log"></div>
  </div>
 
</body>
</html>