Search code examples
coffeescriptcodepen

Coffeescript 'unspected token' in codepen

I am trying to use coffeescript in code pen

Here is the code I want to try:

$(document).ready ->
  render()

So I have enabled coffeescript in the js pane and added jQuery as an external javascript:

enter image description here

However I am getting this error

enter image description here

I am quite confident the code is valid coffeescript code. So why codepen flags 'unexpected token'?

Solution

  • If we look at all your code:

    $(document).ready ->
  render()

getWordList = ->
  [['hello', 12], ['dear', 10], ['a', 9], ['Joe', 5], ['8', 2]]

render = ->
  $canva = $('.wordcloud-canvas')
  options =
    list           : getWordList()
    fontFamily     : 'Times, serif'
    weightFactor   : 2
    color          : '#f02222'
    rotateRatio    : 0
    rotationSteps  : 0
    shuffle        : false
    backgroundColor: 'white'
    drawOutOfBound : no
    gridSize       : 320

    window.WordCloud $canvas[0], options

    We see that the problem is really that line 21 (window.WordCloud $canvas[0], options) is indented one step too far. The indentation indicates that the window.WordCloud call should be part of the options object but that's not valid CoffeeScript. If we paste that into the "Try CoffeeScript" section at http://coffeescript.org/, it even says:

    [stdin]:19:25: error: unexpected newline
    gridSize       : 320
                        ^

    If you fix that (https://codepen.io/anon/pen/GOgLbo) then spurious error message about the > goes away and you're left with a simple (and correct) complaint about spelling $canvas wrong in the $canva = $('.wordcloud-canvas') assignment.

    Your code was broken in two ways, CodePen is itself broken in a different way.