Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app">
	<div class="header">
		<div class="icon">
			<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g id="filled_outline" data-name="filled outline"><path d="m451.39 256.63c-45.24 70.51-118.92 106.51-176.51 90.67a94.8 94.8 0 0 1 -26.27-11.68q-2.16-1.38-4.21-2.87c-55.52-39.99-59.68-134.55-8.45-214.38 50-77.92 134.74-113.71 194.1-83.93a94.408 94.408 0 0 1 25.49 18.69c43.23 44.5 42.89 130.21-4.15 203.5z" fill="#623b28"/><path d="m455.54 53.13-15.09 14.73a231.663 231.663 0 0 0 -66.39 126.08 231.646 231.646 0 0 1 -86.7 143.73l-12.48 9.63a94.8 94.8 0 0 1 -26.27-11.68q-2.16-1.38-4.21-2.87l16.02-12.36a231.636 231.636 0 0 0 86.71-143.73 231.608 231.608 0 0 1 66.39-126.08l16.53-16.14a94.408 94.408 0 0 1 25.49 18.69z" fill="#855037"/><path d="m219.329 468.1a95.025 95.025 0 0 1 -26.81 10.37c-1.67.37-3.33.69-5 .96-67.53 11.11-137.46-52.66-157.87-145.3-19.93-90.41 14.52-175.71 77.5-196.75a91.258 91.258 0 0 1 9.63-2.67 94.872 94.872 0 0 1 21.61-2.21c62.03.78 122.52 61.5 141.26 146.55 18.02 81.81-8.46 159.43-60.32 189.05z" fill="#744630"/><path d="m221.309 452.46-1.98 15.64a95.025 95.025 0 0 1 -26.81 10.37c-1.67.37-3.33.69-5 .96l2.54-20.08a232.121 232.121 0 0 0 1.84-29.15 231.631 231.631 0 0 0 -42.49-133.71 231.59 231.59 0 0 1 -42.48-136.01l.22-23.1a91.258 91.258 0 0 1 9.63-2.67 94.872 94.872 0 0 1 21.61-2.21l-.21 21.09c-.01.78-.01 1.55-.01 2.33a231.584 231.584 0 0 0 42.49 133.68 231.655 231.655 0 0 1 40.65 162.86z" fill="#8f563b"/><path d="m290.149 115.721a8 8 0 0 1 -5.45-13.858c3.68-3.423 7.548-6.731 11.5-9.834a8 8 0 1 1 9.887 12.58c-3.6 2.83-7.13 5.848-10.486 8.97a7.973 7.973 0 0 1 -5.451 2.142z" fill="#744630"/><path d="m252.825 165.683a8 8 0 0 1 -7.157-11.563 182.321 182.321 0 0 1 20.091-31.714 8 8 0 1 1 12.56 9.91 166.483 166.483 0 0 0 -18.325 28.927 8 8 0 0 1 -7.169 4.44z" fill="#744630"/><path d="m100.588 416.043a7.987 7.987 0 0 1 -6.085-2.8c-3.266-3.821-6.41-7.824-9.346-11.9a8 8 0 0 1 12.983-9.352c2.676 3.716 5.546 7.367 8.525 10.852a8 8 0 0 1 -6.077 13.2z" fill="#8b543a"/><path d="m148.935 455.415a7.959 7.959 0 0 1 -3.851-.993 182.34 182.34 0 0 1 -30.847-21.4 8 8 0 0 1 10.426-12.136 166.344 166.344 0 0 0 28.137 19.519 8 8 0 0 1 -3.864 15.01z" fill="#8b543a"/><path d="m171.961 488.7a103.659 103.659 0 0 0 16.835-1.374c1.786-.289 3.622-.641 5.442-1.045a103.262 103.262 0 0 0 29.062-11.235c27.053-15.451 48.362-43.658 60-79.425a203.035 203.035 0 0 0 8.271-37.188c3.857.377 7.749.587 11.679.587 23.832 0 48.867-6.891 73.462-20.345 31.792-17.391 59.943-44.268 81.409-77.725 48.517-75.59 49.844-165.336 3.163-213.389a102.388 102.388 0 0 0 -27.647-20.271c-30.955-15.531-69.063-15.041-107.3 1.377-37.676 16.175-72.165 46.5-97.116 85.382a248.086 248.086 0 0 0 -19.182 36.1c-21.863-16.077-46.4-25.332-71.548-25.649a103.012 103.012 0 0 0 -23.426 2.4 99.866 99.866 0 0 0 -10.449 2.9c-32.844 10.973-59.388 38.318-74.741 77-15.13 38.1-17.984 83.936-8.039 129.051 19.678 89.315 83.6 152.849 150.125 152.849zm283.166-423.988c16.139 19.931 24.679 47.725 24.189 79.247-.556 35.916-12.866 74.4-34.66 108.351-20.024 31.209-46.174 56.22-75.622 72.329-25.084 13.721-51.387 19.966-75 17.955a239.052 239.052 0 0 0 87.91-147.286 223.685 223.685 0 0 1 64.1-121.724zm-36.019-8.412 12.308-12.017c1 .589 2.006 1.194 3 1.827a86.547 86.547 0 0 1 9.568 7.122l-9.118 8.9a239.671 239.671 0 0 0 -68.688 130.438 223.059 223.059 0 0 1 -72.97 129.923q-.324-9.708-1.457-19.543a239.189 239.189 0 0 0 63.261-124.921 222.3 222.3 0 0 1 64.096-121.729zm-176.424 66.39c44.258-68.972 118.056-104.59 173.164-85.564l-7.917 7.73a238.192 238.192 0 0 0 -68.683 130.435 223.076 223.076 0 0 1 -50.677 107.374c-.353-1.778-.718-3.557-1.11-5.336-10.605-48.132-34.258-89.2-64.513-116.609a231.16 231.16 0 0 1 19.736-38.03zm-96.5 30.979.126-12.7c25.508 2.634 51.226 16.2 73.215 38.786 25.055 25.741 43.634 61.617 52.316 101.018 8.334 37.836 7 76.866-3.749 109.9-8.229 25.281-21.66 46.215-38.582 60.535a239.064 239.064 0 0 0 -42.32-166.226 222.415 222.415 0 0 1 -41.021-129.062c0-.746 0-1.483.01-2.251zm-31.25 6.887.163-17.2c1.129-.3 2.263-.579 3.405-.83a86.949 86.949 0 0 1 11.809-1.755l-.126 12.722c-.011.814-.011 1.616-.011 2.43a238.328 238.328 0 0 0 43.956 138.3 223.134 223.134 0 0 1 39.247 157.239l-1.463 11.561a87.312 87.312 0 0 1 -15.017 6.057l1.1-8.719a240.977 240.977 0 0 0 1.9-30.155 238.346 238.346 0 0 0 -43.957-138.334 222.252 222.252 0 0 1 -41.011-131.316zm-15.9-11.219-.105 11.063a238.158 238.158 0 0 0 43.947 140.71 222.434 222.434 0 0 1 41.024 129.09 224.921 224.921 0 0 1 -1.776 28.146l-1.764 13.947c-28.477 2.7-58.094-8.694-84.035-32.5-28.455-26.115-49.359-64.251-58.862-107.384-17.643-80.027 9.193-157.444 61.571-183.072z"/><path d="m290.149 115.721a7.973 7.973 0 0 0 5.447-2.142c3.356-3.122 6.884-6.14 10.486-8.97a8 8 0 1 0 -9.887-12.58c-3.948 3.1-7.816 6.411-11.5 9.834a8 8 0 0 0 5.45 13.858z"/><path d="m249.27 164.845a7.994 7.994 0 0 0 10.724-3.6 166.483 166.483 0 0 1 18.325-28.927 8 8 0 1 0 -12.56-9.91 182.321 182.321 0 0 0 -20.091 31.714 8 8 0 0 0 3.602 10.723z"/><path d="m94.5 413.242a8 8 0 0 0 12.162-10.4c-2.979-3.485-5.849-7.136-8.525-10.852a8 8 0 0 0 -12.983 9.352c2.939 4.076 6.083 8.079 9.346 11.9z"/><path d="m114.237 433.024a182.34 182.34 0 0 0 30.847 21.4 8 8 0 1 0 7.715-14.017 166.344 166.344 0 0 1 -28.136-19.517 8 8 0 0 0 -10.426 12.136z"/></g></svg>
		</div>
		<h1>Types of coffees</h1>
	</div>
	<tabs>
		<tab name="Expresso" :selected="true">
			<chart type="expresso" class="chart"></chart>
			<div class="desc">
				<h2>Expresso</h2>
				<ul class='ingredients'>
					<li>100% coffee</li>
				</ul>
			</div>
		</tab>
		<tab name="Cappuccino">
			<chart type="cappuccino" class="chart"></chart>
			<div class="desc">
				<h2>Cappuccino</h2>
				<ul class='ingredients'>
					<li>25% coffee</li>
					<li>25% milk</li>
					<li>50% frothed milk</li>
				</ul>
			</div>
		</tab>
		<tab name="Cortado">
			<chart type="cortado" class="chart"></chart>
			<div class="desc">
				<h2>Cortado</h2>
				<ul class='ingredients'>
					<li>75% coffee</li>
					<li>25% frothed milk</li>
				</ul>
			</div>
		</tab>
		<tab name="Americano">
			<chart type="americano" class="chart"></chart>
			<div class="desc">
				<h2>Americano</h2>
				<ul class='ingredients'>
					<li>25% coffee</li>
					<li>75% water</li>
				</ul>
			</div>
		</tab>
		<tab name="Latte">
			<chart type="latte" class="chart"></chart>
			<div class="desc">
				<h2>Latte</h2>
				<ul class='ingredients'>
					<li>25% coffee</li>
					<li>50% milk</li>
					<li>25% frothed milk</li>
				</ul>
			</div>
		</tab>
		<tab name="Mocha">
			<chart type="mocha" class="chart"></chart>
			<div class="desc">
				<h2>Mocha</h2>
				<ul class='ingredients'>
					<li>20% coffee</li>
					<li>20% milk</li>
					<li>40% chocolate</li>
					<li>20% whipped cream</li>
				</ul>
			</div>
		</tab>
	</tabs>
