CODEWITHSUNDEEP
javascriptjquerycanvasgoogle-chrome-extensionhtml5-canvas
Josh Robertson
Josh Robertson

Reputation: 131

Countdown to a day, updates everyday?

I am trying to make a chrome extension that just has a number and updates everyday( subtracts 1 )

I have already made it print out the number as the chrome extension background but now I am trying to make the number change everyday. I have 4 files:

background.js
icon_19.png
jquery.js
manifest.json

icon_19.png is needed because in order to set the background of the extension using canvas you must first have a image.

jquery.js is just javascript library. I include that.

manifest.json:

{
  "manifest_version": 2,

  "name": "Countdown",
  "description": "This extension countdowns to my death.",
  "version": "1.0",
  "background": {
    "scripts":["background.js"]
  },
  "browser_action": {
    "default_title": "Countdown",
    "default_popup": "countdown.html"
  }
}

background.js:

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var myDeath = new Date();
myDeath.setMonth(7);
myDeath.setDate(16);
var canvas = document.createElement('canvas');
canvas.width = 19;
canvas.height = 19;
var ctx = canvas.getContext('2d');
var start = 18;

ctx.font='20px Arial';

setInterval(function() {
  ctx.clearRect(0,0,19,19);
  ctx.fillText(start, 0, 19, 19);
  start--;
  chrome.browserAction.setIcon({
    imageData: ctx.getImageData(0, 0, 19, 19)
  })  
}, 1000);

What this does, is it prints out the number(start) as the chrome extension background. Then it begins to count down every 1 second. It works too. I just need to some how make it so that it only subtracts -1 for every next day until I hit myDeath. Does anybody know how to change the number by 1 every day? I want the number to go down once everyday when I open chrome. Thanks in advance!! :)

Upvotes: 1

Views: 320

Answers (1)

joequincy
joequincy

Reputation: 1395

A few notes:

  • You'll want to increase the refresh interval. No sense refreshing a day count every second. I've set it at every 12 hours, but you can change it to however many you'd like.
  • Calculating the date difference should be its own function, so that you can call it repeatedly. This makes the code a bit easier to maintain, as the death date data is separated from the code that utilizes it.
  • I've separated out the death date configuration into its own object for maintainability.
  • death.month holds a value from 1-12. See the first code comment.
  • death.year is optional, and that argument is not required in the function.
  • Nothing outside of background.js needs changing.

background.js

var death = {
    day: 16,
    month: 8
}
var intervalHours = 12;

function getRemainingDays(d, m, y){
    var today = new Date();
    var myDeath = new Date();
    myDeath.setMonth(m-1); // Month is a range from 0-11; this lets you configure using a range from 1-12
    myDeath.setDate(d);
    if(typeof y !== "undefined"){ // if death.year is not provided, just use the current year
        myDeath.setYear(y);
    }
    return (myDeath-today)/86400000; // (myDeath-today) produces a result in milliseconds, this turns that into days
}

var canvas = document.createElement('canvas');
canvas.width = 19;
canvas.height = 19;
var ctx = canvas.getContext('2d');
ctx.font='20px Arial';

setInterval(function() {
  ctx.clearRect(0,0,19,19);
  ctx.fillText(getRemainingDays(death.day, death.month), 0, 19, 19);
  chrome.browserAction.setIcon({
    imageData: ctx.getImageData(0, 0, 19, 19)
  })  
}, (intervalHours*3600000)); // converts hours to milliseconds

Upvotes: 1

Related Questions