cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              span {
	display: inline-block;
	text-align: center;

#container>div {
	padding-top: 5px
* A Pascal Triangle in ES6.
* (https://en.wikipedia.org/wiki/Pascal%27s_triangle)
* Use: scroll down to the instantiation and add the desired
* number of lines
* Author: Jean-Pierre Sierens
class PascalTriangle {
  	constructor (levels) {
		// the number of levels the triangle will have
    	this.levels = levels;
	create () {
  	createLevel (level, prevNums) {
		//get the numbers for this level
		let numbers = this.calculateLevelNumbers(level, prevNums);
		//log the level
		this.logLevel(numbers, level);
		//go to the next level (if its not the last)
		if (level !== this.levels) return this.createLevel(level+1, numbers);
	calculateLevelNumbers (level, prevNums) {
		let numbers = [];
		if (level === 1) {
			return numbers;
		// iterate over each number in the level
		for (let i = 0; i < level; i++) {
			// if it's the first or last number it's always 1
			if (i === 0 || i === level - 1) {
			} else {
				// the number becomes the sum of the two above him
				numbers.push( prevNums[i-1] + prevNums[i] );	
		return numbers;
	logLevel (numbers, level) {
		//create empty div where the numbers will go (holder)
		let $numbers = $("<div></div>");
		//padding for each holder, so that you get a nice triangle
		let padding = (this.levels - level) * this.levels*2;
		$numbers.css('padding-left', padding);
		//for each number append a span with a width, then append it to the numbers holder
		//note: arrow function for mantaining lexical scope (fuck yeah)
		numbers.forEach( (number, index) => {
				"<span style='width: "+this.levels*4+"px'>"+number+"</span>"


// Instantiation
// change the number to add more or less levels to the triangle
let pt = new PascalTriangle(10);

Loading ..................