diff --git a/KMP ALGORITHM/index.html b/KMP ALGORITHM/index.html
new file mode 100644
index 0000000..8525e5c
--- /dev/null
+++ b/KMP ALGORITHM/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ KMP Algorithm - String Matcher
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/KMP ALGORITHM/index.js b/KMP ALGORITHM/index.js
new file mode 100644
index 0000000..38872fd
--- /dev/null
+++ b/KMP ALGORITHM/index.js
@@ -0,0 +1,70 @@
+let btn = document.getElementById('btn')
+let output = document.getElementById('output')
+
+btn.addEventListener("click",()=>{
+ text = document.getElementById("text").value
+ pattern = document.getElementById("pattern").value
+ let res = kmpMatching(text, pattern)
+ output.innerHTML = `Pattern found at index ${res}`
+
+})
+
+function longestPrefix(str) {
+ var table = new Array(str.length);
+ var maxPrefix = 0;
+
+ table[0] = 0;
+ for (var i = 1; i < str.length; i++) {
+ while (maxPrefix > 0 && str.charAt(i) !== str.charAt(maxPrefix)) {
+ maxPrefix = table[maxPrefix - 1];
+ }
+ if (str.charAt(maxPrefix) === str.charAt(i)) {
+ maxPrefix++;
+ }
+ table[i] = maxPrefix;
+ }
+ return table;
+}
+
+function kmpMatching(str, pattern) {
+ var prefixes = longestPrefix(pattern);
+ var matches = [];
+ var j = 0;
+ var i = 0;
+ while (i < str.length) {
+ if (str.charAt(i) === pattern.charAt(j)) {
+ i++;
+ j++;
+ }
+ if (j === pattern.length) {
+ matches.push(i - j);
+ j = prefixes[j - 1];
+ }
+ else if (str.charAt(i) !== pattern.charAt(j)) {
+ if (j !== 0) {
+ j = prefixes[j - 1];
+ } else {
+ i++;
+ }
+ }
+ }
+ return matches;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/KMP ALGORITHM/styles.css b/KMP ALGORITHM/styles.css
new file mode 100644
index 0000000..68b6006
--- /dev/null
+++ b/KMP ALGORITHM/styles.css
@@ -0,0 +1,135 @@
+#title{
+ text-align: center;
+ color: BLACK;
+ font-family: 'Comfortaa', cursive;
+font-size: 400%;
+ padding-top: 7%;
+}
+
+#btn{
+ width: 10%;
+ height: 45%;
+ margin-left: 45%;
+}
+
+body {
+ height: 100vh;
+ display: grid;
+ background-color: black;
+ font-family: Roboto;
+ -webkit-text-size-adjust: 100%;
+ -webkit-font-smoothing: antialiased;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+
+
+.inp {
+ position: relative;
+ margin: auto;
+ width: 100%;
+ max-width: 280px;
+ border-radius: 3px;
+ overflow: hidden;
+}
+.inp .label {
+ position: absolute;
+ top: 20px;
+ left: 12px;
+ font-size: 16px;
+ font-family: 'Comfortaa', cursive;
+
+ font-weight: 500;
+ transform-origin: 0 0;
+ transform: translate3d(0, 0, 0);
+ transition: all 0.2s ease;
+ pointer-events: none;
+}
+.inp .focus-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.05);
+ z-index: -1;
+ transform: scaleX(0);
+ transform-origin: left;
+}
+.inp input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 100%;
+ border: 0;
+ font-family: 'Comfortaa', cursive;
+
+ padding: 16px 12px 0 12px;
+ height: 56px;
+ font-size: 16px;
+ font-weight: 400;
+
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
+ color: black;
+ transition: all 0.15s ease;
+}
+.inp input:hover {
+ background-color: gainsboro;
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+.inp input:not(:-moz-placeholder-shown) + .label {
+
+ transform: translate3d(0, -12px, 0) scale(0.75);
+}
+.inp input:not(:-ms-input-placeholder) + .label {
+
+ transform: translate3d(0, -12px, 0) scale(0.75);
+}
+.inp input:not(:placeholder-shown) + .label {
+
+ transform: translate3d(0, -12px, 0) scale(0.75);
+}
+.inp input:focus {
+
+ outline: none;
+ box-shadow: inset 0 -2px 0 #0077FF;
+}
+.inp input:focus + .label {
+ color: #0077FF;
+ transform: translate3d(0, -12px, 0) scale(0.75);
+}
+.inp input:focus + .label + .focus-bg {
+ transform: scaleX(1);
+ transition: all 0.1s ease;
+}
+
+
+
+
+
+
+
+
+
+
+
+#output {
+ text-align: center;
+ font-family: 'Comfortaa', cursive;
+ font-size: 150%;
+}
+
+#footer {
+ background-color: black;
+}
+
+#h2 {
+ color: white;
+ font-family: 'Comfortaa', cursive;
+text-align: center;
+ padding-top: 2%;
+
+}