first commit

amelia2802 · Jan 31, 2023 · 0156558 · 0156558
commit 0156558
Show file tree

Hide file tree

Showing 9 changed files with 488 additions and 0 deletions.
diff --git a/data.js b/data.js
@@ -0,0 +1,34 @@
+export const candidateArray= [
+    {
+        id: 0,
+        name: "Bruce Wayne",
+        img:"./img/Bruce.jpg",
+        symbol:"🦇",
+        votes: Math.floor(Math.random() * 100000),
+        isVoted: false
+    },
+    {
+        id: 1,
+        name: "Dr. Jonathan Crane",
+        img:"./img/Crane.jpg",
+        symbol:"☠",
+        votes: Math.floor(Math.random()* 100000),
+        isVoted: false
+    },
+    {
+        id: 2,
+        name: "Selina Kyle",
+        img:"./img/selina.jpg",
+        symbol:"🐱",
+        votes: Math.floor(Math.random()* 100000),
+        isVoted: false
+    },
+    {
+        id: 3,
+        name: " Dr. Harleen Quinzel",
+        img:"./img/Harley.jpg",
+        symbol:"🔨",
+        votes: Math.floor(Math.random()* 100000),
+        isVoted: false
+    },
+]
diff --git a/img/Bruce.jpg b/img/Bruce.jpg
diff --git a/img/Crane.jpg b/img/Crane.jpg
diff --git a/img/Harley.jpg b/img/Harley.jpg
diff --git a/img/bat.ico b/img/bat.ico
diff --git a/img/selina.jpg b/img/selina.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>VOTE FOR MAYOR</title>
+        <link rel="icon" type="image/x-icon" href="./img/bat.ico">
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <header class="banner">
+            <h1 class="banner-text">VOTE FOR GOTHAM'S NEXT MAYOR</h1>
+            <button id="topreg" class="top-reg" type="submit"><a href="#registration">Register to Vote</a></button>
+        </header>
+        <main>
+            <section id="registration" class="registration"></section>
+            <h2 id="candidates-brand">Candidates Portal</h2>
+            <section id="candidates" class="candidates"></section>
+        </main>
+           <footer id="main-footer">
+            <div class="container">
+                <div class="footer-right">
+                    <nav class="footer-nav">
+                        <ul>
+                            <li><a href="#">Home</a></li>
+                            <li><a href="#">About Us</a></li>
+                            <li><a href="#">Contact Us</a></li>
+                            <li><a href="#">Resourses</a></li>
+                            <li><a href="#">Terms of Use</a></li>
+                            <li><a href="#">Privacy Policy</a></li>
+                        </ul>
+                    </nav>
+                    <nav class="footer-nav">
+                        <h4>Important Links</h4>
+                        <ul>
+                            <li><a href="#" >Search</a></li>
+                            <li><a href="#">News & Announcements</a></li>
+                            <li><a href="#">Photo Galary</a></li>
+                            <li><a href="#">Right To Information Act</a></li>
+                            <li><a href="#">Citizen Charter</a></li>
+                            <li><a href="#">Important Telephone Numbers</a></li>
+                            <li><a href="#">Site Map</a></li>
+                            <li><a href="#">On-going Projects</a></li>
+                        </ul>
+                    </nav>
+                    <nav class="footer-nav">
+                        <ul>
+                            <li><a href="#">City Development Plan</a></li>
+                            <li><a href="#">Disaster Management</a></li>
+                            <li><a href="#">Health, Hospitality & Allied Services</a></li>
+                            <li><a href="#">Downloads</a></li>
+                            <li><a href="#">Online Services</a></li>
+                            <li><a href="#">GCPD</a></li>
+                        </ul>
+                    </nav>
+                </div>
+                <div class="footer-left">
+                    <p class="copy">Copyright &copy; 2023, Gotham Municipal Corporation</p>
+                </div>
+            </div>
+        </footer>
+        <script type="module" src="index.js"></script>
+    </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,108 @@
+import {candidateArray} from "./data.js"
+
+document.addEventListener("click",function(e){
+    if(e.target.id === "login"){
+            registerVoter()     
+    }
+
+    else if(e.target.dataset.vote){
+
+        document.getElementById("candidates").innerHTML = givenVote(e.target.dataset.vote)
+    }
+
+    else if((document.getElementById("registration").style.display==="none") && e.target.id==="topreg"){
+        alert("You have already voted!")
+    } 
+})
+
+function voterRegister(){
+    let loginForm = 
+    `
+        <h2 class="registration-text">REGISTER YOURSELF</h2>
+        <form id="login_form">
+            <label for="username">Your Full Name:</label>
+            <input type="text" id="input" class="username" name="username" placeholder="Enter your full name" required><br/>
+            <label for="voter_id">6 Digits Voter ID:</label>
+            <input type="number" id="input" class="voter_id" name="voter_id" placeholder="Enter voter id" size="6" required><br/>
+            <label for="phone">Registered Phone Number:</label>
+            <input type="number" id="input" class="phone" name="phone" placeholder="Enter phone number" size="10" required> <br/>
+            <button type="button" value="Submit" id="login" class="login"> Register </button>
+        </form>
+    `
+    return loginForm
+}
+
+function registerVoter(){
+        document.getElementById("registration").style.display="none"
+        document.getElementById("candidates").style.display="flex"
+        document.getElementById("candidates-brand").style.display="block"
+}
+
+
+function getCandidates(){
+    let votedCandidates = ""
+    let totalVotes = 0
+
+    candidateArray.forEach(function(candidate) {
+        votedCandidates+=
+        `
+            <div class="cadidate-card">
+                <img class="profile-pic" src="${candidate.img}"
+                <h3 class="candidate-name">${candidate.name}</h3>
+                <div id="candidate-data">
+                    <p class="symbol">Icon: ${candidate.symbol}</p>
+                </div>
+                <button type="submit" id="vote" data-vote=${candidate.id}>VOTE</button>
+            </div>
+        `
+        totalVotes+= candidate.votes
+
+    });
+    return votedCandidates
+}
+
+function render(){
+    document.getElementById("registration").innerHTML = voterRegister()
+    document.getElementById("candidates").innerHTML = getCandidates()   
+}
+
+
+function givenVote(candidateId){
+    const idNo = candidateArray.filter(function (candidate){
+        return candidate.id === parseInt(candidateId)
+    })[0]
+
+    if(idNo.isVoted === false){
+        idNo.isVoted = true
+        idNo.votes += 1
+    }
+    let totalVotes=0
+
+    candidateArray.forEach(function(candidate) {
+        totalVotes+=candidate.votes
+    })
+
+    let percentVote=""
+    candidateArray.forEach(function(candidate) {   
+    percentVote+=`
+        <div class="cadidate-card">
+            <img class="profile-pic" src="${candidate.img}"
+            <h3 class="candidate-name">${candidate.name}</h3>
+            <div id="candidate-data">
+                <p class="symbol">Icon: ${candidate.symbol}</p>
+            </div>
+            <div class="bar">
+                <div class="inside" style="height:1em;width:${Math.floor((candidate.votes/totalVotes)*100)}%;background-image:linear-gradient(45deg, #e9f4f5 25%, #00a894 25%, #00a894 50%, #e9f4f5 50%, #e9f4f5 75%, #00a894 75%, #00a894 100%);"><p>${Math.floor((candidate.votes/totalVotes)*100)}%</p> </div>
+            </div>
+        </div>
+        
+    `
+    })
+
+    return percentVote
+}
+
+render()
+
+
+