Sistema de votación estilo Instagram en JavaScript-versus

Vista prévia

Descripción

Versus is a pure JavaScript voting system to manage polls & votes using pure JavaScript, HTML, CSS. Inspired by Instagram.com.

Funcionamiento

Crea el HTML para el sistema de votación.

<div class="container" id="voting-box">

<div class="left" onclick="addleft()">


<div class="text">



<span class="option-size" id="size-one"></span>



<br>



<span class="option-title" id="option-one"></span>










</div>

</div>

<div class="right" onclick="addright()">


<div class="text">



<span class="option-size" id="size-two"></span>



<br>



<span class="option-title" id="option-two"></span>


</div>

</div>
</div>

Los estilos CSS necesarios.

.container {

height: 100px;

width: 300px;

background: rgb(236, 251, 255);

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-radius: 10px;

box-shadow: 0px 5px 10px -6px rgba(0, 0, 0, 0.5);

overflow: hidden;

display: grid;

grid-template-columns: 50% 50%;
}

.container>div {

text-align: center;
}

.container>div:hover {

cursor: pointer;
}

.left {

background: rgb(192, 102, 177);
}

.right {

background: rgb(97, 165, 255);
}

.text {

position: relative;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

user-select: none;
}

.option-title {

color: rgba(255, 255, 255, 1);
}

.option-size {

color: rgba(255, 255, 255, 1);

font-size: 20px;
}

El JavaScript para manejar la votación.

window.onload =
setup();

var pointA = 1;
var pointB = 1;
var totalVotes = pointA + pointB;

function addleft(){


pointA += 1;


totalVotes += 1;


updatePoints();


console.log(pointA + ' '+ pointB);
}
function addright(){


pointB += 1;


totalVotes += 1;


updatePoints();


console.log(pointA + ' '+ pointB);
}

function updatePoints(){


var percentA = (pointA / totalVotes) * 100;


var percentB = (pointB / totalVotes) * 100;


var size = percentA + "% " + percentB + "%";



document.getElementById("size-one").innerHTML = Math.round(percentA) + '%';


document.getElementById("size-two").innerHTML = Math.round(percentB) + '%';


document.getElementById("voting-box").style.gridTemplateColumns=
percentA + "% " + percentB + "%";



document.getElementById("total-votes").innerHTML = "Total Votes Casted: " + totalVotes;


document.getElementById("total-left").innerHTML = "Option A: " + pointA;


document.getElementById("total-right").innerHTML = "Option B: " + pointB;


document.getElementById("host-name").innerHTML = "Hosted by: pragyakar";
}

function setup() {


pointA = 1;


pointB = 1;


totalVotes = pointA + pointB;



document.getElementById("option-one").innerHTML = "Option A";


document.getElementById("option-two").innerHTML = "Option B";



updatePoints();
}