javascript tools

[mosaic-greg]

Hi guys, I'm looking for some code that gives two options to the user, and if neither of these are chosen, then the program executes a third option after a countdown timer has passed. I think the code below and an if/else statement should work, but I might need some HTML buttons also which I haven't used yet. Which kind of tool (preferably web based) should I use to easily preview and code this idea?

var count=30;

var counter=setInterval(timer, 1000); //1000 will run it every 1 second

function timer() { count=count-1; if (count <= 0) { clearInterval(counter); //counter ended, do something here return; }

//Do code for showing the number of seconds here }

[shearichard]

Just this past weekend I came across this tool which is kind of like jsfiddle or jsbin but it's actually aimed more at Node apps. It's called jsapp.us/.

Hope it helps.

[shearichard]

Sorry I meant to say the jsapp thing rather unfortunately requires your browser to allow popups so just watch out for that because otherwise you might think it's not providing any output.

[shearichard]

I had this nagging feeling that for what you'd described that jsbin would do just fine and sure enough it does. I stole the example code from MDN - https://jsbin.com/qefeza/edit?html,css,output .

[mosaic-greg]

Hi JSBin looks great, a bit like codepen.io but I like the light theme better.

[shearichard]

Yes it's good. I like the 'Save Snapshot' facility which provides a sort of rough and ready source control. Also the 'Add Description' really helps for when you're trying to find something you've done previously - makes looking through old stuff a lot easier.

Some of that stuff may only work if you've got an account (which is free at the base level) .

[ahdinosaur]

for a "Node-y" codepen / jsbin i recommend requirebin, which allows you to require modules from npm via browserify.

[mosaic-greg]

So many interesting things to learn, my head is spinning http://output.jsbin.com/xukuci

[mosaic-greg]

A tennis scoring app I wrote, feedback welcome http://output.jsbin.com/pikaqu/

[mosaic-greg]

How do I avoid duplicating the code blocks for player1 and player2? I imagine the "this" keyword would help but I can't quite see how to use it.

[mosaic-greg]

The code is at http://jsbin.com/pikaqu/edit?html,css,js,output

[ahdinosaur]

@mosaic-greg closures! for example:

function createPlayerScoreCalc (playerIndex, players) {
  return function playerScoreCal () {
    // do logic ...
  }
}

function update() {...}

var player1 = {...}
var player2 = {...}

var players = [player1, player2]

var p1scorecalc = createPlayerScoreCalc(0, players)
var p2scorecalc = createPlayerScoreCalc(1, players)

document.addEventListener(...)

helpful at all?

[mosaic-greg]

wow this looks great thanks, I'll have a go at working it in.

[mosaic-greg]

Hi I have a closure that is working now

function createcalc(n){
  return function(){
   return (n = n + 15);
  };
}
var p1scorecalc = createcalc(player1.score);
var player1 = {score:0,
              };

when I call p1scorecalc() it looks like 15 is added to n. So when player1.score = p1scorecalc() happens, 15 is added to the score each time. It's all a bit counterintuitive but kind of makes sense. Cheers! :)

[mosaic-greg]

Hi guys, these two closures seem identical but the calcnow() returns NaN while pscorecalc() works ok. Is there a typo somewhere that causes this?

var player1score = 0;
function scorecalcc(n){
   return function(){
    return (n = n + 15);
  };
}

var calcnow = scorecalcc(player1score);

function createcalc(n){
  return function(){
   return (n = n + 15);
  };
}
var pscorecalc = createcalc(player1score);

[shearichard]

I don't get what you're describing so I may have misunderstood you.

I added a few logging statements like this ...

var player1score = 0;
function scorecalcc(n){
   return function(){
    return (n = n + 15);
  };
}

var calcnow = scorecalcc(player1score);

function createcalc(n){
  return function(){
   return (n = n + 15);
  };
}
var pscorecalc = createcalc(player1score);

console.log(calcnow);
console.log(pscorecalc);
console.log(calcnow());
console.log(pscorecalc());

... and the output looks like this ...

function (){
  return (n = n + 15);
}
function (){
 return (n = n + 15);
}
15
15

... which is what I think it should be .

First the actual functions that were returned from the scorecalcc and createcalc and then , when I execute those functions, the values returned by those functions based on the arguments passed in when the calcnow and pscorecalc vars were first initialized.

Would be interested to hear under what circs you get NaN.