Realtime database.

[mortal delta]

Can you give a screenshot of the code it seems a bit hard to understand this

[narrow shale]

Help me please, I have no idea why it doesn't work. Thank you

[real bay]

Issue 1: Missing or Incorrect databaseURL in Firebase Config
Ensure that you have a .env file created and that it contains a key value pair for your DATABASE_URL. If not, create a .env file and retrieve the URL from Firebase

Alternatively, you can replace the placeholder with the actual URL directly in your code at line 14

How to get the databaseURL:

1. Go to your Firebase project
2. Open Project Settings
3. Scroll to SDK setup and configuration
4. Copy the full firebaseConfig object (which includes apiKey, authDomain, databaseURL, etc.)
5. Remove any unnecessary fields and keep only what you need, particularly databaseURL

Issue 2: Missing remove in Firebase Import
You forgot to import the remove function from Firebase. Without this, calling remove() on the "dblclick" event will not work

import { getDatabase, ref, push, remove } from "firebase-database-url";

Issue 3: No Data Reading from Firebase
You're currently only writing to and deleting data from the Firebase database, but you're not reading it. This means your render() function never gets called.

To fix this, you need to listen for data changes using the onValue() method. This allows your app to react and render whenever the data updates

Issue 4: Improper HTML String Construction
You're mixing JavaScript and HTML without using backticks. In JavaScript, template literals must be enclosed in backticks (`) to support interpolation like ${leads[i]}

[narrow shale]

Thank you very much for your help

[narrow shale]

I have fixed everything but it still doesn't work. This is the fixed code:

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

const firebaseConfig = {
databaseURL:
"https://leads-tracker-app-37376-default-rtdb.europe-west1.firebasedatabase.app/",
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const referenceInDB = ref(database, "leads");

const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");
const deleteBtn = document.getElementById("delete-btn");

function render(leads) {
let listItems = "";
for (let i = 0; i < leads.length; i++) {
listItems += <li> <a target='_blank' href='${leads[i]}'> ${leads[i]} </a> </li> ;
}
ulEl.innerHTML = listItems;
}

onValue(referenceInDB, function (snapshot) {
const snapshotDoesExist = snapshot.exists();
if (snapshotDoesExist) {
const snapshotValues = snapshot.val();
const leads = Object.values(snapshotValues);
render(leads);
}
});

deleteBtn.addEventListener("dblclick", function () {
remove(referenceInDB);
ulEl.innerHTML = "";
});

inputBtn.addEventListener("click", function () {
push(referenceInDB, inputEl.value);
inputEl.value = "";
});

I am not able to find any error, also in firebase everything looks fine. However, this is the thing 😦 😦

[real bay]

Can you elaborate what is not working? and also provide ss

[wanton roost]

(Just a parenthetical note: If you wrap your code in triple backticks discord will display it as code and color it. After the first set of backticks you can specify the language (js, css, py, etc.). To end the code block close it with another set of triple backticks.)

```js
console.log("Js code");
```
will appear as

console.log("Js code");

[knotty escarp]

How did you escape it to not render as a codeblock ? I have posted this exact message to illustrate to others how to format but idk how to escape the backticks to show them what it should look like

[wanton roost]

Use \

Generally \ is used to escape special characters

Just type \ before the triple backticks

[knotty escarp]

Test:
```js
//testing
```

```js
//testing with only one \