Create Instagram Story views using JavaScript

Instagram is one of the most popular social media platforms worldwide. Today I am going to tell you about a most popular feature of Instagram story views which feature is most trending these day on Instagram. Today we are going to learn this feature only.

In this tutorial, we will be building an Instagram stories views feature with post using HTML, CSS and JavaScript.

Sharing my experience in recreating the Instagram stories modal using pure JavaScript. Here is the preview of Instagram Stories Modal:

Create Instagram Story views using JavaScript

See also: Build Instagram like App in HTML CSS and JavaScript

How to Create Instagram Story views using JavaScript

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 Story views feature that looks great on all devices. So, let’s waste no time and start the steps to creating a Instagram story view page.

Folder Structure of Instagram Story View

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-story-view-feature. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.htmlstyles.css, and script.js respectively.

 // instagram-story-view-feature/

Create HTML Page for Instagram Story

This is the HTML file for our Instagram below. Here, we are using the HTML tag to create the content of the Instagram story UI. We are including the card and one image and some CSS for styling to view story.

When click on the story image then story image show on the full screen of device for three seconds.


<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Create Instagram story feature using html css and javascript</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="" rel="stylesheet">
	<div class="card">
		<div class="full-screen"></div>
		<div class="stories">
	<script type="text/javascript" src="script.js"></script>

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.


	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family:'Roboto Slab', sans-serif;
html, body{
	height: 100%;
	width: 100%;

	background: aliceblue;
	display: flex;
	align-items: center;
	justify-content: center;

	height: 550px;
	width: 350px;
	background: #fff;
	border-radius: 10px;
	border: 1px solid #000;
	position: relative;
	overflow: hidden;

	height: 90px;
	width: 100%;
	border-bottom:1px solid grey;
	padding: 15px 5px;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	display: none;
	border: 1px solid #155dfd;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-block;
	margin-right: 7px;

.story img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;

	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	position: absolute;
	display: none;
	border-radius: 10px;

Create JavaScript File for Instagram Views Story

In this file we are make a array for store static image using JavaScript. In this array we have make a object for store image to display on user Instagram story.


let array = [
	{dp:"", story:""},
	{dp:"", story:""},
	{dp:"", story:""},
	{dp:"", story:""},
	{dp:"", story:""},
	{dp:"", story:""},

let parentElement = "";
let storyElement = document.querySelector(".stories");

array.forEach(function(element, index){
parentElement +=`<div class="story">
					<img id="${index}" src="${element.dp}">

storyElement.innerHTML = parentElement;

storyElement.addEventListener("click", function(dets){
	let image = array[].story;
	document.querySelector(".full-screen").style.display = "block";
	document.querySelector(".full-screen").style.backgroundImage = `url(${image})`;

		document.querySelector(".full-screen").style.display = "none";

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.😊

Leave a Reply

Your email address will not be published. Required fields are marked *