Create a Facebook Post Box Clone in HTML CSS &amp; JavaScript - Coding

We will see how can we implement a Facebook post box clone with the help of HTML, CSS, and JavaScript.

A Facebook post is a message or update shared by a user on their profile or page. It typically includes text, photos, videos, or links. Users can tag locations, and friends, express feelings, and set privacy settings. Other users can react, comment, and share the post. It serves as a way to share updates, connect with friends, and engage with a wider audience.

Prerequisites:

Preview:

Screenshot-2024-01-23-122619

CDN Links:

<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>

Approach

Create the Facebook post box structure using HTML tags, like <main> and <section> tags for the create post containers, and <emoji-picker> to demonstrate how a typical emoji picker in a Facebook post will look like with corresponding classes and IDs attached to these elements.
Add the different styling properties to the post using classes, pseudo-classes such as ::before and::after, and elements that will define the padding, margin, font sizes to text, alignments, colors, etc to the specific elements.
In JavaScript, first, create a set of variables to store the textarea, post button, emoji picker, and the button to show or hide the emoji picker on click.
Attach an eventListener() to the textarea which will detect on input whether the textarea is empty or not. If it is empty, the post button will be disabled by default. Otherwise, the post button will be enabled since the user is writing a post message.
Similarly, attach another eventListener() to the emoji picker button which will toggle the visibility of the emoji picker on click.
Attach an eventListener() on the emoji picker itself which will append the emoji selected to the textarea using the insertText() function, which is a part of the inserted text at the cursor module from the node package manager (npm).
Attach an eventListener() on the post audience button which will change the audience to which this post should be visible to with appropriate radio buttons for selecting a particular choice.

Example: This example describes the basic implementation of a Facebook post box using HTML, CSS, and Javascript.

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"./style.css"> 
    <script type="module" src= 
"https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"> 
</script> 
    <title>Facebook Post Box Clone</title> 
</head> 

