JSFiddle - React, Tailwind, and code Playground

by bryandowning

HTML

<input type="number" value="1" step="2" min="1" max="55" id="input">

<pre id="output"></pre>

CSS

pre {
  float: left;
  width: 320px;
  height: 480px;
  font-family: monospace;
  letter-spacing: 6px;
}

input {
  float: left;
  margin: 24px;
  font-size: 24px;
}

CoffeeScript

inputBox = document.getElementById 'input'
outputBox = document.getElementById 'output'


makeStr = ( char, length )-> new Array( length + 1 ).join char

build = ( max )->
  
  max = parseInt max, 10
  steps = Math.floor max/2
  starCount = 1
  output = []
  outputReversed = []

    
  # Build each line above the center
  for lines in [steps...0]
   
    str = ''
    
    # add spaces
    str += makeStr ' ', lines
    
    # add stars
    str += makeStr '*', starCount
    starCount += 2
    
    # newline
    str += "\n"
    
    output.push str
    
  
  # Reverse copy output
  outputReversed = output[..].reverse()
  
  # Make center line
  output.push makeStr '*', max
  output.push "\n"
    
  # Add reversed output
  output = output.concat outputReversed

  
  outputBox.innerHTML = output.join('');
  



inputBox.addEventListener 'change', -> build this.value
  
###
Test Output
output.innerHTML = '  *\n ***\n*****\n ***\n  *';
###