Sliding Window Visualizer using HTML CSS and JavaScript
Last Updated :
29 Jul, 2024
Window sliding technique is used extensively in array problems and used a lot in subarray-related problems like subarray sum etc. In this article, we will understand how Sliding Window Visualizer works along with knowing the basic implementation of the visualizer.
Window sliding technique is an efficient way to calculate and solve problems with contiguous elements in an array with fixed-sized windows. Window sliding techniques are used in subarray problems and problems where we need to focus on the particular window of the problem statement. Understanding this algorithm is very important because it deals with major problem statements out there.
Pre-requisite knowledge: HTML, CSS, JavaScript
We can use the window-sliding technique when we need to work with a set of elements, which can be an array, string, or any other structure and we need to get an output with a fixed-size window inside a particular structure like an array, string, etc.
For example with arrays:
/* K is the size of the window and we need
to find the maximum sum in that window */
Input : arr[] = {100, 200, 300, 400}, k = 2
Output : 700
Input : arr[] = {1, 4, 2, 10, 23, 3, 1, 0, 20}, k = 4
Output : 39
/* We get maximum sum by adding subarray
{4, 2, 10, 23} of size 4 */
Input : arr[] = {2, 3}, k = 3
Output : Invalid
/* There is no subarray of size 3 as
size of whole array is 2 */
For example with strings:
/* Find the sum 299 in ASCII values
in contiguous form fixed sized */
window of 3 inside a string
string s : abadfg
sum : 299;
Output : Found
The basic idea of the window sliding technique is to remove elements that should be not there in the new window and add new elements to the window to make the new window.
Stepwise implementation for Visualizer: To make the visualizer, we will follow the below steps:
Step 1: We need to now understand the HTML part of how we made the containers in HTML in order to divide we made a container that holds all of our elements like a displayer which holds elements that are to be displayed on the screen and then we have pattern and pattern text a message div where pattern displays the array and pattern text holds the message like maximum sum current sum, we have start button which at the end begins the algorithm visualization when clicked.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<h1>
<span class="1">S</span>liding
<span class="2">W</span>indow
<span class="3">T</span>echnique
<span>Visualizer</span>
</h1>
<div id="message">
We will find the maximum sum in array using
sliding window technique in certain sized
window when window size is 4
</div>
<div id="container">
<div id="displayer">
<div id="pattern"></div>
<div id="pattern_text"></div>
</div>
<div id="start">Begin</div>
</div>
</body>
</html>
Step 2: We will have a black background, so we gave the text color white to every element so that it will be visible, and then for the span, we have to make it glow, so we give a text-shadow that we set our HTML background color and font family. Now, for the body, we make sure everything remains centered and set flex-direction as a center and for the container. Also, we give it some position same goes for the container we give it a letter spacing so that it looks neat. We make a tile, and make sure every element displayed is with tile for symmetric. We set it on hover and change color to cyan and then we style every element for its positions. When we iterate over the array elements we make sure that the color of the array element iterator is shown with different color which is red and when the element is added to the window then we highlight it with green color and when highlighting the element that is to be removed with red color, Window is shown with white color.
CSS
* {
color: white;
font-family: "Open sans", sans-serif;
}
html {
background-color: black;
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vmin;
}
h1 span {
font-size: 6vmin;
font-weight: normal;
text-shadow: 0 0 20px cyan,
0 0 40px cyan,
0 0 80px cyan;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80%;
width: 80%;
}
#displayer {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 90%;
}
#pattern,
#message {
width: 100%;
height: 7vmin;
margin: 3vmin;
font-size: 5vmin;
display: flex;
align-items: center;
justify-content: center;
}
#message {
color: cyan;
font-size: 2vmin;
}
#pattern_text {
width: 100%;
height: 5vmin;
margin: 3vmin;
font-size: 5vmin;
display: flex;
align-items: center;
justify-content: center;
color: g;
}
#pattern_text {
width: 100%;
height: 5vmin;
margin: 3vmin;
font-size: 5vmin;
display: flex;
align-items: center;
justify-content: center;
color: g;
}
.tile {
width: 6vmin;
height: 6vmin;
margin: 10px;
text-align: center;
height: fit-content;
border: 2px pink;
}
#start {
align-self: center;
background-color: black;
font-size: 3vmin;
box-sizing: border-box;
padding: 1vmin;
color: white;
cursor: pointer;
border: none;
margin-top: 2vmin;
transition: 0.5s ease-in-out;
font-weight: bold;
letter-spacing: 4px;
}
#start:hover {
transform: scale(1.5);
text-shadow: 0 0 10px cyan,
0 0 20px cyan,
0 0 40px cyan;
}
h1 {
margin-top: 0;
text-align: center;
padding: 1vmin;
margin-bottom: 1vmin;
width: 100%;
font-size: 5vmin;
font-weight: normal;
letter-spacing: 2px;
border-bottom: 1px solid white;
}
Step 3: In JavaScript, when we load the window for the first time, we see the begin button to start the visualization. After that, we have an array as max_sum and current_sum, and the window size is shown with white color and the iterator is shown with red color. The max_sum, & the current_sum are calculated and shown below in the array. We used async await to show the actual visualization smoothly by creating a delay. At first, we compare the 1st window calculate the sum and then keep the max_sum as the current_sum. Now, for the 2nd window, we find the current_sum of the second window and compare it to max_sum, if the 2nd window's current_sum is bigger than the max_sum, we give max_sum the value of 2nd window's current_sum, and so on, it goes at the end of the complete iteration. We get the max_sum of the fixed-size window i.e 4 in this case.
JavaScript
function id(id) {
return document.getElementById(id);
}
var count = 0;
var pattern, text, Psize, Tsize;
var idcountrater = 0;
var conti = 0;
const slidingWindowTech = async (pattern, Psize, sum, k) => {
console.log("hola")
var max_sum = 0;
let maxi = document.createElement('div');
maxi.id = "message";
maxi.classList.add("message");
maxi.innerText = `MaximumSum is ${max_sum}`
console.log(maxi)
id("pattern_text").appendChild(maxi);
let current_sum = 0;
let current = document.createElement('div');
current.id = "message";
current.classList.add("message");
current.innerText = `CurrentSum is ${current_sum}`
id("pattern_text").appendChild(current);
for (let i = 0; i < Psize - k + 1; i++) {
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
console.log(i + " " + (i + k - 1));
id(i).style.borderLeft = "2px solid white"
id(i).style.borderTop = "2px solid white"
id(i).style.borderBottom = "2px solid white"
id(i + 1).style.borderBottom = "2px solid white"
id(i + 1).style.borderTop = "2px solid white"
id(i + 2).style.borderTop = "2px solid white"
id(i + 2).style.borderBottom = "2px solid white"
id((i + k - 1)).style.borderRight = "2px solid white";
id(i + k - 1).style.borderTop = "2px solid white"
id(i + k - 1).style.borderBottom = "2px solid white"
if (i != 0) {
// current_sum=current_sum-pattern[i-1]
id(i - 1).style.color = "Red"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
current_sum = current_sum - pattern[i - 1]
current.innerText =
`CurrentSum after subtracting ${i - 1}th ` +
`element from ${i} window is ${current_sum}`
id(i - 1).style.color = "white"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
id(i + k - 1).style.color = "green"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
current_sum = current_sum + pattern[i + k - 1]
current.innerText =
`CurrentSum after adding ${i + k - 1}th in ${i} window is ${current_sum}`
id(i + k - 1).style.color = "white"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
}
else {
for (let j = 0; j < k; j++) {
console.log("hola 1 " + current_sum)
id((i + j)).style.color = "Red"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
current_sum = current_sum + pattern[i + j];
current.innerText =
`CurrentSum is for ${i}th window ${current_sum}`
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
id((i + j)).style.color = "white"
}
}
id(i).style.borderLeft = "none"
id(i).style.borderTop = "none"
id(i).style.borderBottom = "none"
id(i + 1).style.borderBottom = "none"
id(i + 1).style.borderTop = "none"
id(i + 2).style.borderTop = "none"
id(i + 2).style.borderBottom = "none"
id((i + k - 1)).style.borderRight = "none";
id(i + k - 1).style.borderTop = "none"
id(i + k - 1).style.borderBottom = "none"
console.log(current_sum)
// Update result if required.
// max_sum = max(current_sum, max_sum);
if (current_sum > max_sum) max_sum = current_sum;
maxi.innerText = `MaximumSum is ${max_sum}`
}
current.style.display = "none"
}
let idcount = 0;
window.onload = async () => {
id("displayer").style.display = "none";
id("start").addEventListener('click', () => {
id("start").style.display = "none"
id("displayer").style.display = "flex";
pattern = [1, 4, 2, 10, 2, 3, 1, 0, 20]
Psize = 9
sum = 24
let idcount1 = 0;
for (let i = 0; i < Psize; i++) {
let tile = document.createElement('span');
tile.id = idcount;
tile.classList.add("tile");
tile.innerText = pattern[i];
id("pattern").appendChild(tile);
idcount++;
}
slidingWindowTech(pattern, Psize, sum, 4)
})
}
Output:
Similar Reads
Create a Stack Visualizer using HTML CSS and Javascript In this article, we will see how to create a stack visualizer using HTML, CSS & Javascript, along with understanding its implementation through the illustration.Stack is a well-known linear data structure that may follow the order LIFO(Last In First Out) or FILO(First In Last Out). There are man
9 min read
Scrollspy using HTML CSS and JavaScript In this article, we will learn about Scrollspy which is a popular feature used in modern web applications. It is used to highlight and allow to navigate through different sections of long web pages as the user scrolls. It increases the interaction between the user and the web application by providin
5 min read
How to make Kadanes Algorithm visualizer using HTML CSS & Javascript ? In this article, we will see how to make a Kadanes Algorithm visualizer using HTML, CSS & Javascript. Approach:Â Kadanes algorithm is used to calculate the largest sum in a contiguous subarray. We are basically gonna use the algorithm as same and we are gonna use JavaScript and CSS to show the v
5 min read
Price Range Slider with Min-Max Input using HTML CSS and JavaScript In this article, we are going to implement Price Range Slider using HTML, CSS, & JavaScript. Here, The user can move the meter on a price range slider to choose the suitable price range. To choose the right price range, the user can use a slider or input the minimum and maximum price values. We
5 min read
Design a Video Slide Animation Effect using HTML CSS and JavaScript Nowadays, Video Slide animations are very popular. In this article, we will see how to make Video Slide Animation using HTML, CSS, and JavaScript on any webpage. Below are the two steps on how to do it. It will help the beginner to build some awesome Video Slide animations using HTML, CSS, and JS by
4 min read
Animated Slideshow App in HTML CSS & JavaScript We will learn to create a slideshow of multiple images. This slideshow will transition between the images every few seconds. we will further learn to align the images, style the images, and make the animation look better.PrerequisitesHTMLCSSJSApproachCreate 3 files one for HTML, one for CSS, and one
3 min read
Create your own Lorem ipsum using HTML CSS and JavaScript In this article, we are going to implement a Lorem Ipsum Generator Application through HTML, CSS, and JavaScript. Lorem Ipsum, a placeholder text commonly utilized in the printing and typesetting industry, serves to visually represent a document's layout instead of relying on meaningful content.Fina
5 min read
How to create image slider using HTML CSS and JavaScript ? An image slide, or slideshow, is a dynamic display of images that automatically transitions from one to the next, often with animations. To create an image slide, use HTML to structure the images, CSS for styling and animations, and JavaScript to control the timing and transitions between images.App
3 min read
Slide Down a Navigation Bar on Scroll using HTML, CSS and JavaScript To create a slide down navigation bar you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, CSS will make it looks good. This kind of sliding navbar looks attractive on a site. By using JavaScript you can easily make the navigation bar slideable when the user scrolls d
4 min read
How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and
3 min read