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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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="container" class="container">
	<div class="header">
		<div class="arrow">
			<span id="previous-year"><i class="fas fa-chevron-left"></i></span>
		</div>
		<div class="header-centre">
			Pantone colour of the year 
			<div id="year" class="year"></div>
		</div>	
		<div class="arrow">
			<span id="next-year"><i class="fas fa-chevron-right"></i></span>
		</div>
	</div>
	<div class="coty">
		<table>
			<tr>
				<td class="key">Name:</td><td id="name" class="value"></td>
			</tr>
			<tr>
				<td class="key">Code:</td><td id="code" class="value"></td>
			</tr>
			<tr>
				<td class="key">Hex:</td><td id="hex" class="value"></td>
			</tr>
			<tr>
				<td class="key">RGB:</td><td id="rgb" class="value"></td>
			</tr
			<tr>
				<td class="key">HSL:</td><td id="hsl" class="value"></td>
			</tr>
		</table>
	</div>
	<div id="menupage" class="menupage">
		<button onclick="closeMenu()">
			<i class="fas fa-times"></i>
		</button>
		<div id="menu" class="menu"></div>
	</div>
	<input type="text" id="val2copy" class="val2copy">
	<div class="notification" id="notification">Value copied to clipboard</div>
</div>
		
              
            
!

CSS

              
                * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	overflow-x: hidden;
	position: relative;
	width: 100vw;
}
body {
	background: #e8e8e8;
}
.container {
	height: 100vh;
	background: rgb(15 76 129);
	transition: background 0.25s;
	font-weight: 100;
	color: white;
	font-family: sans-serif;
}
.header {
	width: 100%;
	text-align: center;
	margin: auto;
	padding: 4vw;
	font-size: 1.85vw;
	text-transform: uppercase;
	display: flex;
	justify-content: space-between;
	letter-spacing: 1px;
}
.year {
	font-size: 2.8em;
	font-weight: 500;
	letter-spacing: 2px;
	padding-top: 0.15em;
}
.arrow {
	font-size: 4.25em;
	width: 5vw;
}
.arrow span:hover, .year:hover {
	cursor: pointer;
}
.coty {
/* 	font-size: 0.9em; */
	margin: auto;
	width: 80vw;
}
.coty table {
	position: absolute;
	bottom: 3vh;
}
.coty table td {
	padding: 0.2em;
	vertical-align: top;
}
.coty table .key {
	width: 40vw;
	text-align: right;
	font-weight: 400;
}
.coty table .value {
	width: 40vw;
}
.coty a {
	color: white;
	text-decoration: none;
}
.menupage {
	width: 100vw;
	height: 100vh;
	background: white;
	position: absolute;
	top: 0;
	left: 100vw;
/* 	display: none; */
	padding: 4vw;
	font-family: sans-serif;
	background: #e8e8e8;
	transition: left 0.3333s ease-out;
	overflow-y: scroll;
}
.menupage button {
	font-size: 4.25em;
	background: none;
	border: none;
	margin-bottom: 4vw;
}
.menupage button:hover {
	cursor: pointer;
}
.menupage a {
	text-decoration: none;
	color: #555;
}
.menu {
	column-count: 2;
	font-size: 1.2em;
	padding-bottom: 4vw;
}
.menu a {
	display: block;
}
.menu .menu-item {
	width:18px;
	height:18px;
	display:inline-block;
	margin-right:10px;
	border-radius:50%;
}
.menu .menu-year {
	font-weight: 600;	
	font-size: 1.2em;
}
.menu .menu-name {
	font-size: 0.9em;
}
/* input field for copying value to clipboard hidden offscreen */
.val2copy {
	position: absolute;
	top: -100px;
}
.notification {
	background: rgba(38, 50, 56, 1);
	width: 100%;
	text-align: center;
	padding: 20px;
	position: absolute;
	bottom: -58px;
	transition: bottom 0.3333s ease-out;
}
/* media queries */
@media only screen and (max-width: 768px) {
	.menu {
		font-size: 1.2em;
	}
}
@media only screen and (max-width: 600px) {
	.header {
		font-size: 3vw;
	}
	.coty {
		width: 90vw;
		font-size: 0.9em;
	}
	.menu {
		column-count: 1;
		font-size: 1.2em;
	}
}
              
            
!

