DEV Community

Olatunji Ayodele Abidemi
Olatunji Ayodele Abidemi

Posted on

System with real - time data using Javascript and Firebase

HTML:

<input id="username" type="text" placeholder="Username">
<input id="email" type="email" placeholder="Email">
<button id="create-user">Create User</button>

<div id="user-list"></div>
Enter fullscreen mode Exit fullscreen mode

JavaScript:

const createUserButton = document.getElementById('create-user');
const userListDiv = document.getElementById('user-list');

createUserButton.addEventListener('click', createUser);

function createUser() {
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;

  // Create a new user in Firebase Realtime Database
  firebase.database().ref('users').push({
    username,
    email
  });
}

// Listen for changes to the users data in real-time
firebase.database().ref('users').on('child_added', (data) => {
  const user = data.val();
  const userElement = document.createElement('div');
  userElement.innerHTML = `${user.username} (${user.email})`;
  userListDiv.appendChild(userElement);
});
``


input a username and email, and a button to create a new user. When the button is clicked, it creates a new user in Firebase Realtime Database. The code also listens for changes to the users data in real-time, and updates the user list div with the new user information.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)