Untitled

<!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">
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
    <title>Firebase sample</title>
</head>

<body>
    <h1>Firebase sample</h1>
    <form>
        <input id="product_name" type="text" placeholder="Name" />
        <input id="product_quantity" type="number" placeholder="Quantity" />
        <input id="product_price" type="text" placeholder="Price" />
        <input type="submit" onClick="saveData()" />
    </form>
    <button onclick="getData()">Get data</button>

    <div id="product_list">

    </div>
</body>

</html>

<script>
    let productName = '';
    let productQuantity = '';
    let productPrice = '';

    const firebaseConfig = {
        apiKey: "AIzaSyCu_QX36Bc7UE6xqky8B1o_i41C1gknCjI",
        authDomain: "teste-formulario-dd4a7.firebaseapp.com",
        databaseURL: "https://teste-formulario-dd4a7.firebaseio.com/",
        projectId: "teste-formulario-dd4a7",
        storageBucket: "teste-formulario-dd4a7.appspot.com",
        messagingSenderId: "547193234209",
        appId: "1:547193234209:web:87cae36716b3b61a"
    };

    firebase.initializeApp(firebaseConfig);

    const saveData = () => {
        event.preventDefault();
        const productName = document.getElementById('product_name');
        const productQuantity = document.getElementById('product_quantity');
        const productPrice = document.getElementById('product_price');
        const dbRef = firebase.database().ref();
        const productsRef = dbRef.child('products');

        productsRef.push().set({
            name: productName.value,
            quantity: productQuantity.value,
            price: productPrice.value,
        });
        alert('Product added successfully =D');

        productName.value = '';
        productQuantity.value = '';
        productPrice.value = '';
    };

    const getData = () => {
        const productList = document.getElementById('product_list');
        const ref = firebase.database().ref('products');

        ref.on("value", (snapshot) => {
            console.log(snapshot.val());
        }, function (errorObject) {
            console.log("The read failed: " + errorObject.code);
        });

    };
</script>