diff --git a/main.js b/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..c303b78916f1ccd07fa955857bbf4ff8c40e6baf
--- /dev/null
+++ b/main.js
@@ -0,0 +1,42 @@
+/*==========================
+ Global JS for Polls component
+==========================*/
+console.log("i'm here");
+/* ===================
+ JS For Tabs
+ ================== */
+
+function showHideBlocks(activeCTAClass,inactiveCTAClass,diplayBlockClass,hideBlockClass,styleWanted){
+ //get all blocks
+ activeCTAClass = document.querySelectorAll(activeCTAClass);
+ inactiveCTAClass = document.querySelectorAll(inactiveCTAClass);
+ targetBlockToDiplay = document.querySelectorAll(diplayBlockClass);
+ hideBlockClass = document.querySelectorAll(hideBlockClass);
+
+ //show wanted blocks
+ for (i = 0; i < targetBlockToDiplay.length; i++) {
+ if (targetBlockToDiplay[i].style.display == 'none' || targetBlockToDiplay[i].style.display == '' ) {
+ targetBlockToDiplay[i].style.display = styleWanted;
+ }
+ else {
+ targetBlockToDiplay[i].style.display = 'none';
+ }
+ }
+ //hide other blocks
+ for (j = 0; j < hideBlockClass.length; j++) {
+ //change display
+ if (hideBlockClass[j].style.display != 'none') {
+ hideBlockClass[j].style.display = 'none';
+ }
+ }
+ //add border active blocks
+ for (k = 0; k < activeCTAClass.length; k++) {
+ //change display
+ console.log(activeCTAClass[k]);
+ activeCTAClass[k].classList.add("active-cta");
+ }
+ //remove border for inactive blocks
+ for (m = 0; m < inactiveCTAClass.length; m++) {
+ inactiveCTAClass[m].classList.remove("active-cta");
+ }
+ }
diff --git a/polls-math.js b/polls-math.js
index c0b81b7817e9e62bc8481f36f1ad0a8a44d73873..dd2eca86908b747bc8e9148e8fb09d60a1df0296 100644
--- a/polls-math.js
+++ b/polls-math.js
@@ -1,51 +1,47 @@
/***********************************************************
- Get the values of the displayed totals on each poll options
- calculate percentage they represent & display them
+ 1. Get the values of the displayed totals of each poll options
+ calculate the percentage & display them
+
+ 2. Functions that take advantage of process done in 1 in order to
+ personnalise content & css within the vote tab
***********************************************************/
-console.log("i'm here");
setTimeout(function(){
document.querySelector("#poll-votes-values").addEventListener("populate",(e)=> {
//timeout set as sometimes loads too fast and some bars aren't taken into account
setTimeout(function(){
//get all the polls
pollVoteValues = document.querySelectorAll("#poll-votes-values");
- console.log(pollVoteValues);
for (i = 0; i < pollVoteValues.length; i++){
- //for each poll get all the values
+ //for each poll get the totals of each option
voteOptionResults = pollVoteValues[i].querySelectorAll("[name=total_votes]");
var totalCount = 0;
+ var choiceNumber = 1;
var sumField = pollVoteValues[i].nextElementSibling.innerHTML;
- console.log(sumField);
-
+ //add option total to the global tally
for(y = 0; y < voteOptionResults.length; y++){
currentValue = parseInt(voteOptionResults[y].innerHTML);
-
- console.log(percentageBarField);
-
- console.log(currentValue);
if (Number.isNaN(currentValue) == false){
-
totalCount = totalCount + currentValue;
}
-
else{
console.log("it's Cheese NaN");
}
-
}
+ //launch function to display the number of votes in HTML
+ displayTotalVotes(pollVoteValues[i],totalCount);
+
+ /*now that we have the values & the totals we can calculate the %ge of each option
+ we will also take advantage of this step to launch the functions that set
+ the background color and the choice number*/
- //now that we have the values & the totals we can calculate the %ge of each option
for(z = 0; z < voteOptionResults.length; z++){
- console.log("the total here is");
- console.log(totalCount);
currentValue = parseInt(voteOptionResults[z].innerHTML);
var percentageBarField = voteOptionResults[z].nextElementSibling;
- if (Number.isNaN(currentValue) == false) {
-
+ if (Number.isNaN(currentValue) == false) {
percentageOfTotal = ((currentValue/totalCount)*100).toFixed(2)+"%";
percentageBarField.querySelector("#progressBarValue").innerHTML = percentageOfTotal;
percentageBarField.querySelector("#progressBarValue").style.width = percentageOfTotal;
@@ -56,8 +52,58 @@ setTimeout(function(){
percentageOfTotal = "";
percentageBarField.querySelector("#progressBarValue").innerHTML = "0%";
}
+ setChoiceColor(percentageBarField,choiceNumber);
+ choiceNumber = choiceNumber + 1;
+ if (choiceNumber > 3 ) {
+ choiceNumber = 1;
+ }
+
}
+ //launch the function that will set the choice number
+ setChoiceNumber(pollVoteValues[i]);
+
}
},500)
});
},500)
+
+
+function setChoiceNumber(poll){
+ /*Display each choice number
+ */
+ var choiceNumber = 1;
+ var choiceValueFields = poll.querySelectorAll("div[name=choiceValue]");
+
+ for (a = 0; a < choiceValueFields.length; a++){
+ choiceValueFields[a].innerHTML = "Choice " + choiceNumber + " : ";
+ choiceNumber = choiceNumber +1;
+ }
+}
+
+
+function setChoiceColor(currentProgressBar,round){
+ /*Have 3 colors that roll for the poll options
+ */
+ console.log("setting the color");
+ if (round == 3) {
+ currentProgressBar.querySelector("#progressBarValue").classList.add('background-third-color');
+ }
+ else if (round == 2) {
+ currentProgressBar.querySelector("#progressBarValue").classList.add('background-second-color');
+ }
+ else if (round == 1) {
+ currentProgressBar.querySelector("#progressBarValue").classList.add('background-first-color');
+ }
+ else{
+ console.log("no match");
+ }
+}
+
+function displayTotalVotes(poll,totalCount){
+ /*Create an h3 tag that will go in the div before our counter.
+ The h3 contains the total number of participants*/
+ var tag = document.createElement("H3");
+ var totalVoteContent = document.createTextNode(totalCount + " votes");
+ tag.appendChild(totalVoteContent);
+ poll.previousElementSibling.appendChild(tag);
+}
\ No newline at end of file