From 1c33b16415bbfdd50208cb7b679d76d47823ce13 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Tue, 14 Feb 2023 13:49:23 +0400
Subject: [PATCH 1/7] improvement: replace `<a`s with `<button`s

---
 index.html | 37 ++++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index d789f47..b930160 100755
--- a/index.html
+++ b/index.html
@@ -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;
@@ -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">
@@ -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>
@@ -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>

From 7912b72f35a1e51c5b469fba9546b326016c721b Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Tue, 14 Feb 2023 14:14:07 +0400
Subject: [PATCH 2/7] refactor: rename a var

So it doesn't look like it's a constant
---
 index.html | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index b930160..76f3c2a 100755
--- a/index.html
+++ b/index.html
@@ -125,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: "",
@@ -140,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.";
@@ -154,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());
 					}
@@ -181,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");
@@ -200,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 {
@@ -214,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);
 					}
@@ -258,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;
@@ -269,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;
@@ -290,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 =
@@ -300,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");
@@ -321,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);
@@ -381,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: [],
@@ -396,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(

From 8e5c6f1efd887b812c9b121fd08369862a335b83 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Tue, 14 Feb 2023 15:12:28 +0400
Subject: [PATCH 3/7] docs: update README according to recent changes

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5d09962..cbc967e 100755
--- a/README.md
+++ b/README.md
@@ -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>
 

From 532412321fffc94850799e56a72df64bb375de67 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Mon, 20 Feb 2023 18:22:19 +0400
Subject: [PATCH 4/7] style: decrease body padding

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 76f3c2a..cb61865 100755
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
 			}
 			body {
 				font-family: sans-serif;
-				padding: 2em;
+				padding: 0.5em;
 			}
 			.page {
 				border: 4px solid #3792fc;

From 6cd758b3ba65fe59a08747bb5836c97b571709f1 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Tue, 21 Feb 2023 14:42:45 +0400
Subject: [PATCH 5/7] improvement: utilize `<form>` for validation

---
 index.html | 78 +++++++++++++++++++++++++-----------------------------
 1 file changed, 36 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index cb61865..780654e 100755
--- a/index.html
+++ b/index.html
@@ -65,36 +65,38 @@
 
 	<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>
+				<div id="answers">
+					<p>
+						<b>Question:</b><br />
+						<input type="text" id="configureQuestion" required pattern=".*\S.*" /><br />
+						&nbsp;
+					</p>
+					<p>
+						Answer #1:<br />
+						<input type="text" id="configureAnswer0" class="answer" required pattern=".*\S.*" />
+					</p>
+					<p>
+						Answer #2:<br />
+						<input type="text" id="configureAnswer1" class="answer" required pattern=".*\S.*" />
+					</p>
+				</div>
 				<p>
-					<b>Question:</b><br />
-					<input type="text" id="configureQuestion" /><br />
+					<span id="configureHint">Please fill all the answers</span><br />
 					&nbsp;
 				</p>
-				<p>
-					Answer #1:<br />
-					<input type="text" id="configureAnswer0" class="answer" />
-				</p>
-				<p>
-					Answer #2:<br />
-					<input type="text" id="configureAnswer1" class="answer" />
-				</p>
-			</div>
-			<p>
-				<span id="configureHint">Please fill all the answers</span><br />
-				&nbsp;
-			</p>
 
-			<button type="button" class="button" onclick="addAnswer()"
-				>Add an answer</button
-			>
-			<button type="button" class="button" onclick="removeAnswer()"
-				>Remove an answer</button
-			>
-			<button type="button" class="button" onclick="configure()"
-				>Create Poll</button
-			>
+				<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>
@@ -132,23 +134,11 @@ <h2 id="resultsQuestion">Question</h2>
 				answers: [],
 			};
 
