Open In App

How to make Moore's Voting Algorithm Visualizer using HTML CSS & JavaScript ?

Last Updated : 22 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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 algorithm

Approach: We will use the same algorithm but we will be taking input of text and pattern and then we will be computing an LPS array and then we will compare text and pattern. The main intuition behind this algorithm is if an element is repeating then it will repeat N/2 times that it must have occurrences that will be left at the reference element at the end when iterated over the array. Now after that, we start traversing the array by adding a CSS title class to every element to the container while traversing the array and then we apply the Moores voting algorithm logic if you don't know the logic about the algorithm please read the following article https://www.geeksforgeeks.org/boyer-moore-majority-voting-algorithm/. The idea of the article is basically if in an array there are elements that repeat more than n/2 times where n is the size of the array then the element needs to be consecutive once in that particular array to come n/2 times 

Step 1: Lets create the basic structure of the webpage using HTML.

index.html

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">Moores
        </span>Voting Algorithm
    </div>
    <div id="container"></div>
    <div class="container_2">
        <div id="votes"></div>
        <div id="candidate"></div>
        <div id="count"></div>
        <div id="message"></div>
        <div id="start">Start</div>
    </div>
</body>

</html>

Step 2: Now in the style.css file we will style the structure of the webpage.

style.css

CSS 
* {
    color: white;
}

#span {
    font-weight: normal;
    text-shadow: 0 0 10px cyan, 0 0 40px cyan, 0 0 80px cyan;
    letter-spacing: 2px;
}

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;
    align-items: center;
}

#container {
    width: 100%;
    margin-top: 15%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    font-size: 5vmin;
    letter-spacing: 2vmin;
    font-weight: normal;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    padding: 1vmin;
    padding-left: 2vmin;
    border: 2px solid black;
}

.onover {
    color: cyan;
}

#candidate,
#count {
    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;
}

#votes,
#candidate,
#count {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vmin;
    font-size: 3vmin;
    letter-spacing: 2px;
    transition: all 0.5s ease-in-out;
}

#votes:hover,
#candidate:hover,
#count:hover {
    transform: scale3d(1.5);
}

.header {
    text-align: center;
    padding: 1vmin;
    width: 100%;
    font-size: 6vmin;
    letter-spacing: 2px;
    border-bottom: 1px solid white;
}

input {
    margin-top: 2vmin;
}

#message {
    width: 50%;
    height: 7vmin;
    margin: 3vmin;
    font-size: 5vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    color: cyan;
    font-size: 2vmin;
}

.cyans {
    color: cyan;
    border: 2px solid cyan;
    transition: all 0.5s ease-in-out;
}

.greenyellow {
    color: greenyellow;
    border: 2px solid greenyellow;
    transition: all 0.5s ease-in-out;
}

.normal {
    color: white;
    border: 2px solid black;
}

Step 3: Now we will see the code of the JS file for all the logic of the algorithm. We made an array when the window loads when the start is clicked we display an array we make it asynchronous so that when the message displays we make it wait for 7000 milliseconds so that people can see it we then make display none and then we append elements to the container using tile class now we have moores voting algorithm function which will find the majority element now we first show the initialized element and then we used async/await and promises to wait for it for the time and then we iterate it for iteration we use green, yellow border color and same font color and then if the number is present we use cyan color for border color and font color if numbers are equal to the candidate and we display votes and candidate continuously and we would display a message in message div if it is important that the only thing we do javascript file but to understand it we must have a brief knowledge of the algorithm. 

script.js

