index.js

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js"
import { getDatabase, ref, push, onValue, remove } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js"

const appSettings = {
    databaseURL: "hhttps://addtocart-fa814-default-rtdb.firebaseio.com/"
}

const app = initializeApp(appSettings)
const database = getDatabase(app)
const shoppingListInDB = ref(database, "shoppingList")

const inputFieldEl = document.getElementById("input-field")
const addButtonEl = document.getElementById("add-button")
const shoppingListEl = document.getElementById("shopping-list")

// Fixed code to prevent rendering blank input as list items

addButtonEl.addEventListener("click", function() {
    let inputValue = inputFieldEl.value.trim(); // Trim input value
    
    if (inputValue !== '') { // Check for non-blank input
        push(shoppingListInDB, inputValue);
        clearInputFieldEl();
    }
});

onValue(shoppingListInDB, function(snapshot) {
    if (snapshot.exists()) {
        let itemsArray = Object.entries(snapshot.val());

        clearShoppingListEl();

        for (let i = 0; i < itemsArray.length; i++) {
            let currentItem = itemsArray[i];
            let currentItemID = currentItem[0];
            let currentItemValue = currentItem[1];

            // Check if currentItemValue is not empty before appending
            if (currentItemValue.trim() !== '') {
                appendItemToShoppingListEl(currentItem);
            }
        }
    } else {
        shoppingListEl.innerHTML = "No items here... yet";
    }
});

// Other functions remain unchanged


function clearShoppingListEl() {
    shoppingListEl.innerHTML = null
}

function clearInputFieldEl() {
    inputFieldEl.value = ""
}

function appendItemToShoppingListEl(item) {
    let itemID = item[0]
    let itemValue = item[1]
    
    let newEl = document.createElement("li")
    
    newEl.textContent = itemValue
    
    newEl.addEventListener("click", function() {
        let exactLocationOfItemInDB = ref(database, `shoppingList/${itemID}`)
        
        remove(exactLocationOfItemInDB)
    })
    
    shoppingListEl.append(newEl)
}