DEV Community

Cover image for Blog with comments..
sudo-self
sudo-self

Posted on

Blog with comments..

Firebase SDK is plug and play

Blog with comments...

*consider rules with DB codepen is purely an example

initialize

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR DATABASE URL".
projectid: "YOUR_PROJECT_ID",
storageBucket: "YOUR_ STORAGE _BUCKET",
messaging Senderld: "YOUR_MESSAGING_SENDER_ID",
appld: "YOUR_APP_ID"
measurementld: "YOUR_ MEASUREMENT_ID"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

Enter fullscreen mode Exit fullscreen mode

read, write, and display comments

var database = firebase.database();

var commentsContainer = document.getElementById("comments-container");

function displayComments() {
  database.ref("comments").on("value", function (snapshot) {
    commentsContainer.innerHTML = "";
    snapshot.forEach(function (childSnapshot) {
      var comment = childSnapshot.val().text;
      var timestamp = new Date(childSnapshot.val().timestamp);

      var commentElement = document.createElement("div");
      commentElement.classList.add("comment");

      var commentTextElement = document.createElement("div");
      commentTextElement.classList.add("comment-text");
      commentTextElement.textContent = comment;
      commentElement.appendChild(commentTextElement);

      var timestampElement = document.createElement("div");
      timestampElement.classList.add("comment-timestamp");
      timestampElement.textContent = timestamp.toLocaleString();
      commentElement.appendChild(timestampElement);

      commentsContainer.appendChild(commentElement);
    });
  });
}

displayComments();

document
  .getElementById("comment-form")
  .addEventListener("submit", function (event) {
    event.preventDefault();
    var commentInput = document.getElementById("comment-input").value;
    if (commentInput.trim() !== "") {
      var newCommentRef = database.ref("comments").push();
      newCommentRef.set({
        text: commentInput,
        timestamp: firebase.database.ServerValue.TIMESTAMP
      });
      document.getElementById("comment-input").value = "";
    }
  });
Enter fullscreen mode Exit fullscreen mode

css to fit your style

body {
  font-family: Arial, sans-serif;
  background-color: #748b97;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 560px;
  margin: 14px auto;
  padding: 14px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: 8px;
}

#comments-container {
  margin-bottom: 14px;
}

.comment {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}

.comment-text {
  margin-bottom: 5px;
}

.comment-timestamp {
  color: #888;
  font-size: 0.9em;
}

#comment-form {
  display: flex;
}

#comment-input {
  flex: 1;
  margin-right: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}

Enter fullscreen mode Exit fullscreen mode

Blog with comments...

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more