JS

              
                // THE DATA
const cotyList = [
	{
		year: '2000',
		name: 'Cerulean',
		code: '15-4020',
		rgb: '155 183 212',
		hex: '9BB7D4',
		hsl: '211 39.9% 72%',
	},
	{
		year: '2001',
		name: 'Fuchsia Rose',
		code: '17-2031',
		rgb: '199 67 117',
		hex: 'C74375',
		hsl: '337 54.1% 52.2%',
	},
	{
		year: '2002',
		name: 'True Red',
		code: '19-1664',
		rgb: '191 25 50',
		hex: 'BF1932',
		hsl: '351 76.9% 42.4%',
	},
	{
		year: '2003',
		name: 'Aqua Sky',
		code: '14-4811',
		rgb: '123 196 196',
		hex: '7BC4C4',
		hsl: '180 38.2% 62.5%',
	},
	{
		year: '2004',
		name: 'Tigerlily',
		code: '17-1456',
		rgb: '226 88 62',
		hex: 'E2583E',
		hsl: '10 73.9% 56.5%',
	},
	{
		year: '2005',
		name: 'Blue Turquoise',
		code: '15-5217',
		rgb: '83 176 174',
		hex: '53B0AE',
		hsl: '179 37.1% 50.8%',
	},
	{
		year: '2006',
		name: 'Sand Dollar',
		code: '13-1106',
		rgb: '222 205 190',
		hex: 'DECDBE',
		hsl: '28 32.7% 80.8%',
	},
	{
		year: '2007',
		name: 'Chili Pepper',
		code: '19-1557',
		rgb: '155 27 48',
		hex: '9B1B30',
		hsl: '350 70.3% 35.7%',
	},
	{
		year: '2008',
		name: 'Blue Iris',
		code: '18-3943',
		rgb: '90 91 159',
		hex: '5A5B9F',
		hsl: '239 27.7% 48.8%',
	},
	{
		year: '2009',
		name: 'Mimosa',
		code: '14-0848',
		rgb: '240 192 90',
		hex: 'F0C05A',
		hsl: '41 83.3% 64.7%',
	},
	{
		year: '2010',
		name: 'Turquoise',
		code: '15-5519',
		rgb: '69 181 170',
		hex: '45B5AA',
		hsl: '174 44.8% 49%',
	},
	{
		year: '2011',
		name: 'Honeysuckle',
		code: '18-2120',
		rgb: '217 79 112',
		hex: 'D94F70',
		hsl: '346 64.5% 58%',
	},
	{
		year: '2012',
		name: 'Tangerine Tango',
		code: '17-1463',
		rgb: '221 65 36',
		hex: 'DD4124',
		hsl: '9 73.1% 50.4%',
	},
	{
		year: '2013',
		name: 'Emerald',
		code: '17-5641',
		rgb: '0 148 115',
		hex: '009473',
		hsl: '167 100% 29%',
	},
	{
		year: '2014',
		name: 'Radiant Orchid',
		code: '18-3224',
		rgb: '173 94 153',
		hex: 'AD5E99',
		hsl: '315 32.5% 52.4%',
	},
	{
		year: '2015',
		name: 'Marsala',
		code: '18-1438',
		rgb: '150 79 76',
		hex: '964F4C',
		hsl: '2 32.7% 44.3%',
	},
	{
		year: '2016a',
		name: 'Rose Quartz',
		code: '13-1520',
		rgb: '247 202 201',
		hex: 'F7CAC9',
		hsl: '1 74.2% 87.8%',
	},
	{
		year: '2016b',
		name: 'Serenity',
		code: '15-3919',
		rgb: '145 168 208',
		hex: '91A8D0',
		hsl: '218 40.1% 69.2%',
	},
	{
		year: '2017',
		name: 'Greenery',
		code: '15-0343',
		rgb: '136 176 75',
		hex: '88B04B',
		hsl: '84 40.2% 49.2%',
	},
	{
		year: '2018',
		name: 'Ultra Violet',
		code: '18-3838',
		rgb: '95 75 139',
		hex: '5F4B8B',
		hsl: '259 29.9% 42%',
	},
	{
		year: '2019',
		name: 'Living Coral',
		code: '16-1546',
		rgb: '255 111 97',
		hex: 'FF6F61',
		hsl: '5 100% 69%',
	},
	{
		year: '2020',
		name: 'Classic Blue',
		code: '19-4052',
		rgb: '15 76 129',
		hex: '0F4C81',
		hsl: '208 79.2% 28.2%',
	},
]