<body> 
    <main class="post"> 
        <div class="wrapper"> 
            <section class="create-post"> 
                <header class="header"> 
                    <h1>Create post</h1> 
                    <div class="cross-icon"> 
                        <div class="cross-icon-mark"></div> 
                    </div> 
                </header> 
                <div class="post-header"> 
                    <div class="profile-pic"></div> 
                    <div class="user-info"> 
                        <div class="full-name">GeeksforGeeks</div> 
                        <div class="post-audience"> 
                            <div class="friends-icon"></div> 
                            <span class="audience-text">Friends</span> 
                            <div class="drop-down"></div> 
                        </div> 
                    </div> 
                </div> 
                <div class="post-content"> 
                    <textarea name="post-desc" id="post-desc" 
                            cols="30" rows="5" 
                        placeholder="What's on you mind, Geek?"></textarea> 
                    <div class="emoji-picker"> 
                        <emoji-picker class="light"></emoji-picker> 
                        <i class="emoji" aria-label="Insert an emoji" 
                        role="img"></i> 
                    </div> 
                    <div class="add-to-your-post"> 
                        <span class="add-to-post-text">Add to your post</span> 
                        <div class="add-to-post-icons"> 
                            <div class="photo-video"></div> 
                            <div class="tag-people"></div> 
                            <div class="feeling-activity"></div> 
                            <div class="check-in"></div> 
                            <div class="gif"></div> 
                            <div class="live-video"></div> 
                        </div> 
                    </div> 
                    <button class="post-btn" disabled>Post</button> 
                </div> 
            </section> 
            <section class="post-audience-section"> 
                <header class="post-audience-header"> 
                    <div class="arrow-left-icon"></div> 
                    <h1>Post Audience</h1> 
                </header> 
                <div class="post-audience-content"> 
                    <h4>Who can see your post?</h4> 
                    <p class="your-post-text">Your post will show up 
                        in Feed, on your profile and in search results.</p> 
                    <p> Your default audience is set to Only me, 
                        but you can change the<br /> audience 
                        of this specific 
                        post.</p> 
                </div> 
                <div class="post-audience-options"> 
                    <div class="audience-option"> 
                        <div class="audience-option-left"> 
                            <div class="audience-option-icon earth"></div> 
                            <div class="audience-option-details"> 
                                <div class="audience-option-text">Public</div> 
                                <span class="audience-option-desc">Anyone on 
                                or off Facebook</span> 
                            </div> 
                        </div> 
                        <div class="audience-option-right"> 
                            <div class="radio-btn"> 
                                <input type="radio" name="audience-option-radio" 
                                    class="audience-option-radio"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="audience-option"> 
                        <div class="audience-option-left"> 
                            <div class="audience-option-icon user-group"></div> 
                            <div class="audience-option-details"> 
                                <div class="audience-option-text">Friends</div> 
                                <span class="audience-option-desc">Your friends 
                                on Facebook</span> 
                            </div> 
                        </div> 
                        <div class="audience-option-right"> 
                            <div class="radio-btn"> 
                                <input type="radio" name="audience-option-radio" 
                                    class="audience-option-radio"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="audience-option"> 
                        <div class="audience-option-left"> 
                            <div class="audience-option-icon user"></div> 
                            <div class="audience-option-details"> 
                                <div class="audience-option-text">Friends except...</div> 
                                <span class="audience-option-desc">Don't show 
                                to some friends</span> 
                            </div> 
                        </div> 
                        <div class="audience-option-right"> 
                            <div class="radio-btn"> 
                                <input type="radio" name="audience-option-radio" 
                                    class="audience-option-radio"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="audience-option"> 
                        <div class="audience-option-left"> 
                            <div class="audience-option-icon specific-user"></div> 
                            <div class="audience-option-details"> 
                                <div class="audience-option-text"> 
                                Specific friends</div> 
                                <span class="audience-option-desc">Only 
                                show to some friends</span> 
                            </div> 
                        </div> 
                        <div class="audience-option-right"> 
                            <div class="radio-btn"> 
                                <input type="radio" 
                                    name="audience-option-radio" 
                                    class="audience-option-radio"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="audience-option"> 
                        <div class="audience-option-left"> 
                            <div class="audience-option-icon lock"></div> 
                            <div class="audience-option-details"> 
                                <div class="audience-option-text">Only me</div> 
                            </div> 
                        </div> 
                        <div class="audience-option-right"> 
                            <div class="radio-btn"> 
                                <input type="radio" 
                                    name="audience-option-radio" 
                                    class="audience-option-radio"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="audience-option"> 
                        <div class="audience-option-left"> 
                            <div class="audience-option-icon gear"></div> 
                            <div class="audience-option-details"> 
                                <div class="audience-option-text">Custom</div> 
                                <span class="audience-option-desc">Include 
                                and exclude friends and lists</span> 
                            </div> 
                        </div> 
                        <div class="audience-option-right"> 
                            <div class="radio-btn"> 
                                <input type="radio" 
                                    name="audience-option-radio" 
                                    class="audience-option-radio"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="audience-option"> 
                        <div class="audience-option-left"> 
                            <div class="audience-option-icon star"></div> 
                            <div class="audience-option-details"> 
                                <div class="audience-option-text">Close 
                                friends</div> 
                                <span class="audience-option-desc">Your 
                                custom list</span> 
                            </div> 
                        </div> 
                        <div class="audience-option-right"> 
                            <div class="radio-btn"> 
                                <input type="radio" 
                                    name="audience-option-radio" 
                                    class="audience-option-radio"> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </section> 
        </div> 
    </main> 
    <script src="./script.js"></script> 
</body> 

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&amp;amp;display=swap');

body {
    font-family: 'Inter', sans-serif;
}

.post {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.wrapper {
    height: 30rem;
    transition: height 0.2s ease;
}

.wrapper.wrapper-active {
    height: 20rem;
}

.create-post {
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 1px grey;
    box-shadow: 0 0 5px 1px grey;

}

.header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 1.5rem;
}

.header::before,
h1,
.cross-icon {
    content: '';
    flex-basis: 100%;
}

.header::after {
    content: &amp;quot;&amp;quot;;
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -0.25rem;
    left: 0;
    background-color: rgb(193, 190, 190);
}

h1 {
    text-align: center;
}

.cross-icon {
    text-align: right;
}

