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

Html imporvements #11

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

Html imporvements #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 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
6cd758b
improvement: utilize `<form>` for validation
WofWca Feb 21, 2023
d18312e
refactor: DRY the creation of answer elements
WofWca Feb 21, 2023
1df5ca3
improvement: use `<label>` for labels instead of just text
WofWca Feb 21, 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
145 changes: 77 additions & 68 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 @@ -32,22 +32,33 @@
max-width: 50em;
background: white;
}
#answers {
padding: 0;
list-style: none;
}
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 All @@ -58,46 +69,40 @@

<body>
<div id="configurePage" class="page" style="display: block">
<h2>Configure Your Poll</h2>
<div id="answers">
<form id="configurePageForm">
<h2>Configure Your Poll</h2>
<p>
<b>Question:</b><br />
<input type="text" id="configureQuestion" /><br />
<label for="configureQuestion"><b>Question:</b></label><br />
<input type="text" id="configureQuestion" required pattern=".*\S.*" /><br />
&nbsp;
</p>
<ul id="answers">
</ul>
<p>
Answer #1:<br />
<input type="text" id="configureAnswer0" class="answer" />
</p>
<p>
Answer #2:<br />
<input type="text" id="configureAnswer1" class="answer" />
<span id="configureHint">Please fill all the answers</span><br />
&nbsp;
</p>
</div>
<p>
<span id="configureHint">Please fill all the answers</span><br />
&nbsp;
</p>

<a class="button" href="" onclick="addAnswer(); return false;"
>Add an answer</a
>
<a class="button" href="" onclick="removeAnswer(); return false;"
>Remove an answer</a
>
<a class="button" href="" onclick="configure(); return false;"
>Create Poll</a
>
<button type="button" class="button" onclick="addAnswer()"
>Add an answer</button
>
<button type="button" class="button" onclick="removeAnswer()"
>Remove an answer</button
>
<button type="submit" class="button"
>Create Poll</button
>
</form>
</div>
<div id="votePage" class="page" style="display: none">
<h2 id="voteQuestion">Question</h2>
<div id="voteCheckboxes"></div>
<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,47 +112,42 @@ <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>
let _nextUniquieNum = 1;
const uniquieNum = () => {
return _nextUniquieNum++;
}

// the status is altered by the following updates:
//
// {action:"configure", question:"", answers:["", "", "", "", ""]}
// {action:"vote", sender:"addr", vote:0..4}
//
// 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 = 0;
var globalStatus = {
people: [],
question: "",
answers: [],
};
addAnswer();
addAnswer();

function configure() {
// validate input
if (document.getElementById("configureQuestion").value.trim() === "") {
document.getElementById("configureHint").innerText =
"⚠️ Please enter a question.";
return;
}
var answerObjects = document.getElementsByClassName("answer");
MAX_ANSWERS = answerObjects.length;
for (let i = 0; i < MAX_ANSWERS; i++) {
if (answerObjects[i].value.trim() === "") {
document.getElementById("configureHint").innerText =
"⚠️ Please enter all the answers.";
return;
}
}
document.getElementById("configurePageForm").addEventListener("submit", e => {
e.preventDefault();

var answerObjects = document.getElementsByClassName("answer");
maxAnswers = answerObjects.length;
// change status
globalStatus.question = document
.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 @@ -167,20 +167,29 @@ <h2 id="resultsQuestion">Question</h2>
},
'Poll "' + globalStatus.question + '" created!'
);
}
});

function isConfigured() {
return globalStatus.question.trim() !== "";
}

function addAnswer() {
MAX_ANSWERS++;
maxAnswers++;
//create new dom answer
var newAnswer = document.createElement("p");
newAnswer.textContent = "Answer #" + MAX_ANSWERS + ":";
var newAnswer = document.createElement("li");
const label = document.createElement("label");
const inputId = "answer-" + uniquieNum();
label.textContent = "Answer #" + maxAnswers + ":";
label.setAttribute("for", inputId);
newAnswer.appendChild(label);
newAnswer.appendChild(document.createElement("br"));
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("required", "");
// At least one non-space character, so that when we trim it it's not
// an empty string.
input.setAttribute("pattern", ".*\\S.*");
input.setAttribute("id", inputId);
input.classList.add("answer");
newAnswer.appendChild(input);
// var removeBtn = document.createElement("button");
Expand All @@ -193,8 +202,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 +216,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 +260,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 +271,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 +292,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 +302,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 +323,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 +383,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 +398,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