How to make Kadanes Algorithm visualizer using HTML CSS & Javascript ?
Last Updated :
13 Mar, 2024
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 visualization. When we are iterating over the array and we are gonna show it with a cyan color border and cyan font color and we show the current sum and maximum sum. To know more about kadanes algorithm refer to https://www.geeksforgeeks.org/largest-sum-contiguous-subarray/.Â
The simple idea of Kadane’s algorithm is to look for all positive contiguous segments of the array. And keep track of the maximum sum of contiguous segments among all positive segments. Each time we get a positive sum compare it with the maximum sum so far and update the maximum sum if it is greater than the previous.Â
Step 1: In this step, we will first create the structure of the webpage using HTML. We made a header with an id of the header and inside of id we made a span element so that we can style it like a nice glowing text and header id won't be glowing it will look good we made a container that will have the current sum of the array and then max sum as their children div then we have start button which when clicked shows you how kadanes algorithm works now let's talk about CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<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" />
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="header">
<span id="span">
Kadanes
</span>
Algorithm
</div>
<div id="container"></div>
<div class="container_2">
<div id="currentsum"></div>
<div id="answer"></div>
<!-- <input id="input" type="text"
placeholder="Enter the Array"> -->
<!-- <div id="push">Push</div> -->
<div id="start">Start</div>
</div>
</body>
</html>
Step 2: We will have black background so we give the text color as white to every element so that it shows and then for the span we have to make it glow so we give a text-shadow we set our HTML background color and font family now for the body we make sure everything remains center and set flex-direction as a center and for 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 onhover and change color to cyan then we style every element normally.
CSS
* {
color: white;
}
#span {
font-weight: normal;
text-shadow: 0 0 10px cyan,
0 0 40px cyan,
0 0 80px cyan;
}
html {
background-color: black;
font-family: "Open sans", sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vmin;
}
.container_2 {
display: flex;
flex-direction: column;
}
#container {
width: 100%;
margin-top: 15%;
display: flex;
justify-content: center;
flex-direction: row;
font-size: 5vmin;
letter-spacing: 2vmin;
font-weight: normal;
}
.tile {
/* width: 5vmin; */
height: 5vmin;
margin: 10px;
text-align: center;
height: fit-content;
}
.onover {
color: cyan;
}
#answer {
font-size: 5vmin;
}
#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;
}
#array {
display: flex;
font-size: 10vmin;
}
#currentsum,
#answer {
padding: 1vmin;
font-size: 3vmin;
letter-spacing: 2px;
}
.header {
text-align: center;
padding: 1vmin;
width: 100%;
font-size: 6vmin;
letter-spacing: 2px;
border-bottom: 1px solid white;
}
input {
margin-top: 2vmin;
}
Step 3: Now script.js will contain its main logic of it. We made a function that returns an id. We made an array with negative and fewer elements so that viewer can understand and then we made a current sum and max sum we made a function current sum we ran a loop on our array we made a  promise with settimeout that runs a callback resolves after some time so it stops code for passed delay time which is for now 1 second and we stopped code for 1 second every time I change and then we add array[i] to current sum then we display the current sum.
JavaScript
function id(id) {
return document.getElementById(id);
}
var array = [5, 4, 6, -3, 4, -1];
var maxsumcontainer = [];
let curr_sum = 0; let max_sum = 0;
const kadanes = async (array, arrayLength) => {
console.log("inside");
for (let i = 0; i < arrayLength; i++) {
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
curr_sum = curr_sum + array[i];
id("currentsum").innerText = `Current Sum : ${curr_sum}`
maxsumcontainer[i] = i;
id(i).style.color = "cyan";
// id(i).style.textAlign="center"
id(i).style.border = "2px solid cyan"
if (curr_sum > max_sum) {
max_sum = curr_sum;
id("answer").innerText = `Maximum Sum : ${max_sum}`;
}
if (curr_sum < 0) {
curr_sum = 0
}
}
// id("container").style.textShadow="0 0 10px cyan
//,0 0 40px cyan, 0 0 80px cyan;"
id("container").style.color = "red";
id("container").innerText = "Ended"
id("answer").innerText = `Maximum Sum : ${max_sum}`;
}
window.onload = () => {
id("start").addEventListener('click', () => {
id("start").style.display = "none";
// id("input").style.display="none"
console.log(array);
let idcount = 0;
for (let i = 0; i < array.length; i++) {
let tile = document.createElement('span');
tile.id = idcount;
tile.classList.add("tile");
tile.innerText = array[i];
// tile.style.margin="2px";
// tile.style.padding="1vmin"
id("container").appendChild(tile);
idcount++;
}
kadanes(array, array.length);
})
}
Output:
Â
Similar Reads
How to make KMP Algorithm visualizer using HTML,CSS & JavaScript ? The KMP matching algorithm uses degenerating property (pattern having the same sub-patterns appearing more than once in the pattern) of the pattern and improves the worst-case complexity to O(n). The basic idea behind KMP’s algorithm is: whenever we detect a mismatch (after some matches), we already
11 min read
How to make Moore's Voting Algorithm Visualizer using HTML CSS & JavaScript ? This article will show how to make Moore's Voting Algorithm visualizer using HTML, CSS & JavaScript. This algorithm is used for an element that repeats more than n/2 times n is the size of the array for this element that has to repeat continuously so that is the key approach for this algorithmAp
8 min read
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
Sliding Window Visualizer using HTML CSS and JavaScript 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 effic
8 min read
How to make Live Coding Editor using HTML CSS and JavaScript ? In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.Final OutputPrerequisiteHTMLCSSJavaScriptAppr
3 min read
Comb Sort Visualizer using JavaScript Comb Sort is mainly an improvement over Bubble Sort. Comb Sort improves on Bubble Sort by using a gap of the size of more than 1. In order to know more about it. Please refer to Comb Sort. An algorithm like Comb Sort can be easily understood by visualizing instead of long codes. In this article, Com
5 min read
Gnome Sort Visualizer using JavaScript In this article, we are going to learn Gnome sort Visualizer using javascript, Gnome Sort also called Stupid sort, is based on the concept of a Garden Gnome sorting his flower pots. In order to know more about it. Please refer to Gnome Sort.An algorithm like Gnome Sort can be easily understood by vi
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
Design a Stock Market Dashboard using HTML CSS & JavaScript We will walk through the step-by-step process of designing a Stock Market Dashboard template using HTML, CSS, and JavaScript. This application will provide users with a dashboard interface where they can view a watchlist of stocks, search for specific stocks, and see detailed information about each
11 min read
Shell Sort Visualizer using JavaScript Shell Sort is mainly a variation of Insertion Sort. The idea of shell sort is to allow the exchange of far items. In order to know more about it. Please refer to Shell Sort.An algorithm like Shell Sort can be easily understood by visualizing instead of long codes. In this article, Shell Sort Visuali
5 min read