Инстаграм — одна из самых популярных социальных сетей во всем мире. Сегодня я расскажу вам о функции Instagram, при которой при лайке публикации в приложении Instagram Like App появляется сердечко. Когда мы дважды щелкаем по любому сообщению, на нем появляется всплывающее окно с сердечком, которое означает, что вам понравилось сообщение. Сегодня мы собираемся изучить только эту функцию.

В этом уроке мы будем с душой создавать функцию, похожую на публикацию в Instagram, с использованием HTML, CSS и JavaScript, что включает в себя создание страницы публикации, на которой пользователи смогут прокручивать и просматривать опубликованные изображения.

Как создать Instagram как функцию приложения

К концу этого поста в блоге вы поймете, как HTML, CSS и JavaScript работают вместе, создавая визуально привлекательную и удобную для пользователя функцию, похожую на публикацию в Instagram, которая отлично смотрится на всех устройствах. Итак, давайте не будем терять времени и приступим к созданию страницы публикации в Instagram.

Создать HTML-страницу для показа публикации в Instagram

Это HTML-файл для нашего Instagram ниже. Здесь мы используем HTML-скрипт для создания содержимого пользовательского интерфейса публикации в Instagram. Мы добавили открытку и одно изображение, а также значок сердечка.

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/[email protected]/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>

Создайте CSS-файл для стилизации

Мы используем CSS для управления содержимым HTML, таким как цвет, ширина, высота, размер шрифта, отступы, поля и т. д.

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;
}

Создайте файл JavaScript для реализации функции публикации лайков.

В-третьих, вставьте следующие коды в файл script.js.

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);
});

Нажмите на сообщение в блоге ниже

https://webscodex.com/build-instagram-like-app-in-html-css-and-javascript/