<nav>
        <h1>POSTS</h1>
        <select id="show-topic">
            <option >All Posts</option>
            <option >React Js</option>
            <option>Firebase</option>
            <option>Covid 19</option>
        </select>
        <button id="createBtn" hidden="true">Create</button>
        <div id="loginBtn" class="google-btn" >
            <div class="google-icon-wrapper">
                <img class="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
            </div>
            <p class="btn-text"><b>Sign in with google</b></p>
        </div>
    </nav>
    <main>
        <div id="user-card" hidden>
            <img id="user-img" src="http://unsplash.it/100/100">
            <div>
                <h4 id="username">Lorem ipsum dolor</h4>
                <button id="logoutBtn">Logout</button>
            </div>

        </div>

        <div id="posts-container">
        </div>
    </main>
    <div id="create-popup" hidden="true">
        <h1> Create a Post</h1>
        <form id="create-form">
            <input type="text" id="input-title" placeholder="Enter Title">
            <select id="input-topic">
                <option value="" disabled selected>Select your option</option>
                <option>React Js</option>
                <option>Firebase</option>
                <option>Covid 19</option>
            </select>
            <Textarea id="input-text" placeholder="Write your Post"></Textarea>
            <button type="submit">Post Now</button>
        </form>
    </div>
@import url(https://fonts.googleapis.com/css?family=Roboto:500);
.google-btn {
  width: 184px;
  height: 42px;
  background-color: #4285f4;
  border-radius: 2px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
  margin: auto 10px;
}
.google-btn .google-icon-wrapper {
  position: absolute;
  margin-top: 1px;
  margin-left: 1px;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background-color: #fff;
}
.google-btn .google-icon {
  position: absolute;
  margin-top: 11px;
  margin-left: 11px;
  width: 18px;
  height: 18px;
}
.google-btn .btn-text {
  float: right;
  margin: 11px 11px 0 0;
  color: #fff;
  font-size: 1.8ch;
  letter-spacing: 0.2px;
  font-family: "Roboto";
}
.google-btn:hover {
  box-shadow: 0 0 6px #4285f4;
}
.google-btn:active {
  background: #1669F2;
}

/* code above this is for google button */

nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:fit-content;
    display: flex;
    background:#F18F01;
    justify-content: space-between;
    z-index:2;
}
h1{
    margin: 20px;
    font-size: 4ch;
    font-family: monospace;
    z-index:1;
}
button{
    margin: 20px;
    font-size: 4ch;
    font-family: monospace;
}

main{
    margin-top:100px;
    margin-bottom:50vh;
}

#posts-container{
    display:grid;
    grid-gap: 5vh;
    grid-template-columns: repeat(1, 1fr);
    justify-content:space-evenly;
    padding: 10px;
}

@media only screen and (min-width: 700px) {
    #posts-container{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (min-width: 1100px) {
    #posts-container{
        grid-template-columns: repeat(3, 1fr);
    }
}


.post{
    position: relative;
    background:#EEE2DF;
    padding: 10px;
    height:fit-content;  
    border-radius: 20px;
    box-shadow: 0 0 20px -8px rgb(48, 48, 48);
}

#post-title{
    margin:0;
    font-size: 3ch;
    font-family: Arial, Helvetica, sans-serif;
}

.post-topic{
    margin:0;
    font-size: 2ch;
    font-family: Arial, Helvetica, sans-serif;
    
}

.post p{
    border-radius: 10px;
    height:150px;  
    overflow-y: scroll;
    text-overflow: ellipsis;
    padding:5px;
    background:#f5f2f2;
    font-size:2.5ch;
}
.post p::-webkit-scrollbar{
    width: 0;
}

#create-popup h1{
    width:100%;
    text-align:center;
    margin:20px 0;
    color:white;
}
#create-popup{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50vw;
    min-width: 400px;
    height:fit-content;
    background:#048BA8;
    padding:20px;
    border-radius:20px;
}

#create-form{
    display:flex;
    flex-direction:column;
}

