How do I change the class of a tag upon the end of a timer and a press of an image?

Question

A site has TOS, I want to have a "Confirmation" button
When people load the page a timer that consists of 10 minutes starts counting down
If the button was pressed before it ends I want it to change the value of "Confirm" to "Hidden" and "Hidden-Message" to "Message">
<img src="https://actual.url.com" class="Confirm">
<p class="Hidden-Message">Please read the TOS, Confirm button will show up in </p> <!--timer -->
And when the timer ends I want "Hidden" and "Confirm" to go turn into "Confirm2"
How?

Answer 1

Welcome back.

There are a bunch of suggestions and alternatives listed here. Which "it" are you referring to?

Answer 2

There's a lot here, but firstly, I noticed that JavaScript wasn't among the tags for this post. Dynamically changing classes of HTML elements would be a good use case for JavaScript.

Secondly, it sounds like you want the image to act like a button, but didn't describe what the button should do as far as user experience is concerned (only what classes you want applied depending on the timer's value), so I would default to wrapping the image element in a button element (like <button><img ...></button>) or moving the image to the button's CSS. However, if I knew more, I might make a different recommendation.

Thirdly, it's not clear what the classes are supposed to do, once applied. If the "Confirm" image/button will actually be hidden once clicked (as in disappear as far as the user is concerned) this seems like it will be a very confusing experience for the user. Perhaps it should be grayed out and disabled instead until the timer is up instead of vanishing when pressed.

[I've hit my character limit ...]

Answer 3

[...Continued from before.]

Fourthly, an alert might be better than a revealed paragraph for the user-error type message.

Fifthly, ten minutes is a long time if the user values their time over being informed about their legal responsibilities. I feel like they are either going to read the ToS or not, but having a long timer won't encourage them to read any more than having a much shorter timer (or having a scroll-to-bottom deal). Ten minutes is quite long enough to find something else to do or some other site to navigate to entirely. (Inversely, some websites have 10-minute time-outs for their ToS, which is also a bad practice when most ToSs take way longer than 10 minutes for anyone who actually wanted to read them.)

Finally, there are complicated ways of hiding/displaying elements conditionally in CSS, but I'm fairly certain there isn't a <timer> element in HTML, so you would most likely be using JavaScript anyway.

If you have any additional questions, please don't hesitate to reach out! :)

Answer 4

10 minutes was just an example, it won't be that long, don't worry
So, how do I do it in JavaScript?