Counter code

html-css
javascript

#1

hi. I want to use this code but I want to limit it so that it can only be clicked once a day. is there a way to add that feature?

https://www.codecademy.com/courses/a-simple-counter/0/1


#2

How well do you understand the Date object?


#3

https://repl.it/@mtf/aSimpleCounter

The above will at least work, whereas the current exercise cannot be relied upon to so. It is unsupported and destined for a sunset sometime soon.

Still, the Date object question persists.


Don’t know as yet how hooked into to the code you are as yet,

<label for="qty"><abbr title="Quantity">Qty</abbr></label>

is a dynamite code phrase on the accessibility front, as well as UX.


#4

Thanks for the response. I know almost nothing about code but I can get the example code to work for what I need. Thanks for the updated version.

So I don’t know anything about the date object but I think what I need should be very simple to build.

Basically, I will put this counter on a web page where only one person will access it and click the button. I need to prevent them from clicking more than once at a time. But they should be able to click it again after midnight. So the options on any given day should be either not to click at all or to click it just once with it starting to work again after midnight.


#5

There is no real way to do what you want without a server resource. If we do it with JS then a simple refresh will undo everything.

That adds a lot of complexity since your page will need to be written in PHP or other popular server side language that responds with an HTML document.

The Date object in PHP would be implemented, not the JS object on the client. A log file on the server would be accessed with every page request, and if the date has changed since the last request, then the page would go down with the button installed, otherwise the page would go down without one.


#6

Ya. That makes sense. Should have realized it needs to be on the server side. But at least now I know what I’m looking for. I should be able to figure it out from here. Thanks.


#7

Start with a basic HTML boilerplate page, and only the HTML, no styles. Create a folder on the server and upload the file as index.php to that folder. Keep the name simple. It will be the URL to the page.

domain.tld/folder/

By giving the file a .php extension it signals to the server to parse for PHP in the response document and execute it wherever found. The output of the PHP is the response HTML or like below, the text node content. Once the page responds that you just created write a short test snippet of PHP to respond with the date. Of course that means digging into the documentation of the date object, but it doesn’t mean having to learn PHP to any real extent.

<body>
<p><?php
// php script code
?></p>
</body>

Be aware that PHP is very unforgiving. A single syntax error will result in a response code 500 hidden behind a white page. Write in steps, upload and test frequently as you go.

Also, be sure to include a robots tag in the HEAD of your document…

<meta name="robots" content="nofollow, noindex">

in addition to which you will need a disallow entry in your robots.txt file.

Other measures can be taken on the server, but I’ll leave you to investigate that.