-			function configure() {
-				// validate input
-				if (document.getElementById("configureQuestion").value.trim() === "") {
-					document.getElementById("configureHint").innerText =
-						"⚠️ Please enter a question.";
-					return;
-				}
+			document.getElementById("configurePageForm").addEventListener("submit", e => {
+				e.preventDefault();
+
 				var answerObjects = document.getElementsByClassName("answer");
 				maxAnswers = answerObjects.length;
-				for (let i = 0; i < maxAnswers; i++) {
-					if (answerObjects[i].value.trim() === "") {
-						document.getElementById("configureHint").innerText =
-							"⚠️ Please enter all the answers.";
-						return;
-					}
-				}
-
 				// change status
 				globalStatus.question = document
 					.getElementById("configureQuestion")
@@ -174,7 +164,7 @@ <h2 id="resultsQuestion">Question</h2>
 					},
 					'Poll "' + globalStatus.question + '" created!'
 				);
-			}
+			});
 
 			function isConfigured() {
 				return globalStatus.question.trim() !== "";
@@ -188,6 +178,10 @@ <h2 id="resultsQuestion">Question</h2>
 				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.classList.add("answer");
 				newAnswer.appendChild(input);
 				// var removeBtn = document.createElement("button");

From d18312e9f51b2109e6889da04cf7287fcad89dc7 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Tue, 21 Feb 2023 14:51:49 +0400
Subject: [PATCH 6/7] refactor: DRY the creation of answer elements

---
 index.html | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 780654e..114d01d 100755
--- a/index.html
+++ b/index.html
@@ -32,6 +32,10 @@
 				max-width: 50em;
 				background: white;
 			}
+			#answers {
+				padding: 0;
+				list-style: none;
+			}
 			input[type="text"] {
 				width: 90%;
 			}
@@ -67,21 +71,13 @@
 		<div id="configurePage" class="page" style="display: block">
 			<form id="configurePageForm">
 				<h2>Configure Your Poll</h2>
-				<div id="answers">
-					<p>
-						<b>Question:</b><br />
-						<input type="text" id="configureQuestion" required pattern=".*\S.*" /><br />
-						&nbsp;
-					</p>
-					<p>
-						Answer #1:<br />
-						<input type="text" id="configureAnswer0" class="answer" required pattern=".*\S.*" />
-					</p>
-					<p>
-						Answer #2:<br />
-						<input type="text" id="configureAnswer1" class="answer" required pattern=".*\S.*" />
-					</p>
-				</div>
+				<p>
+					<b>Question:</b><br />
+					<input type="text" id="configureQuestion" required pattern=".*\S.*" /><br />
+					&nbsp;
+				</p>
+				<ul id="answers">
+				</ul>
 				<p>
 					<span id="configureHint">Please fill all the answers</span><br />
 					&nbsp;
@@ -127,12 +123,14 @@ <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 maxAnswers = 2;
+			var maxAnswers = 0;
 			var globalStatus = {
 				people: [],
 				question: "",
 				answers: [],
 			};
+			addAnswer();
+			addAnswer();
 
 			document.getElementById("configurePageForm").addEventListener("submit", e => {
 				e.preventDefault();
@@ -173,7 +171,7 @@ <h2 id="resultsQuestion">Question</h2>
 			function addAnswer() {
 				maxAnswers++;
 				//create new dom answer
-				var newAnswer = document.createElement("p");
+				var newAnswer = document.createElement("li");
 				newAnswer.textContent = "Answer #" + maxAnswers + ":";
 				newAnswer.appendChild(document.createElement("br"));
 				var input = document.createElement("input");

From 1df5ca3791282007b7eb93936e9248f0bc987a20 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Tue, 21 Feb 2023 15:04:18 +0400
Subject: [PATCH 7/7] improvement: use `<label>` for labels instead of just
 text

---
 index.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 114d01d..b48e872 100755
--- a/index.html
+++ b/index.html
@@ -72,7 +72,7 @@
 			<form id="configurePageForm">
 				<h2>Configure Your Poll</h2>
 				<p>
-					<b>Question:</b><br />
+					<label for="configureQuestion"><b>Question:</b></label><br />
 					<input type="text" id="configureQuestion" required pattern=".*\S.*" /><br />
 					&nbsp;
 				</p>
@@ -116,6 +116,11 @@ <h2 id="resultsQuestion">Question</h2>
 			</p>
 		</div>
 		<script>
+			let _nextUniquieNum = 1;
+			const uniquieNum = () => {
+				return _nextUniquieNum++;
+			}
+
 			// the status is altered by the following updates:
 			//
 			// {action:"configure", question:"", answers:["", "", "", "", ""]}
@@ -172,7 +177,11 @@ <h2 id="resultsQuestion">Question</h2>
 				maxAnswers++;
 				//create new dom answer
 				var newAnswer = document.createElement("li");
-				newAnswer.textContent = "Answer #" + maxAnswers + ":";
+				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");
@@ -180,6 +189,7 @@ <h2 id="resultsQuestion">Question</h2>
 				// 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");