</div>
              
            
!

CSS

              
                $copper: #b7784e;
$chocolate: #73472e;
$darkChoco: #2b2118;
$orange: #ad9986;
$red: #610003;
$cream: #d0a06d;
$white: #d9d8df;

body{
	background: $cream;
}
#app{
	background: $cream;
	width: 90vw;
	height: 97vh;
	margin: auto;
	color: $darkChoco;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex;
}
.header{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	
	h1{
		font-family: 'Satisfy', cursive;
		font-size: 2.9rem;
		width: 80%;
	}
	
	.icon{
		width: 30%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		svg{
			width: 50%;
		}
	}
}
.menu{
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 0;
	background: $chocolate;
	
	li{
		cursor: pointer;
		font-weight: bold;
		font-family: 'Raleway', sans-serif;
		color: $white;
		text-align: center;
		width: calc(100%/6);
		min-width: 6rem;
		height: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 700ms ease;
		
		&.selected{
			background: $red;
		}
	}
}
.coffeeDetail{
	height: 18rem;
	background: $white;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	
	.desc{
		width: 50%;
		height: 18rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		h2{
			font-family: 'Satisfy', cursive;
			font-size: 2.3rem;
			margin-bottom: 0;
		}
		.ingredients{
			li{
				font-family: 'Raleway', sans-serif;
			}
		}
	}	
	.chart{
		min-width: 10rem; 
		width: 50%;
		height: 17rem;
	}
}