.cross-icon-mark {
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 50%;
    background-image: url(https://static.xx.fbcdn.net/rsrc.php/v3/yY/r/fCbUcoRfiez.png);
    background-position: 3.5px -483.5px;
    background-size: 26px 1031px;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    display: inline-block;
}

.friends-icon {
    background-image: url(https://static.xx.fbcdn.net/rsrc.php/v3/yZ/r/4qsdCsLNqKi.png);
    width: 14px;
    height: 14px;
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    object-fit: cover;
    object-position: 50% 50%;
}

.drop-down {
    background-image: url(
https://static.xx.fbcdn.net/rsrc.php/v3/yY/r/fCbUcoRfiez.png);
    background-position: 0px -980px;
    background-size: 26px 994px;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    display: inline-block;
    transform: scale(1.1);
}

.post-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-pic {
    width: 3.5rem;
    height: 3.5rem;
    background-color: green;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 80%;
    border-radius: 50%;
}

.full-name {
    margin-bottom: 0.3rem;
}

.post-audience {
    cursor: pointer;
    background-color: #e4e6eb;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: space-around;
    padding: 0.25rem;
    border-radius: 5px;
}

.fa-sort-down {
    margin-bottom: 0.5rem;
}

.post-audience:hover {
    background-color: #d9dce3;
}

.post-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

textarea {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    width: 100%;
    border: none;
    resize: none;
    outline: none;
    line-height: 1.25;
}

.emoji-picker {
    text-align: right;
    margin-bottom: 1rem;
    position: relative;
}

emoji-picker {
    display: none;
    position: absolute;
    right: 0;
    top: -26rem;
    left: 65%;
}

.emoji {
    border-radius: 50%;
    cursor: pointer;
}

.add-to-your-post {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7rem;
    border: 1px solid rgb(193, 190, 190);
    padding: 1.25rem 1rem;
    border-radius: 5px;
}

.add-to-post-text {
    font-weight: bold;
}

.add-to-post-icons {
    display: flex;
    gap: 1.25rem;
}

.add-to-post-icons div {
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.photo-video {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yC/r/a6OjkIIE-R0.png);
}

.tag-people {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yC/r/MqTJr_DM3Jg.png);
}

.feeling-activity {
    background-image:
url(https://static.xx.fbcdn.net/rsrc.php/v3/yk/r/yMDS19UDsWe.png);
}

.check-in {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yy/r/uywzfiZad5N.png);
}

.gif {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yX/r/j0Jp-GpONWx.png);
}

.live-video {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yF/r/v1iF2605Cb5.png);
}

.post-btn {
    outline: none;
    border: none;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    padding: 0.75rem 0;
    margin-top: 1rem;
    font-family: 'Inter', sans-serif;
    background-color: #1b74e4;
    color: #ffffff;
    font-size: 1rem;
}

.post-btn:hover {
    background-color: rgba(27, 116, 228, 0.85);
}

.post-btn:disabled,
.post-btn[disabled] {
    cursor: not-allowed;
    background-color: #e4e6eb;
    color: #bdc1c5;
}

.post-audience-section {
    transform: translateY(-5rem);
    display: none;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 1px grey;
    box-shadow: 0 0 5px 1px grey;
}

.post-audience-header {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    align-items: center;
    padding-left: 1.5rem;
}

.post-audience-header::after {
    content: &amp;quot;&amp;quot;;
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -0.25rem;
    left: 0;
    background-color: rgb(193, 190, 190);
}

.arrow-left-icon {
    cursor: pointer;
    font-size: 1.5rem;
    color: #606770;
    background-image: 
 url(https://static.xx.fbcdn.net/rsrc.php/v3/yQ/r/1gFkxZXWOU8.png);
    background-position: 0px -182px;
    background-size: 26px 972px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    display: inline-block;
}

.fa-arrow-left {
    cursor: pointer;
    background-color: #e4e6eb;
    padding: 0.5rem 0.6rem;
    border-radius: 50%;
}

.fa-arrow-left:hover {
    background-color: #d9dce3;
}

.post-audience-content {
    padding: 1rem 1rem 0 1rem;
}

.post-audience-content h4 {
    margin: 0.25rem 0;
}

.your-post-text {
    margin: 0.5rem 0 1rem 0;
}

.post-audience-options {
    padding: 0 0.625rem 0.625rem 0.625rem;
    overflow-y: scroll;
    height: 15rem;
}

.audience-option {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem;
    border-radius: 10px;
}

.audience-option:hover {
    background-color: hsl(210, 12%, 97%);
}

.audience-option-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.audience-option-icon {
    font-size: 1.75rem;
    width: 36px;
    height: 36px;
    transform: scale(0.65);
}

.earth {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yT/r/0QOZ5Rw18zW.png);
}

