<div>Chat</div>
<div id="div1">
	<div id="chat"></div>
	<div id="form">
		<form id="message">
			<input type="text" placeholder="your message" autocomplete="off" />
			<input type="submit" value="Submit" />
		</form>
	</div>
</div>
<div id="div2">
	<p>To simplify things: email: abc@d.com pass: 12345678</p>
	<form id="sign">
		<input type="email" placeholder="email address" name="email" />
		<input type="password" placeholder="password" name="password" />
		<input type="submit" value="Login" />
	</form>
</div>
@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Patrick Hand", cursive;
}

body {
	background-color: #42275a;
	font-size: 1.35rem;
	width: 100%;
	height: 100vh;
	color: #fff;
}

div {
	height: 10vh;
	padding: 20px;
	color: #fff;
}
::-webkit-scrollbar {
	width: 0;
}

#chat {
	width: 100%;
	height: 90vh;

	overflow: scroll;
}

#div1,
#div2 {
	min-height: 80vh;
	display: flex;
	display: none;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}

#div2 {
	display: flex;
	justify-content: center;
	align-items: center;
}

input,
button {
	padding: 10px;
	margin: 10px;
	border: 0;
}

input[type="submit"] {
	background-color: #4ca1af;
	color: #fff;
}

input[type="text"] {
	display: inline-block;
	width: 60vw;
}
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js";
import {
	getDatabase,
	set,
	ref,
	onValue,
	push
} from "https://www.gstatic.com/firebasejs/9.6.7/firebase-database.js";
import {
	getAuth,
	signInWithEmailAndPassword
} from "https://www.gstatic.com/firebasejs/9.6.7/firebase-auth.js";

const firebaseConfig = {
	apiKey: "AIzaSyCV_F7v4dCPhzP49YubWExfXls-8WXsDFw",
	authDomain: "somesiteyoulike.firebaseapp.com",
	projectId: "somesiteyoulike",
	storageBucket: "somesiteyoulike.appspot.com",
	messagingSenderId: "1087094860956",
	appId: "1:1087094860956:web:8bd607b6747bbe00aed159"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth();

const mess = document.querySelector("#message");
const chat = document.querySelector("#chat");
const sign = document.querySelector("#sign");
const div1 = document.querySelector("#div1");
const div2 = document.querySelector("#div2");

sign.addEventListener("submit", (e) => {
	e.preventDefault();
	signInWithEmailAndPassword(auth, e.target[0].value, e.target[1].value).then(
		(userc) => {
			div1.style.display = "flex";
			div2.style.display = "none";
		}
	);
});

mess.addEventListener("submit", function (e) {
	e.preventDefault();
	const postListRef = ref(db, "posts");
	const newPostRef = push(postListRef);
	set(newPostRef, {
		message: e.target[0].value
	});
});

const dbRef = ref(db, "posts");

onValue(
	dbRef,
	(snapshot) => {
		const p = document.createElement("p");
		let html = "";
		snapshot.forEach((childSnapshot) => {
			const childData = childSnapshot.val();
			let content = `<p>${childData.message}</p>`;
			html += content;
		});
		chat.innerHTML = html;
	},
	{
		onlyOnce: false
	}
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.