Inspiration

I really like those embeddable tweet widgets. If you look at the code, it's just a couplet of HTML + some minified JavaScript that populates & style a regular link or pull quote. I figured I could make something like that, but for hackathon organizers.

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:

  1. It stores info about your hackathon (the URL, start time, deadline)
  2. If the hackathon hasn't started yet, it directs readers to register for it on Devpost.
  3. If the hackathon has started, it directs you to submit by taking you right ot the form.
  4. 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 attributes:

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?

Built With

Share this project:
×

Updates