nyancrimew/watch-party
1
0
Fork 0
forked from lavender/watch-party
Code Issues Pull requests Projects Releases Wiki Activity

Textual feedback for personal colour

Browse source
This commit is contained in:
Charlotte Som 2022-04-29 23:41:33 +01:00
parent 8e19d7b34d
commit 0fc8953a69
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/index.html
View file

@ -30,7 +30,9 @@
required required
/> />
<label for="join-session-colour">Personal Colour:</label> <label id="join-session-colour-label" for="join-session-colour">
Personal Colour:
</label>
<input type="color" id="join-session-colour" value="#ffffff" required /> <input type="color" id="join-session-colour" value="#ffffff" required />
<label for="join-session-id">Session ID:</label> <label for="join-session-id">Session ID:</label>
@ -65,5 +67,18 @@
</div> </div>
<script type="module" src="/main.mjs?v=bfdcf2"></script> <script type="module" src="/main.mjs?v=bfdcf2"></script>
<script>
const updateColourLabel = () => {
const colour = document.querySelector("#join-session-colour").value;
document.querySelector(
"#join-session-colour-label"
).textContent = `Personal Colour: ${colour}`;
};
document
.querySelector("#join-session-colour")
.addEventListener("input", updateColourLabel);
updateColourLabel();
</script>
</body> </body>
</html> </html>