Instagram is one of the most popular social media platforms worldwide. Today I am going to tell you about a feature of Instagram which popup a heart while liking a post on Instagram like app. When we are double click on any post then one heart popup visible on the post that mean you like the post. Today we are going to learn this feature only.
In this tutorial, we will be building an Instagram Post like feature with heart using HTML, CSS and JavaScript which includes creating a posting page where users can scroll and see the posted images.
How to build Instagram like App feature
By the end of this blog post, you will understand how HTML,CSS and JavaScript work together to create a visually appealing and user-friendly Instagram Post like feature that looks great on all devices. So, let’s waste no time and start the steps to creating a Instagram post page.
Folder Structure of Instagram Post Like Project
Create a root folder that contains the HTML, CSS, and JavaScript files. You can name the files anything you want. Here, the name of the root folder is instagram-like-feature. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.
// instagram-like-feature/
|__index.html
|__style.css
|__script.js
Create HTML Page for show Instagram Post
This is the HTML file for our Instagram below. Here, we are using the HTML script to create the content of the Instagram post UI. We are including the card and one image and I have also add a heart icon.
When double click on the post image then heart is show for one second after one second heart icon will be hide. you can increase the time.
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Instagram like feature using html css and javascript</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> </head> <body> <div class="container"> <img src="https://images.unsplash.com/photo-1534008757030-27299c4371b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"> <i class="ri-heart-3-fill"></i> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
Create CSS file for Styling
We are using CSS for managing the content of HTML like the content color, width, height, font size, padding, margin, etc.
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Roboto Slab', sans-serif;
}
html, body{
width: 100%;
height: 100%;
}
body{
display: flex;
align-items: center;
justify-content: center;
background: cornflowerblue;
}
.container{
height: 400px;
width: 300px;
background: #fff;
position: relative;
border-radius: 10px;
text-align: center;
overflow: hidden;
}
.container img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: top;
border-radius: 10px;
}
.container i{
color: white;
font-size: 100px;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%,50%) scale(0);
opacity: 0;
transition: transform ease 0.5s;
}Create JavaScript File to implement the Post like feature
Third, paste the following codes into your script.js file.
script.js
let container = document.querySelector(".container");
let icon = document.querySelector("i");
container.addEventListener("dblclick", function () {
icon.style.transform = "translate(-50%,50%) scale(1)";
icon.style.opacity = 0.8;
icon.style.color = "red";
setTimeout(function () {
icon.style.opacity = 0;
}, 1000);
setTimeout(function () {
icon.style.transform = "translate(-50%,50%) scale(0)";
}, 1000);
});You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊
