<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Firebase Realtime Database - Client Side</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <main>
    <form>
        <label for="userId">User ID</label><br>
        <input type="text" name="userId" id="userId"><br>
        <label for="firstName">First Name</label><br>
        <input type="text" name="firstName" id="firstName"><br>
        <label for="lastName">Last Name</label><br>
        <input type="text" name="lastName" id="lastName"><br>  
        <label for="age">Age</label><br>
        <input type="number" name="age" id="age"><br>
        <button id="addBtn" class="btn waves-effect waves-light">Add</button>
        <button id="updateBtn" class="btn waves-effect waves-light">Update</button>
        <button id="removeBtn" class="btn waves-effect red darken-1">Remove</button>
    </form>
  </main>
  <script src="./functions.js"></script>
</body>
</html>
* {
    padding: 0;
    margin: 0;
}

main {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

form {
    width: 400px;
    border: solid 1px #EBEBEB;
    padding: 5rem;
}

button {
    margin-top: 2rem;
}
const userId = document.getElementById('userId');
const firstName = document.getElementById('firstName');
const lastName = document.getElementById('lastName');
const age = document.getElementById('age');
const addBtn = document.getElementById('addBtn');
const updateBtn = document.getElementById('updateBtn');
const removeBtn = document.getElementById('removeBtn');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.