The Code Including HTML and JavaScript

Below shows the source code including HTML and JavaScript for implementing the following application: 


<!DOCTYPE html>
<html lang="en">
 <head>
  <script src=
   "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <script src= "https://www.gstatic.com/firebasejs/3.7.4/firebase.js">
  </script>
  <title>Managing Firebase data</title>
 </head>

 <body>
  <center>Managing Firebase Data</center>
  <form id="contact">
   ID: <input type="text" size="3" id="ID" value="1" />
   Name: <input type="text" size="30" id="name" value="Poke Mon" />
   Email: <input type="email" size="30" id="email" value="poke@example.com" />
   <p id="result">[result]</p>

   <button type="submit" onClick="addUser( ); return false;">Add a user
   </button>   (required: ID, name, email)

   <button type="submit" onClick="showUser( ); return false;">Show a user
   </button>   (required: ID)

   <button type="submit" onClick="showAll( ); return false;">Show all users
   </button>

   <button type="submit" onClick="deleteUser( ); return false;">Delete a user
   </button>   (required: ID)

   <button type="submit" onClick="deleteDB( ); return false;">Delete the database
   </button>

   <button type="submit" onClick="updateUser( ); return false;">Update a user
   </button>   (required: ID)

   <button type="reset">Reset</button>
  </form>

  <script>
   // For Firebase JS SDK v7.20.0 and later, measurementId is optional
   const firebaseConfig = {
    apiKey: "AIzaSyDxv7m8s1SSWamfWnNVt0TXe9WO75QvDQI",
    authDomain: "fir-8-dd4ef.firebaseapp.com",
    databaseURL: "https://fir-8-dd4ef-default-rtdb.firebaseio.com",
    projectId: "fir-8-dd4ef",
    storageBucket: "fir-8-dd4ef.appspot.com",
    messagingSenderId: "6825335070",
    appId: "1:6825335070:web:5b4da332f1e2fc423d510f",
    measurementId: "G-0E1QNR5M6R"
   };

   // Initialize Firebase.
   firebase.initializeApp( firebaseConfig );
   var usersRef = firebase.database( ).ref( 'users/' );

   //
   // Add a user.
   //
   function addUser( ) {
    // Get the input values.
    var ID    = getInputVal( 'ID' );
    var name  = getInputVal( 'name' );
    var email = getInputVal( 'email' );
    firebase.database( ).ref( 'users/' + ID ).set( {
     name: name,
     email: email
    } );
    var out  = "Added: " + ID + ": " + name + ", " + email;
    document.getElementById( 'result' ).innerHTML = out;
    return( false );
   }

   //
   // Function to get form values
   //
   function getInputVal( input ) {
    return document.getElementById( input ).value;
   }

   //
   // Show a user.
   //
   function showUser( ) {
    var ID = getInputVal( 'ID' );
    var ref = firebase.database( ).ref( 'users/' + ID );
    ref.on( "value",
     function( snapshot ) {
      const data = snapshot.val( );
      var out  = "ID: " + ID + "Name: " + Object.values(data)[1];
          out += "Email: " + Object.values(data)[0];
      document.getElementById( 'result' ).innerHTML = out;
     },
     function ( error ) {
      document.getElementById( 'result' ).innerHTML = "Error"; }
    );
    return( false );
   }

   //
   // Show all users.
   //
   function showAll( ) {
    var ref = firebase.database( ).ref( 'users/' );
    ref.on( "value", snapshot => {
     var out = "";
     snapshot.forEach( child => {
      out += "ID: " + child.key;
      var ref1 = firebase.database( ).ref( 'users/' + child.key );
      ref1.on( "value", snapshot => {
       snapshot.forEach( child => {
        out += child.key + ": " + child.val( );
       } )
      } )
     } )
     document.getElementById( 'result' ).innerHTML = out;
    } )
    return( false );
   }

   //
   // Delete a user (delete is a reserved word).
   //
   function deleteUser( ) {
    var ID = getInputVal( 'ID' );
    var userRef = firebase.database( ).ref( 'users/' + ID );
    userRef.remove( );
    var out  = "User # " + ID + " deleted";
    document.getElementById( 'result' ).innerHTML = out;
    return( false );
   }

   //
   // Delete the database users (delete is a reserved word).
   //
   function deleteDB( ) {
    var userRef = firebase.database( ).ref( 'users/' );
    userRef.remove( );
    var out = "Database users deleted";
    document.getElementById( 'result' ).innerHTML = out;
    return( false );
   }

   //
   // Update a user.
   //
   function updateUser( ) {
    // Get the input values.
    var ID     = getInputVal( 'ID' );
    var name2  = getInputVal( 'name' );
    var email2 = getInputVal( 'email' );
    var name3  = "";
    var email3 = "";
    var ref = firebase.database( ).ref( 'users/' + ID );

    ref.on( "value",
     function( snapshot ) {
      const data = snapshot.val( );
      name3  = Object.values(data)[1];
      email3 = Object.values(data)[0];
      if ( name2  ) { name3  = name2;  }
      if ( email2 ) { email3 = email2; }
      ref.set( { name: name3, email: email3 } );
      var out  = ID + ": " + name3 + ", " + email3;
      document.getElementById( 'result' ).innerHTML = out;
     },
     function ( error ) {
      document.getElementById( 'result' ).innerHTML = "Error"; }
    )
    return( false );
   }
  </script>
 </body>
</html>




      “You cannot teach a man anything,    
      you can only help him find it within himself.”    
      ― Galileo