diff options
Diffstat (limited to 'mottovote/public')
| -rw-r--r-- | mottovote/public/index.html | 12 | ||||
| -rw-r--r-- | mottovote/public/script.js | 4 | ||||
| -rw-r--r-- | mottovote/public/style.css | 55 |
3 files changed, 67 insertions, 4 deletions
diff --git a/mottovote/public/index.html b/mottovote/public/index.html index 27ea837..4e64cb8 100644 --- a/mottovote/public/index.html +++ b/mottovote/public/index.html @@ -1,15 +1,23 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Motto Vote</title> + <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" + integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous" /> + <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> + <body> - <div id="vote"></div> - <button id="voteButton">Vote!</button> + <main> + <div id="vote"></div> + <button class="pure-button pure-button-primary" id="voteButton">Vote!</button> + </main> <script src="script.js"></script> </body> + </html>
\ No newline at end of file diff --git a/mottovote/public/script.js b/mottovote/public/script.js index 338b26b..c8432c5 100644 --- a/mottovote/public/script.js +++ b/mottovote/public/script.js @@ -12,7 +12,7 @@ async function get() { for (let i = 0; i < maxVotes; i++) { const cb = document.createElement("input"); cb.type = "checkbox"; - cb.name = id; + cb.value = id; cb.checked = motto.votes && motto.votes-- > 0 row.append(cb); } @@ -40,7 +40,7 @@ function addListeners() { const checked = document.querySelectorAll("input[type=checkbox]:checked"); if (checked.length > maxVotes) return; // Shouldn't be necessary const req = {}; - for (const box of checked) req[box.name] = box.name in req ? req[box.name] + 1 : 1; // Amount of votes + for (const box of checked) req[box.value] = box.value in req ? req[box.value] + 1 : 1; // Amount of votes const resp = await fetch("api/vote", { method: "PUT", headers: { "Content-Type": "application/json" }, diff --git a/mottovote/public/style.css b/mottovote/public/style.css new file mode 100644 index 0000000..bf4eac7 --- /dev/null +++ b/mottovote/public/style.css @@ -0,0 +1,55 @@ +html, +body { + padding: 0; + margin: 0; + height: 100%; + width: 100%; + background-color: #eec0c6; + background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%); +} + +main { + display: flex; + flex-flow: row wrap; + position: absolute; + height: 40%; + width: 50%; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + padding: 20px; + border-radius: 10px; + background: white; +} + +#voteButton { + height: 10%; +} + +#vote { + margin-bottom: 20px; + overflow-y: scroll; + width: 100%; +} + +#vote div { + padding: 5px; + display: flex; + align-items: center; +} + +#vote div input { + margin-right: 5px; +} + +button, +select { + width: 100%; +} + +@media only screen and (max-width: 600px) { + div { + width: calc(100% - 50px); + } +} |