I mean, why is it always such a big deal to get hackers to submit to the hackathon?!?
What it looks like
(not started / deadline passed / submissions open)
How it works
The button does four things:
- It stores info about your hackathon (the URL, start time, deadline)
- If the hackathon hasn't started yet, it directs readers to register for it on Devpost.
- If the hackathon has started, it directs you to submit by taking you right ot the form.
- If the hackathon has ended, it directs you to the submission gallery.
All the logic is controlled by the current time and the hackathon dates, which you set manually via
data-slug the hackathon subdomain pennapps.devpost.com
data-begin the date & time when submissions open "2015-09-27 10:00 EST"
data-deadline the date & time of the submission deadline
data-defcss you can set this to false to override the Devpost CSS button styles
On page load, we use
Date.parse() to convert the start, deadline, and current dates into epoch time. After that, we run through a few simple comparison conditions to figure out where we are temporally in hackathon time and update the link text & href to match.
And if you don't override
defcss, we then apply some Devpost-y styles.
How to use it
Get ready, it's super complicated:
<a href target="_blank" class="devpostButton" data-slug="artik" data-begin="2015-05-12 10:00 PDT" data-deadline="2016-01-31 17:00 PST" data-defcss="true" >Submit your hack on Devpost</a> <script src="devpostButton.js"></script>
Ha, I tricked you, it's actually really simple.
Things that'd be nice / improvements
We don't have an API or a JSON scheme for hackathon data, so right now you have to add in the start / deadline times manually. Ideally, you'd just have to supply the
data-slug and we could run a JSONP request to grab the other data.
A dynamic countdown timer would be neat too, but does anyone really need that much JS in one button?