Skip to content
This repository was archived by the owner on Jul 5, 2023. It is now read-only.

Minor adjustments and refactoring #10

Open
WofWca wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Minor adjustments and refactoring #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1c33b16
improvement: replace `<a`s with `<button`s
WofWca Feb 14, 2023
7912b72
refactor: rename a var
WofWca Feb 14, 2023
8e5c6f1
docs: update README according to recent changes
WofWca Feb 14, 2023
5324123
style: decrease body padding
WofWca Feb 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

A Webxdc with a simple poll -
one question,
up to 5 answers.
several answers.

<img width=200 src=https://user-images.githubusercontent.com/9800740/170297694-dfa34dec-3bef-4b05-89af-cc416022e5b5.png> <img width=200 src=https://user-images.githubusercontent.com/9800740/170297702-68644a2e-fe19-427b-93c4-3083bdefa95f.png> <img width=200 src=https://user-images.githubusercontent.com/9800740/170297700-e679efa7-1696-4a94-b18a-48729c97953b.png>

Expand Down
75 changes: 41 additions & 34 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}
body {
font-family: sans-serif;
padding: 2em;
padding: 0.5em;
}
.page {
border: 4px solid #3792fc;
Expand All @@ -35,19 +35,26 @@
input[type="text"] {
width: 90%;
}
a {
color: #3792fc;
text-decoration: none;
}
a.button {
.button {
color: #fff;
background: #3792fc;
cursor: pointer;
border: none;
font-size: 1rem;
padding: 1em;
border-radius: 1em;
margin-right: 1em;
margin-bottom: 20px;
display: inline-block;
}
.button-link-like {
color: #3792fc;
border: none;
background: none;
cursor: pointer;
font-size: 1rem;
padding: 0;
}

.resultsBar {
background-color: #3792fc;
Expand Down Expand Up @@ -79,14 +86,14 @@ <h2>Configure Your Poll</h2>
&nbsp;
</p>

<a class="button" href="" onclick="addAnswer(); return false;"
>Add an answer</a
<button type="button" class="button" onclick="addAnswer()"
>Add an answer</button
>
<a class="button" href="" onclick="removeAnswer(); return false;"
>Remove an answer</a
<button type="button" class="button" onclick="removeAnswer()"
>Remove an answer</button
>
<a class="button" href="" onclick="configure(); return false;"
>Create Poll</a
<button type="button" class="button" onclick="configure()"
>Create Poll</button
>
</div>
<div id="votePage" class="page" style="display: none">
Expand All @@ -95,9 +102,9 @@ <h2 id="voteQuestion">Question</h2>
<p id="voteHint" style="display: none"></p>
<p>
<br />
<a class="button" href="" onclick="vote(); return false;">Vote</a>
<a href="" onclick="refresh('resultsPage'); return false;"
>View Results</a
<button type="button" class="button" onclick="vote()">Vote</button>
<button type="button" class="button-link-like" onclick="refresh('resultsPage')"
>View Results</button
>
</p>
</div>
Expand All @@ -107,7 +114,7 @@ <h2 id="resultsQuestion">Question</h2>

<div><span id="resultsTotalVotes">0</span> people voted</div>
<p>
<a href="" onclick="refresh('votePage'); return false;">Your Vote</a>
<button type="button" onclick="refresh('votePage')">Your Vote</button>
</p>
</div>
<script>
Expand All @@ -118,7 +125,7 @@ <h2 id="resultsQuestion">Question</h2>
//
// configure is only executed when there are no votes yet,
// subsequent votes from the same addr overwrite previous votes.
var MAX_ANSWERS = 2;
var maxAnswers = 2;
var globalStatus = {
people: [],
question: "",
Expand All @@ -133,8 +140,8 @@ <h2 id="resultsQuestion">Question</h2>
return;
}
var answerObjects = document.getElementsByClassName("answer");
MAX_ANSWERS = answerObjects.length;
for (let i = 0; i < MAX_ANSWERS; i++) {
maxAnswers = answerObjects.length;
for (let i = 0; i < maxAnswers; i++) {
if (answerObjects[i].value.trim() === "") {
document.getElementById("configureHint").innerText =
"⚠️ Please enter all the answers.";
Expand All @@ -147,7 +154,7 @@ <h2 id="resultsQuestion">Question</h2>
.getElementById("configureQuestion")
.value.trim();
var answers = [];
for (let i = 0; i < MAX_ANSWERS; i++) {
for (let i = 0; i < maxAnswers; i++) {
if (answerObjects[i].value.trim() !== "") {
answers.push(answerObjects[i].value.trim());
}
Expand All @@ -174,10 +181,10 @@ <h2 id="resultsQuestion">Question</h2>
}

function addAnswer() {
MAX_ANSWERS++;
maxAnswers++;
//create new dom answer
var newAnswer = document.createElement("p");
newAnswer.textContent = "Answer #" + MAX_ANSWERS + ":";
newAnswer.textContent = "Answer #" + maxAnswers + ":";
newAnswer.appendChild(document.createElement("br"));
var input = document.createElement("input");
input.setAttribute("type", "text");
Expand All @@ -193,8 +200,8 @@ <h2 id="resultsQuestion">Question</h2>
}

function removeAnswer() {
if (MAX_ANSWERS > 2) {
MAX_ANSWERS--;
if (maxAnswers > 2) {
maxAnswers--;
var answer = document.getElementsByClassName("answer");
answer[answer.length - 1].parentNode.remove();
} else {
Expand All @@ -207,7 +214,7 @@ <h2 id="resultsQuestion">Question</h2>
// validate input
var person = window.webxdc.selfAddr;
var vote = [];
for (let i = 0; i < MAX_ANSWERS; i++) {
for (let i = 0; i < maxAnswers; i++) {
if (document.getElementById("voteRadio" + i).checked) {
vote.push(i);
}
Expand Down Expand Up @@ -251,7 +258,7 @@ <h2 id="resultsQuestion">Question</h2>

function hasSelfVoted() {
var selfAddr = window.webxdc.selfAddr;
for (let i = 0; i < MAX_ANSWERS; i++) {
for (let i = 0; i < maxAnswers; i++) {
for (let j = 0; j < globalStatus.answers[i].votes.length; j++) {
if (globalStatus.answers[i].votes[j] === selfAddr) {
return true;
Expand All @@ -262,14 +269,14 @@ <h2 id="resultsQuestion">Question</h2>
}

function removeVote(addr) {
for (let i = 0; i < MAX_ANSWERS; i++) {
for (let i = 0; i < maxAnswers; i++) {
globalStatus.answers[i].votes = globalStatus.answers[i].votes.filter((vote) => vote !== addr);
}
}

function getTotalVotes() {
var totalVotes = 0;
for (let i = 0; i < MAX_ANSWERS; i++) {
for (let i = 0; i < maxAnswers; i++) {
totalVotes += globalStatus.answers[i].votes.length;
}
return totalVotes;
Expand All @@ -283,7 +290,7 @@ <h2 id="resultsQuestion">Question</h2>
document.getElementById("voteQuestion").innerText =
globalStatus.question;
document.getElementById("voteHint").style.display = "none";
// for (let i = 0; i < MAX_ANSWERS; i++) {
// for (let i = 0; i < maxAnswers; i++) {
// document.getElementById("voteDiv" + i).style.display =
// globalStatus.answers[i].answer === "" ? "none" : "block";
// document.getElementById("voteLabel" + i).innerText =
Expand All @@ -293,7 +300,7 @@ <h2 id="resultsQuestion">Question</h2>
//create answer checkboxes
var checkBoxes = document.getElementById("voteCheckboxes");
checkBoxes.innerHTML = "";
for (let i = 0; i < MAX_ANSWERS; i++) {
for (let i = 0; i < maxAnswers; i++) {
var p = document.createElement("p");
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
Expand All @@ -314,7 +321,7 @@ <h2 id="resultsQuestion">Question</h2>
let totalVotes = getTotalVotes();
var resultsContainer = document.getElementById("resultsDiv");
resultsContainer.innerHTML = "";
for (let i = 0; i < MAX_ANSWERS; i++) {
for (let i = 0; i < maxAnswers; i++) {
// let votes = globalStatus.answers[i].votes.length;
// let percent =
// totalVotes === 0 ? 0 : Math.round((votes * 100) / totalVotes);
Expand Down Expand Up @@ -374,9 +381,9 @@ <h2 id="resultsQuestion">Question</h2>
if (update.payload.action === "configure") {
if (!isConfigured()) {
globalStatus.question = update.payload.question;
MAX_ANSWERS = update.payload.answers.length;
maxAnswers = update.payload.answers.length;
}
for (let i = 0; i < MAX_ANSWERS; i++) {
for (let i = 0; i < maxAnswers; i++) {
globalStatus.answers.push({
answer: update.payload.answers[i],
votes: [],
Expand All @@ -389,7 +396,7 @@ <h2 id="resultsQuestion">Question</h2>

if (
update.payload.vote.length >= 1 &&
update.payload.vote.length <= MAX_ANSWERS
update.payload.vote.length <= maxAnswers
) {
for (let i = 0; i < update.payload.vote.length; i++) {
globalStatus.answers[update.payload.vote[i]].votes.push(
Expand Down