Facebook Post Reactions Example
Create post reaction as facebook using html, css and Js.
For reaction buttons we have used image and have mapped different areas of image using map tag. We have mapped first 3 reactions button but you can add more.
Html Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #aaa;
font-family: monospace;
max-width: 400px;
margin: 0 auto;
}
.post__container {
background-color: #fff;
border-radius: 10px;
margin: 20px;
}
.button__container {
display: flex;
justify-content: space-between;
margin-left: 5%;
margin-right: 5%;
}
.post__header {
padding: 15px;
display: flex;
flex-direction: column;
}
.post__header img {
height: 50px;
width: 50px;
border-radius: 50%;
}
.post__user {
display: flex;
flex-direction: row;
align-items: center;
}
.post__time {
font-size: 10px;
}
.post__user-details {
margin-left: 8px;
}
.post__body {
padding-left: 15px;
padding-right: 15px;
border-bottom: 1px solid #aaa;
text-align: justify;
}
.post__footer {
padding: 10px;
}
.btn-fb-reactions {
width: 100px;
height: 33px;
border: none;
}
.btn-fb-reactions:hover {
background-color: #aaa;
color: white;
}
.post__like-reaction-img {
width: 100%;
position: absolute;
bottom: -11px;
border-radius: 35px;
border: 1px solid #aaa;
}
.post__activities {
position: relative;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="article__container">
</div>
<script>
let postJson = '{ "data": [ { "user": { "name": "Habib", "img": "fb-user.jpg" }, "post": { "id": "post-5864758", "time": "10:14 AM", "text": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum quo ut nulla deleniti incidunt tempora est voluptates delectus necessitatibus a officiis ipsa minus illo, blanditiis officia harum aliquid quisquam nihil.", "reactions": { "likes": 18, "loves": 0, "hahas": 3 } } }, { "user": { "name": "Habib", "img": "fb-user.jpg" }, "post": { "id": "post-5864752", "time": "10:44 AM", "text": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum quo ut nulla deleniti incidunt tempora est voluptates delectus necessitatibus a officiis ipsa minus illo, blanditiis officia harum aliquid quisquam nihil.", "reactions": { "likes": 0, "loves": 8, "hahas": 0 } } } ] }';
let postArr = JSON.parse(postJson);
class PostManager {
renderPosts(postData) {
let html = "";
postData.forEach(art => {
html += `
<article class="post__container" id="${art.post.id}">
<div class="post__header">
<div class="post__user">
<div class="post__user-img"><img src="${art.user.img}" alt=""></div>
<div class="post__user-details">
<div class="post__user-name">${art.user.name}</div>
<div class="post__time">${art.post.time}</div>
</div>
</div>
</div>
<div class="post__body">
<p>${art.post.text}</p>
<div class="post__activities">
<div class="post__like-reactions">
<span class="likecount" data-likecount="${art.post.reactions.likes}">${art.post.reactions.likes}</span>
<span class="likecountAttr">${art.post.reactions.likes > 1 ? " Likes" : " Like"}</span>
<span class="lovecount" data-lovecount="${art.post.reactions.loves}">${art.post.reactions.loves}</span>
<span class="lovecountAttr">${art.post.reactions.loves > 1 ? " Loves" : " Love"}</span>
<span class="hahacount" data-hahacount="${art.post.reactions.hahas}">${art.post.reactions.hahas}</span>
<span class="hahacountAttr">${art.post.reactions.hahas > 1 ? " Hahas" : " Haha"}</span>
</div>
<img src="fb-reactions.jpg" class="post__like-reaction-img hide" usemap="#reactions-map-${art.post.id}" />
<map name="reactions-map-${art.post.id}">
<area target="" alt="Like" title="Like" coords="25,30,20" shape="circle" class="area-btn-like" data-post="${art.post.id}" data-like="like">
<area target="" alt="Love" title="Love" coords="70,25,18" shape="circle" class="area-btn-like" data-post="${art.post.id}" data-like="love">
<area target="" alt="Haha" title="Haha" coords="115,25,18" shape="circle" class="area-btn-like" data-post="${art.post.id}" data-like="haha">
</map>
</div>
</div>
<div class="post__footer">
<div class="button__container">
<button class="btn-fb-reactions btn-like" data-post="${art.post.id}">Like</button>
<button class="btn-fb-reactions btn-comment">Comment</button>
<button class="btn-fb-reactions btn-share">Share</button>
</div>
</div>
</article>`;
});
document.querySelector(".article__container").innerHTML = html;
}
likePost(postId, likeType) {
console.log(`#${postId} .post__like-reactions .${likeType}count`);
let countEle = document.querySelector(`#${postId} .post__like-reactions .${likeType}count`);
let likeCounter = 0;
likeCounter = countEle.getAttribute(`data-${likeType}count`);
countEle.innerHTML = ++likeCounter;
countEle.setAttribute(`data-${likeType}count`, likeCounter);
if (likeCounter > 1) {
document.querySelector(`#${postId} .post__like-reactions .${likeType}countAttr`).innerHTML = " " + likeType.charAt(0).toUpperCase() + likeType.slice(1) + "s";
} else {
document.querySelector(`#${postId} .post__like-reactions .${likeType}countAttr`).innerHTML = " " + likeType.charAt(0).toUpperCase() + likeType.slice(1);
}
}
}
const Post = new PostManager();
Post.renderPosts(postArr.data);
let likeBtn = document.querySelectorAll('.btn-like');
let commentBtn = document.querySelectorAll('.btn-comment');
let shareBtn = document.querySelectorAll('.btn-share');
let areaBtnLike = document.querySelectorAll('.area-btn-like');
likeBtn.forEach(btn => {
btn.addEventListener('click', function(e) {
let postId = e.target.getAttribute('data-post');
document.querySelector(`#${postId} .post__like-reaction-img`).classList.toggle("hide");
// Post.likePost(postId);
})
})
areaBtnLike.forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
let postId = e.target.getAttribute('data-post');
let likeType = e.target.getAttribute('data-like');
Post.likePost(postId, likeType);
document.querySelector(`#${postId} .post__like-reaction-img`).classList.toggle("hide");
})
})
</script>
</body>
</html>
See the Pen Untitled by Muhammad Habib (@mhabib555) on CodePen.
Comments
Post a Comment