coffee calc 1

attempt at a calc of sorts

by Andy Bulka

HTML

<h1>Coffeescript Calc 1</h1>
<div id="calc">
  <input type="submit" name="button" id="f1" value="f1" class="input" />
  <input type="submit" name="button2" id="f2" value="rand pos" class="input" />
  <input type="range" min="0" max="100" id="slider1" >
  <input type="submit" name="button3" id="count1" value="count1" class="input" />
  <input type="submit" name="button4" id="count2" value="count2" class="input" />
</div>
<h2>output:</h2>
<div id="out"></div>
<div id="out2">000</div>
<div id="out3"></div>

CSS

div#out {
  background-color: #FAD3A9;
  font-size: 1.2em;
  margin:12px;
  padding:4px;
}
h1   { font-size: 2em; margin-left: .67em 0 }
h2   { font-size: 1.5em; margin-left: .75em 0 }
h3   { font-size: 1.17em; margin: .83em 0 }
/*body { margin:12px; padding:4px; }*/

div#calc {
    margin:2px; 
    padding:2px; 
    background-color: #b8f2bf;
}
.input {
    margin:3px; 
    padding:5px; 
}
div#out3 {
    margin:12px;
    -moz-column-count: 3;
    -moz-column-gap: px;
    -webkit-column-count: 3;
    -webkit-column-gap: px;
    column-count: 3;
    column-gap: px;
}
div#out2 {
    height: 30px;
    width: 100px;
    font-size: 1.5em;
    background-color: #beebed;
    margin: 0 auto;
    text-align:center;
}

CoffeeScript

class PrintToDiv
  constructor: (currdiv=$('#out')) ->
    this.setdiv(currdiv)
    
  setdiv: (currdiv) ->
    @currdiv = currdiv
    
  pr: (msg='', crlf=true, hr=false) ->
    crlf=true if msg==''
    @currdiv.append msg
    @currdiv.append ' ' if not crlf and not hr
    @currdiv.append '<br>' if crlf
    @currdiv.append '<hr>' if hr

p = new PrintToDiv()
  
p.pr(num, crlf=false) for num in [15..1]  
p.pr(hr=true)
p.setdiv($('#out3'))
p.pr(num, crlf=false) for num in [200..1]  
p.setdiv($('#out'))
p.pr('hi andy')
p.setdiv($('#out3'))
p.pr()
p.pr('hi again')
p.setdiv($('#out'))

randrange = (low=0, high=100) ->
    Math.floor(Math.random() * high) + low
  
$('#f1').bind 'click', (event) =>
  p.pr('.', crlf=false) for num in [5..1]

$('#f2').bind 'click', (event) =>
  n = randrange()
  $('#out2').html n
  $('#slider1').val(n)

$('#slider1').bind 'change', (event) =>
  $('#out2').html event.currentTarget.value
    
$('#count1').bind 'click', (event) =>
    m = 10
    do drawCallback = ->
      $('#out2').html m
      m += 10
      setTimeout drawCallback, 100 unless m > 300
  
$('#count2').bind 'click', (event) =>
    p.setdiv($('#out'))
    m = 10
    do drawCallback = ->
      p.pr(m, crlf=false)
      m += 10
      setTimeout drawCallback, 10 unless m > 400