// THE DOM ELEMENTS
const container = document.querySelector('#container')
const year = document.querySelector('#year')
const previousYear = document.querySelector('#previous-year')
const nextYear = document.querySelector('#next-year')
const name = document.querySelector('#name')
const code = document.querySelector('#code')
const rgb = document.querySelector('#rgb')
const hex = document.querySelector('#hex')
const hsl = document.querySelector('#hsl')
const menupage = document.querySelector('#menupage')
const menu = document.querySelector('#menu')
const notification = document.querySelector('#notification')

// THE EVENT LISTENERS
previousYear.addEventListener('click', () => {
	currentYear--
	changeColour(currentYear)
})
nextYear.addEventListener('click', () => {
	currentYear++
	changeColour(currentYear)
})
year.addEventListener('click', () => {
	menupage.style.left = 0
})

// THE FUNCTIONS
// on menu selection go directly to year 
const goToYear = i => {
	const coty = cotyList[i]
	currentYear = i
	closeMenu()
	changeColour(i)
}
// close the menu
const closeMenu = () => {
	// menupage.style.display = 'none'
	menupage.style.left = '100vw'
}
// copy value to clipboard
const copyToClipboard = (type) => {
	const valToCopy = document.querySelector('#val2copy')
	switch (type) {
		case 'hex':
			valToCopy.value = `#${cotyList[currentYear].hex}`
			break
		case 'rgb':
			valToCopy.value = `rgb(${cotyList[currentYear].rgb})`
			break
		case 'hsl':
			valToCopy.value = `hsl(${cotyList[currentYear].hsl})`
			break
	}
	valToCopy.select();
	document.execCommand("copy");
	valToCopy.blur();
	notification.textContent = `${valToCopy.value} has been copied to the clipboard`
	notification.style.bottom = 0;
	setTimeout(() => {
		notification.style.bottom = '-58px'
	}, 2000)
}
// change the page 
const changeColour = currentYear => {
	
	// nav arrows display
	nextYear.style.display = 'block'
	previousYear.style.display = 'block'
	if (currentYear === cotyList.length-1) {
		nextYear.style.display = 'none'
	}
	if (currentYear === 0) {
		previousYear.style.display = 'none'
	}
	
	// change background colour and page content
	let coty = cotyList[currentYear]
	container.style.background = `rgb(${coty.rgb})`
	year.textContent = coty.year
	name.textContent = coty.name
	code.innerHTML = `<a href="https://www.pantone.com/color-finder/${coty.code}-TCX" target="_blank">${coty.code}</a>`
	rgb.innerHTML = `<a href="#" onclick="copyToClipboard('rgb')">${coty.rgb}</a>`
	hex.innerHTML = `<a href="#" onclick="copyToClipboard('hex')">#${coty.hex}</a>`
	hsl.innerHTML = `<a href="#" onclick="copyToClipboard('hsl')">${coty.hsl}</a>`
	
}

// AAAAAAND ACTION! 
// populate the menu page
cotyList.forEach( (coty, index) => {
	menu.innerHTML += `
		<a href="#" onclick="goToYear(${index})">
			<div class="menu-item" style="background:rgb(${coty.rgb});"></div>
			<span class="menu-year">${coty.year}</span><span class="menu-name"> &mdash; ${coty.name}</span>
		</a>&nbsp;`
})
// we start on most recent year so initially hide next year nav arrow
nextYear.style.display = 'none'
// start with last array element (most recent year)
let currentYear = cotyList.length-1
// initialise to most recent year
changeColour(currentYear)

              
            
!
999px

Console