Ecrire dans la Base de donnée FireBase RealTime

Bonjour,

je me suis resolut à solliciter une aide pour essayer d'evoluer dans mon apprentissage..
Mon objectif est d'apprendre à creer une Web Ap en utilisant Node.js et Firebase.
apres de multiples tutoriel, je me retrouve completement desesperer, j'ai un code qui n'ecrit pas dans la base de donné, j'ai tout essayer et je ne vois pas ce qui est mal fait.
Aussi, je transmet ici une version simplifier du code, je penses aue si il est resolut a ce niveau je pourrais faire avec un peu plus de données.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const fName = document.getElementById('firstN');
const sName = document.getElementById('secN');
const btn = document.getElementById('btn-set');
const upbtn = document.getElementById('btn-update')
 
 
const database = firebase.database();
btn.addEventListener('click', (e) => {
    e.preventDefault();
 
    database.ref('/category' + fName.value).set({
        first: fName.value,
        sec: sName.value
 
    });
 
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      </head>
      <body>
 
      <div class="container">
        <h1>Administrator</h1>
        <br>
        <div class="form-group">
            <label for="usr">Name:</label>
            <input type="text" class="form-control" id="firstN">
          </div>
          <div class="form-group">
            <label for="pwd">second name</label>
            <input type="text" class="form-control" id="secN">
          </div>
 
          <button type="button" class="btn btn-primary btn-block" id="btn-set">set</button>
 
          <button type="button" class="btn btn-primary btn-block" id="btn-update">update</button>
      </div>
 
      </body>
      <script type="module" src="https://www.gstatic.com/firebasejs/6.3.1/firebase-app.js"></script>;
       <script type="module" src="https://www.gstatic.com/firebasejs/6.3.1/firebase-database.js"></script>;
      <script type="module">
        // Import the functions you need from the SDKs you need
function initializeApp(){
          // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries
 
        // Your web app's Firebase configuration
        const firebaseConfig = {
          apiKey: "************************",
          authDomain: "******************",
          databaseURL: "************************",
          projectId: "************************",
          storageBucket: "************************",
          messagingSenderId:"************************",
          appId: "************************",
        };
 
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
}
 
      </script>
      <script src="js/category.js"></script>
      </html>

qu'est ce qui peut etre mal saisit dans ce code, je cherches depuis des jours, je ne comprends pas !!!
la console ne me signale aucune erreure, et rien ne se passe apres avoir saisis les infos du formulaire.....

Je vous supplie de m'aider à comprendre !!!