upes-open · sj1705 · Mar 25, 2023 · Mar 25, 2023
diff --git a/Algo Visualizer/Kadane/index.html b/Algo Visualizer/Kadane/index.html
@@ -0,0 +1,36 @@
+<!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>
diff --git a/Algo Visualizer/Kadane/script.js b/Algo Visualizer/Kadane/script.js
@@ -0,0 +1,54 @@
+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);
+	})
+
+}
diff --git a/Algo Visualizer/Kadane/style.css b/Algo Visualizer/Kadane/style.css
@@ -0,0 +1,101 @@
+* {
+	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;
+}
diff --git a/Algo Visualizer/images/Kadane algo img.png b/Algo Visualizer/images/Kadane algo img.png
diff --git a/README.md b/README.md
@@ -1 +1,17 @@
-# Open-Algorithm-Visualizer
+# Open-Algorithm-Visualizer
+
+Algorithm-Visualizer is available as a web-based application that provides a visual representation of algorithms. It supports a wide range of algorithms, including sorting, searching, graph traversal, and many more.
+
+With Algorithm-Visualizer, users can create their algorithms and see how they work in real-time. It helps users to experiment with different algorithms and learn from their mistakes.
+
+Some of the benefits of using Algorithm-Visualizer include:
+
+1. Better understanding: Algorithm-Visualizer provides a visual representation of algorithms, making it easier for users to understand how they work.
+
+2. Learning by doing: With Algorithm-Visualizer, users can experiment with different algorithms and see how they work in real-time. It helps users to learn by doing.
+
+3. Saves time: Algorithm-Visualizer allows users to quickly visualize how different algorithms work, saving them time that would have been spent trying to understand complex code.
+
+4. Fun and interactive: Algorithm-Visualizer makes learning algorithms fun and interactive. Users can see the algorithm's progress step-by-step, making it easy to follow and understand.
+
+Overall, Algorithm-Visualizer is an excellent tool for anyone interested in learning algorithms or improving their understanding of complex processes.
diff --git a/index.html b/index.html
@@ -55,7 +55,17 @@ <h3>Bubble Sort</h3>
                <p><a href="Algo Visualizer/Bubble Sort/index.html"><button class="w3-button w3-theme">Click Here to Get Started</button></a></p>
             </div>
          </div>
-      </div>
+         <div class="w3-half">
+            <div class="w3-card w3-container" style="min-height:460px">
+               <h3>Kadane's Algorithm</h3>
+               <br>
+               <img src="Algo Visualizer/images/Kadane algo img.png" height="200px" width="400px">
+               <p>Discription</p>
+               <p><a href="Algo Visualizer/Kadane/index.html"><button class="w3-button w3-theme">Click Here to Get Started</button></a></p>
+            </div>
+         </div>
+      </div>         
+
       <footer class="w3-container w3-theme-dark w3-padding-16">
          <h3>Made by UPES Open Community</h3>
          <div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">