#create-form input,select{
    margin: 10px 0;
    border-radius:10px;
    border:0;
    outline:0;
    padding:5px;
    font-size: 2.4ch;
    font-family: Arial;
}

#create-form textarea{
    font-size: 3ch;
    font-family:monospace;
    line-height:3ch;
    margin: 10px 0;
    height:200px;
    max-width:100%;
    border-radius:10px;
    border:0;
    outline:0;
    padding:10px;
}

/* code for user profile statrs here */
#user-card{
    position: relative;
    margin: 20px auto;
    width:300px;
    background:#EEE2DF;
    height:100px;
    border-radius:10px;
    box-shadow: 0 0 20px -10px rgb(48, 48, 48);
}
#user-card img{
    height: 100%;
    border-radius:10px;
}
#user-card div{
    position: absolute;
    top:0;
    right:0;
    width:200px;
    text-align:center;
    font-size: 2.7ch;
}
#user-card div h4{
    margin:10px 0;
}
#user-card div button{
    margin:10px 0;
    font-size:2.2ch;
}
const createBtn = document.getElementById('createBtn')
const popup = document.getElementById('create-popup')
const form = document.getElementById('create-form')
const database = firebase.database();


createBtn.onclick = (e) =>{
    e.preventDefault();
    popup.hidden = false
}




const inputTitle = document.getElementById('input-title');
const inputTopic = document.getElementById('input-topic');
const inputText = document.getElementById('input-text');
form.onsubmit = (e) =>{
    e.preventDefault();
    database.ref('/Posts2').push().set({
        'Title':inputTitle.value,
        'Topic':inputTopic.value,
        'Text': inputText.value,
        'uid':auth.currentUser.uid,
        'createdBy':auth.currentUser.displayName,
        'createdOn' : Date.now()
    })
    inputTitle.value = '';
    inputTopic.value = '';
    inputText.value = '';
    
    popup.hidden = true
}



const postContainer = document.getElementById('posts-container');
const drawPosts = (post) => {
    postContainer.innerHTML += `
        <div class="post">
        <marquee id="post-title">${post.Title}</marquee>
        <h6 class="post-topic">Topic: <span id="post-topic">${post.Topic}</span></h6>
        <h6 class="post-topic">by: <span id="post-topic">${post.createdBy}</span></h6>
        <p>${post.Text}</p>
        </div>
        
        `    
}



database.ref('/Posts2').on('value',(snapshot)=>{
    data = snapshot.val();
    postContainer.innerHTML = '';
    for (var PostID in data){drawPosts(data[PostID]);}
})

const showTopic = document.getElementById('show-topic');
showTopic.onchange = () => {
    database.ref('/Posts2').off();
    
    if(showTopic.value == 'All Posts'){
        database.ref('/Posts2').on('value',(snapshot)=>{
            data = snapshot.val();
            postContainer.innerHTML = '';
            for (var PostID in data){drawPosts(data[PostID]);}
        })
    }
    else{
        database.ref('/Posts2').orderByChild('Topic').equalTo(showTopic.value).on('value',(snapshot)=>{
            data = snapshot.val();
            postContainer.innerHTML = '';
            for (var PostID in data){drawPosts(data[PostID]);}
        })
    }
    
}

//Authentication Part Start here

const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
const loginBtn = document.getElementById('loginBtn');
const logoutBtn = document.getElementById('logoutBtn');

const userCard = document.getElementById('user-card');
const userImg = document.getElementById('user-img');
const username = document.getElementById('username');

loginBtn.onclick = () => auth.signInWithPopup(provider);
logoutBtn.onclick = () => auth.signOut();

auth.onAuthStateChanged(user=>{
    if(user){
        userCard.hidden = false;
        loginBtn.hidden = true;
        createBtn.hidden = false;
        userImg.src = user.photoURL;
        username.innerHTML = user.displayName;
        
    }
    else{
        userCard.hidden = true;
        loginBtn.hidden = false;
        createBtn.hidden = true;
    }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.