.fade-enter-active, .fade-enter-to {
  transition: all 500ms ease-in;
}

.fade-leave {
  display: none;
}

.fade-enter, .fade-leave-to {
  transform: translatex(-50px);
	opacity: 0;
}
              
            
!

JS

              
                const coffees = {
	expresso : {
		coffee : 100
	},
	cappuccino : {
		coffee: 25,
		milk: 25,
		frothed : 50
	},
	cortado: {
		coffee: 75,
		frothed : 25
	},
	americano: {
		coffee: 25,
		water: 75
	},
	latte: {
		coffee: 25,
		milk: 50,
		frothed : 25
	},
	mocha: {
		coffee: 20,
		milk: 20,
		chocolate: 40,
		whipped : 20
	}
}

Vue.component( 'tabs', {
	template: `
<div>
	<div>
		<ul class="menu">
			<li v-for="menuItem in menu" :class="{ selected : menuItem.isActive }" @click="{selectTab(menuItem)}">
				{{ menuItem.name }}
			</li>
		</ul>
	</div>
	<div>
		<slot></slot>
	</div>
</div>`,
	data() {
		return {menu: []}
	},
	mounted() {
		this.menu = this.$children
	},
	methods: {
		selectTab(tab){
			this.menu.forEach( nav => nav.isActive = (nav === tab));
		} 
	}
});

Vue.component( 'tab', {
	template: `
<transition name="fade">
		<div v-if="isActive" class="coffeeDetail"><slot></slot></div>
</transition>
`,
	props: {
		name: { required: true },
		selected: { default: false }
	},
	data(){
		return { isActive: false }
	},
	mounted(){
		this.isActive = this.selected;
	}
});

getLabels = (coffee) =>{
	const coffeeObj = coffees[coffee];
	let t = [];
	Object.keys(coffeeObj).forEach( key => {
		if(key === 'frothed'){
			key = 'frothed milk';
		}
		if(key === 'whipped'){
			key = 'whipped cream';
		}
		t.push(key);
	});
	return t;
};

getData = (coffee) => {
	const coffeeObj = coffees[coffee];
	let d = [];
	Object.values(coffeeObj).forEach( i => {
		d.push(i);
	});
	return d;
}

Vue.component('chart', {
  extends: VueChartJs.Pie,
	props: {
		type: { required: true}
	},
  mounted () {
    this.renderChart({
      labels: getLabels(this.type),
      datasets: [
        {
          backgroundColor: [
						'#2b2118',
            '#b7784e',
            '#d0a06d',
            '#610003'
          ],
          data: getData(this.type)
        }
      ]
    }, {
			responsive: true, 
			maintainAspectRatio: false
		})
  }
})

new Vue({
    el: '#app'
});
              
            
!
999px

Console