JavaScript 
function id(id) {
    return document.getElementById(id);
}
var array = [1, 1, 2, 3, 1, 5, 1];
window.onload = () => {
    id("start").addEventListener('click', async () => {
        id("start").style.display = "none";
        id("message").innerText = "Main intuition behind this algorithm is "
            + "if a element is repeating than it will repeat N / 2 times "
            + "that it must have occurrences which will be left at the "
            + "reference element at the end when iterated over the array "
            + "How let us see!"
        await new Promise((resolve) =>
            setTimeout(() => {
                resolve();
            }, 7000)
        )
        id("start").style.display = "none";
        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];
            id("container").appendChild(tile);
            idcount++;
            MooresVoting(array, array.length);
        }
    })

}
const MooresVoting = async (array, size) => {
    // console.log("inside function")
    var count = 0;
    var candidate = -1;
    var votes = 0;
    id("message").innerText = "Watching the initializer elements first";
    await new Promise((resolve) =>
        setTimeout(() => {
            resolve();
        }, 2000)
    )
    id("votes").innerText = `Votes is ${votes}`;
    id("candidate").innerText = `Present Candidate
        is at index ${candidate}`;
    // id("count").innerText = `Count is ${count}`;
    await new Promise((resolve) =>
        setTimeout(() => {
            resolve();
        }, 3000)
    )
    id("message").innerText = `iterating over the array now`
    id("message").innerText = "Main intuition behind this algorithm "
        + "is if a element is repeating than it will repeat N / 2 "
        + "times that it must have occurrences which will be left at "
        + "the reference element at the end when iterated over the "
        + "array How let us see!"
    await new Promise((resolve) =>
        setTimeout(() => {
            resolve();
        }, 3000)
    )
    id("message").innerText = "";
    for (let i = 0; i < size; i++) {
        id(i).classList.add("greenyellow")
        // id(i).style.color="greenyellow";
        if (votes == 0) {
            id("votes").style.color = "Red";
            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, 3000)
            )
            id("votes").style.color = "white";
            // id("candidate").style.color="cyan";
            id("candidate").classList.add("cyan");
            id("votes").classList.add("cyan");
            // id("votes").style.color="cyan";
            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, 2000)
            )
            candidate = i;
            votes = 1;
            id("candidate").innerText = `Present Candidate is 
                at index ${candidate}`;
            id("votes").innerText = `Votes is ${votes}`;
            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, 3000)
            )
            // id("candidate").style.color="white";
            // id("votes").style.color="white";
            id("candidate").classList.remove("cyan");
            id("votes").classList.remove("cyan");
        } else {
            // console.log("inside else");
            // console.log(`${i} ${candidate}`);
            console.log(`inside else ${array[i]} and
                cand ${candidate}`);
            if (array[i] == array[candidate]) {
                console.log("inside array[i]==candidate");
                id(i).style.borderColor = "cyan";
                id(i).style.color = "cyan";
                id(candidate).style.borderColor = "cyan";
                id(candidate).style.color = "cyan"
                id("votes").style.color = "cyan";
                await new Promise((resolve) => {
                    setTimeout(() => {
                        resolve();
                    }, 2000);
                })
                votes++;
                id("votes").innerText = `Votes is ${votes}`;
                await new Promise((resolve) => {
                    setTimeout(() => {
                        resolve();
                    }, 3000);
                })
                id("votes").style.color = "white";
                id(i).style.borderColor = "black";
                id(candidate).style.color = "white"
                id(candidate).style.borderColor = "black";
            }
            else {
                id("votes").style.color = "cyan";
                await new Promise((resolve) => {
                    setTimeout(() => {
                        resolve();
                    }, 3000);
                })
                votes--;
                id("votes").innerText = `Votes is ${votes}`
                await new Promise((resolve) => {
                    setTimeout(() => {
                        resolve();
                    }, 2000);
                })
                id("votes").style.color = "white";
            }
        }
        id(i).style.color = "white";
        id(i).style.borderColor = "black"
    }
    id("message").innerText = `Now we gonna check element we 
        found was actually occurring more than N/2 times
        and that candidate is ${candidate}`;
    await new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, 3000);
    })
    id("message").innerText = "";
    id("votes").innerText = "";
    id("candidate").innerText = "";
    for (let i = 0; i < size; i++) {
        id(i).style.borderColor = "greenyellow";
        id(i).style.color = "greenyellow";
        await new Promise((resolve) => {
            setTimeout(() => {
                resolve();
            }, 3000);
        })
        // console.log(`array of candidate ${array[candidate]} and ${ array[i] } `);
        if (array[i] == array[candidate]) {
            id("count").style.color = "cyan";
            await new Promise((resolve) => {
                setTimeout(() => {
                    resolve();
                }, 3000);
            })
            count++;
            id("count").innerText = `Count is now ${count} `
            id("count").style.color = "white";
        }
        id(i).style.color = "white";
        id(i).style.borderColor = "black"
    }
    await new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, 3000);
    })
    // console.log(`count is ${ count } and size is ${ size / 2 } `);
    if (count > size / 2) {
        id("message").innerText = `Found the Majority element
            which is ${array[candidate]} `;
    } else {
        id("message").innerText = `Didn't found the
            Majority Element`;
    }
}

Output:


Next Article
How to make Moore's Voting Algorithm Visualizer using HTML CSS & JavaScript ?

V
vasuvijayvargiya240
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox