<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:2;-o-tab-size:2;tab-size:2;"><code class="language-js" data-lang="js"><span style="display:flex;"><span>(<span style="color:#66d9ef">function</span>() {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">generateData</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">level</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">last</span> <span style="color:#f92672">=</span> [];
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">while</span> (<span style="color:#a6e22e">level</span> <span style="color:#f92672">></span> <span style="color:#ae81ff">0</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">current</span> <span style="color:#f92672">=</span> [];
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672"><</span><span style="color:#a6e22e">level</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">current</span>.<span style="color:#a6e22e">push</span>(<span style="color:#ae81ff">10</span> <span style="color:#f92672">+</span> (Math.<span style="color:#a6e22e">round</span>(Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#ae81ff">50</span>)));
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">last</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">current</span>);
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">level</span><span style="color:#f92672">--</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">last</span>.<span style="color:#a6e22e">reverse</span>();
</span></span><span style="display:flex;"><span> };
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">renderTriangle</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">data</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">buffer</span> <span style="color:#f92672">=</span> [];
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">l</span><span style="color:#f92672">=</span><span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672"><</span><span style="color:#a6e22e">l</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">buffer</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">data</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">' '</span>));
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">buffer</span>.<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">"\n"</span>);
</span></span><span style="display:flex;"><span> };
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">parseData</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">data</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">sum</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">row</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pointer</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> [];
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">l</span><span style="color:#f92672">=</span><span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672"><</span><span style="color:#a6e22e">l</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">row</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>[<span style="color:#a6e22e">i</span>];
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">n</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">i</span><span style="color:#f92672">===</span><span style="color:#ae81ff">0</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">n</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">row</span>[<span style="color:#ae81ff">0</span>];
</span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">row</span>[<span style="color:#a6e22e">pointer</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>] <span style="color:#f92672">></span> <span style="color:#a6e22e">row</span>[<span style="color:#a6e22e">pointer</span>]) {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">n</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">row</span>[<span style="color:#a6e22e">pointer</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>];
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">pointer</span><span style="color:#f92672">++</span>;
</span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">n</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">row</span>[<span style="color:#a6e22e">pointer</span>];
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">sum</span> <span style="color:#f92672">+=</span> <span style="color:#a6e22e">n</span>;
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">max</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">n</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'sum'</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">sum</span>,
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'max'</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">max</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> };
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">interact</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">event</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">preventDefault</span>();
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">stopPropagation</span>();
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">LEVELS</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">8</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">generateData</span>(<span style="color:#a6e22e">LEVELS</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">triangle</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">renderTriangle</span>(<span style="color:#a6e22e">data</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">calculated</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">parseData</span>(<span style="color:#a6e22e">data</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">innerText</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">"Do it again."</span>;
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'input'</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">LEVELS</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">1.7</span>).<span style="color:#a6e22e">toString</span>() <span style="color:#f92672">+</span> <span style="color:#e6db74">"em"</span>;
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'input'</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">textAlign</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">"center"</span>;
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'input'</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">triangle</span>;
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'output-max'</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">calculated</span>.<span style="color:#a6e22e">sum</span>;
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'output-path'</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">calculated</span>.<span style="color:#a6e22e">max</span>.<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">' &raquo; '</span>);
</span></span><span style="display:flex;"><span> };
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'start-demo'</span>).<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">'click'</span>, <span style="color:#a6e22e">interact</span>);
</span></span><span style="display:flex;"><span>})();</span></span></code></pre></div>
</div>