JavaScript Programming Help

Question

Hello everyone, I have some previous programming knowledge but need some help with this. I need to create a JavaScript bookmarklet like the one that Instapaper.com has.

I want for this bookmarklet to have the following functionality and look:

• Popup on the corner of the page (which I could specify in the code)
• Display a count-up timer from 0 to 60 seconds
• Have a "timer"-like icon/graphic under the main count (see the instapaper.com script)

Those are all the basic requirements however, if someone could do the above and also help me with these that would be greatly appreciated:

• From 45 seconds to 60 seconds, I would like the font color red and flashing
• After 60 seconds, I would like it to display a messagebox with a message I could enter
• If before 60 seconds, you click on it, it would close

... and those are all the more complex requirements. If there is a way to make an "option" button under the element where you could customize these fields, that would be great!

Any and all help pointing me in the right direction or providing me with some code would be awesome. Also, I'm not sure how much of this is do-able but if someone could just help me out with the first 3 bullet points above it would be much appreciated.

Thanks!

Answer 1

JavaScript has a Date object that you can use to count seconds. new Date().time() will get you a unix timestamp. For the clock running down, you'd sleep the function using the setTimeout function so it checks every so often. For running it once a second, you'd set the value to 1000.

For a "popup" you don't want to use an actual window, but a div container element. Applying the CSS for absolute positioning to top:0px and right:0px can position it to the top-right corner

Showing a timer is trivial once you have the timer running, just take the value, format it and output by setting the innerHTML attribute of a container element to that value, for example:

document.getElementById('timer').innerHTML = clock;

Anything you can do on a web-page, you can reproduce in JavaScript since it can create HTML elements, add CSS and implement JavaScript events, though it's more cumbersome.

Answer 2

Given that you haven't provided any code, I'm going to assume you are starting at the beginning.

• JavaScript tutorial
• Bookmarklet tutorial