.user-group {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/ym/r/GgYVAS1o2Dp.png);
}

.user {
    background-image:
url(https://static.xx.fbcdn.net/rsrc.php/v3/yf/r/_OLjeOMXK05.png);
}

.specific-user {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yg/r/xZG_j_BgiWu.png);
}

.lock {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yw/r/fxRwLKfcAmo.png);
}

.gear {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yB/r/417zloHnnzB.png);
}

.star {
    background-image: 
url(https://static.xx.fbcdn.net/rsrc.php/v3/yX/r/QryT_9DQQgy.png);
}


.audience-option-icon i {
    background-color: #e4e6eb;
    border-radius: 50%;
}

.fa-earth-asia {
    padding: 1rem;
}

.post-audience-section .fa-user-group {
    padding: 1rem 0.75rem;
}

.fa-user {
    padding: 1rem 1.1rem;
}

.fa-lock {
    padding: 1rem 1.1rem;
}

.fa-gear {
    padding: 1rem;
}

.fa-star {
    padding: 1rem 0.9rem;
}

.audience-option-text {
    font-weight: bold;
    margin-bottom: 0.15rem;
}

.audience-option-radio {
    transform: scale(1.5);
}

.audience-option.active {
    background-color: hsl(210, 12%, 94%);
}

JavaScript

const textarea = document 
    .querySelector('#post-desc'); 
const postBtn = document 
    .querySelector('.post-btn'); 
const postAudienceBtn = document 
    .querySelector('.post-audience'); 
const backBtn = document. 
    querySelector('.arrow-left-icon'); 
const createPostSection = document. 
    querySelector('.create-post'); 
const postAudienceSection = document. 
    querySelector('.post-audience-section'); 
const emojiBtn = document. 
    querySelector('.emoji'); 
const emojiPicker = document. 
    querySelector('emoji-picker'); 
const audienceOptions = document. 
    querySelectorAll(".audience-option"); 
const radioBtns = document. 
    querySelectorAll(".audience-option-radio"); 

document.body.style.overflowX = 'none'; 

textarea.addEventListener("input", () => { 
    if (textarea.value != '') 
        postBtn.disabled = false; 
    else
        postBtn.disabled = true; 
}) 
emojiBtn.addEventListener("click", () => { 
    if (emojiPicker.style.display == 'none') 
        emojiPicker.style.display = 'block'; 
    else
        emojiPicker.style.display = 'none'; 
}) 
emojiPicker.addEventListener('emoji-click', e => { 
    textarea.value += e.detail.unicode; 
}) 
postAudienceBtn.addEventListener('click', () => { 
    document.querySelector('.wrapper') 
        .classList.add('wrapper-active'); 
    postAudienceSection.style.display = 'block'; 
    createPostSection.style.display = 'none'; 
}) 
audienceOptions.forEach(option => { 
    option.addEventListener('click', e => { 
        if (!option.classList.contains('active')) { 
            option.classList.add('active'); 
            e.currentTarget.children[1] 
                .children[0].children[0].checked = true; 
        } 
        for (let i = 0; i < audienceOptions.length; i++) { 
            if (e.currentTarget != audienceOptions[i]) { 
                audienceOptions[i].classList 
                    .remove('active'); 
                radioBtns[i].checked = false; 
            } 
        } 
    }) 
}) 
backBtn.addEventListener('click', () => { 
    document.querySelector('.wrapper') 
        .classList.remove('wrapper-active'); 
    postAudienceSection.style.display = 'none'; 
    createPostSection.style.display = 'block'; 
})

Output:

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
API documentation in Postman: Purpose and Benefits
Initialize Python Dictionary with Keys and Values
Discharge of Contract : Meaning, Modes and Exceptional Cases
Callbacks vs Promises vs Async/Await
How to Access Dictionary Values in Python Using For Loop

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	16