Simple Firebase Comments

Developer
Josh Bivens
Size
3,695 Kb
Views
26,312
  1. Simple Firebase Comments Previews
  2. Simple Firebase Comments HTML Codes
  3. Simple Firebase Comments CSS Codes
  4. Simple Firebase Comments JS Codes

How do I make an simple firebase comments?

Credit to http://codepen.io/mstone6769/pen/zvObRY.November 20th: Added time-stamp feature.. What is a simple firebase comments? How do you make a simple firebase comments? This script and codes were developed by Josh Bivens on 01 October 2022, Saturday.

Simple Firebase Comments Previews
IQ Test

Simple Firebase Comments - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Firebase Comments</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container"> <div class="comment-box"> <div class="comment-form"> <div class="header">Add Your Comment</div> <form> <div> <input type="text" id="name" placeholder="Name"/> </div> <div> <textarea id="comment" rows="3" cols="30" placeholder="Comment"></textarea> </div> <button type="submit">COMMENT</button> </form> </div> <div> <h4 class="header">Comments</h4> <div id="comments"></div> </div> <div class="footer"><hr><p>&copy 2016 by Josh Bivens</p></div> </div> </div>
</body> <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Firebase Comments - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,600);
body { font-family: "Roboto", sans-serif; height: 100%; margin-bottom: 50px; background: cadetblue;
}
h4 { margin: 5px 20px;
}
span { float: right; margin-right: 10px; font-size: 12px; font-weight: 300;
}
hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.container { display: flex; justify-content: center;
}
.comment-box { width: 85%; margin-top: 50px; background: #fff; padding: 5px; display: flex; justify-content: center; flex-direction: column;
}
.comment-box p { margin: 0 30px 15px; font-weight: 300; color: #333; word-wrap: break-word; background: #EEE; padding: 5px 10px;
}
.header { margin: 15px 20px; font-size: 27px; font-weight: 600;
}
form { margin: 10px 10px 30px 10px;
}
form ::-webkit-input-placeholder { color: #CCC; font-weight: 300;
}
input[type="text"], textarea { margin: 5px 10px; outline: none; background: #efefef; border: 0; padding: 10px;
}
textarea { resize: none; width: 85%;
}
input[type="text"] { width: 50%; margin-bottom: 15px;
}
button { font-weight: 400; margin: 12px 0 0 10px; border: 0; color: #fff; font-size: 15px; background: #D3775D; padding: 12px 20px 12px 20px; text-decoration: none; transition: all 0.2s ease;
}
button:hover { background: #C15322;
}
.footer p { float: right; font-size: 13px; margin-bottom: 10px; background: #FFF;
}

Simple Firebase Comments - Script Codes JS Codes

const ref = new Firebase("https://radiant-torch-3037.firebaseio.com/");
const form = document.querySelector("form");
form.addEventListener("submit", postComment);
const timeStamp = () => { let options = { month: '2-digit', day: '2-digit', year: '2-digit', hour: '2-digit', minute:'2-digit' }; let now = new Date().toLocaleString('en-US', options); return now;
};
function postComment(e) { e.preventDefault(); let name = document.getElementById("name").value; let comment = document.getElementById("comment").value; if (name && comment) { ref.push({ name: name, comment: comment, time: timeStamp() }); } document.getElementById("name").value = ''; document.getElementById("comment").value = '';
};
ref.on("child_added", function(snapshot) { let comment = snapshot.val(); addComment(comment.name, comment.comment, comment.time);
});
const addComment = (name, comment, timeStamp) => { let comments = document.getElementById("comments"); comments.innerHTML = `<hr><h4>${name} says<span>${timeStamp}</span></h4><p>${comment}</p>${comments.innerHTML}`;
}
Simple Firebase Comments - Script Codes
Simple Firebase Comments - Script Codes
Home Page Home
Developer Josh Bivens
Username joshbivens
Uploaded October 01, 2022
Rating 3.5
Size 3,695 Kb
Views 26,312
Do you need developer help for Simple Firebase Comments?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josh Bivens (joshbivens) Script Codes
Name
React Palette Picker
Vue Habit Tracker
Vue Progress Bar
Hours
Currency Conversion Cards
Fun Facts
Alarm Clock UI
Vue Shopping Cart
Material Form
Todos in Vue.js
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!