Build Instagram like App in HTML CSS and JavaScript
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.
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.
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);
});Click on the below blog post
https://webscodex.com/build-instagram-like-app-in-html-css-and-javascript/