anproghub/firestore-increment-decrement.html

## firestore-increment-decrement.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>firestore</title>
  </head>
  <body>
    <p>Number of Downloads</p>
    <span id="countSpan">Please wait..</span>
    <button id="incBtn" disabled>Increment</button>
    <button id="decBtn" disabled>Decrement</button>

    <script type="module">
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js";

      const firebaseConfig = {
        apiKey: "AIzaSyDxQG-qFShtKApQWVxnZ9NjF4dLkLb0krg",
        authDomain: "muneck-tom.firebaseapp.com",
        databaseURL: "https://muneck-tom-default-rtdb.firebaseio.com",
        projectId: "muneck-tom",
        storageBucket: "muneck-tom.appspot.com",
        messagingSenderId: "1095977399482",
        appId: "1:1095977399482:web:7b612de0cb4a23b1677e83",
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);

      import {
        getDatabase,
        ref,
        child,
        get,
        update,
      } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";

      const db = getDatabase();

      // Reference to the counter in the database
      let span = document.getElementById("countSpan");
      let inc = document.getElementById("incBtn");
      let dec = document.getElementById("decBtn");
      let countVariable;

      window.onload = function () {
        const dbRef = ref(db);
        get(child(dbRef, "Counter")).then((snapshot) => {
          countVariable = Number(snapshot.val());
          span.innerHTML = countVariable;
          ButtonEnable();
        });
      };

      function IncDecCounter() {
        ButtonDisable();
        const dbRef = ref(db);
        get(child(dbRef, "Counter")).then((snapshot) => {
          countVariable = Number(snapshot.val());

          if (this.id == "incBtn") {
            countVariable++;
          } else {
            countVariable--;
          }

          update(ref(db, "/"), { Counter: countVariable });

          span.innerHTML = countVariable;
          ButtonEnable();
        });
      }

      function ButtonEnable() {
        inc.disabled = false;
        dec.disabled = false;
      }

      function ButtonDisable() {
        inc.disabled = true;
        dec.disabled = true;
      }

      inc.addEventListener("click", IncDecCounter);
      dec.addEventListener("click", IncDecCounter);
    </script>
  </body>
</html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>firestore</title>
	</head>
	<body>
	<p>Number of Downloads</p>
	<span id="countSpan">Please wait..</span>
	<button id="incBtn" disabled>Increment</button>
	<button id="decBtn" disabled>Decrement</button>

	<script type="module">
	import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js";

	const firebaseConfig = {
	apiKey: "AIzaSyDxQG-qFShtKApQWVxnZ9NjF4dLkLb0krg",
	authDomain: "muneck-tom.firebaseapp.com",
	databaseURL: "https://muneck-tom-default-rtdb.firebaseio.com",
	projectId: "muneck-tom",
	storageBucket: "muneck-tom.appspot.com",
	messagingSenderId: "1095977399482",
	appId: "1:1095977399482:web:7b612de0cb4a23b1677e83",
	};

	// Initialize Firebase
	const app = initializeApp(firebaseConfig);

	import {
	getDatabase,
	ref,
	child,
	get,
	update,
	} from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";

	const db = getDatabase();

	// Reference to the counter in the database
	let span = document.getElementById("countSpan");
	let inc = document.getElementById("incBtn");
	let dec = document.getElementById("decBtn");
	let countVariable;

	window.onload = function () {
	const dbRef = ref(db);
	get(child(dbRef, "Counter")).then((snapshot) => {
	countVariable = Number(snapshot.val());
	span.innerHTML = countVariable;
	ButtonEnable();
	});
	};

	function IncDecCounter() {
	ButtonDisable();
	const dbRef = ref(db);
	get(child(dbRef, "Counter")).then((snapshot) => {
	countVariable = Number(snapshot.val());

	if (this.id == "incBtn") {
	countVariable++;
	} else {
	countVariable--;
	}

	update(ref(db, "/"), { Counter: countVariable });

	span.innerHTML = countVariable;
	ButtonEnable();
	});
	}

	function ButtonEnable() {
	inc.disabled = false;
	dec.disabled = false;
	}

	function ButtonDisable() {
	inc.disabled = true;
	dec.disabled = true;
	}

	inc.addEventListener("click", IncDecCounter);
	dec.addEventListener("click", IncDecCounter);
	</script>
	</body>
	</html>