JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyA2ALZEzUIEFXGEPQbHjT3Xn8ERkqEjS9o",
    authDomain: "newtest-be186.firebaseapp.com",
    databaseURL: "https://newtest-be186.firebaseio.com",
    storageBucket: "newtest-be186.appspot.com",
    messagingSenderId: "232867540730"
  };
  firebase.initializeApp(config);
</script>

<button onclick="pushtofb()">push</button>
<hr>
  var userX = 100;<br>
  var userY = 100;
  <hr>
  
Count: <span id="counter"></span>
<div id="">
include
  <ul id="include">
    
  </ul>
exclude
<ul id="exclude">
    
  </ul>
</div>

JavaScript

var ref = firebase.database().ref();

function pushtofb() {
        var florist = ref.child("florist").push({
          name: "Annan florist",
          description: "lorem	ipsum",
          other: "things"
        });

        refKey = florist.key;

        ref.child("coordinates/" + florist.key).set({
          key: florist.key,
          x: Math.floor(Math.random() * 150) + 60,
          y: Math.floor(Math.random() * 150) + 60,
          r: (Math.floor(Math.random() * 3) + 1)*10
        });
}

// Warning



ref.child("coordinates").once("value", function(snapshot) {
  var a = snapshot.numChildren();
  document.getElementById("counter").innerHTML = a;
});
  
ref.child("coordinates").on("child_added", function(snap){
	writeToDOM(snap.val());
});

function writeToDOM(data) {
	var userX = 100;
  var userY = 100;
  
  var maxX = data.x + data.r;
  var minX = data.x - data.r; 

  var maxY = data.y + data.r;
  var minY = data.y - data.r; 


	if (userX <= maxX && userX >= minX)
  {
    	//document.getElementById("include").innerHTML += "<li>X: " + data.x + " Y: " + data.y + ", R: "+ data.r + "</li>";
  }
  else
  {
    //document.getElementById("exclude").innerHTML += "<li>X: " + data.x + " Y: " + data.y + ", R: "+ data.r + "</li>";
  }
  console.log("a");
}