Beer colors

Beer is classified into the following colors. This app shows you the colors as a reference along with their SRM value inside the color block

by Daniel Latimer

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<h1>Beer Standard Reference Method (SRM) colors</h1>
<div>
Beer is classified into the following colors. This app shows you the colors as a reference along with their SRM value inside the color block
</div>
<div class="flexParent" id="colors"></div>

SCSS

$itemMargin: 10px;
$itemWidth: calc(15vw - #{$itemMargin});

h1 {
  font-family: sans-serif;
  font-size: 1.5em
}

.flexParent {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  /* overflow-y: scroll; */
  margin-bottom: 10px;
}

.flexChild {
  display: flex;
  justify-content: center;
  align-items: center;
  width: $itemWidth;
  height: 20vw;
  margin-left: $itemMargin;
  margin-bottom: $itemMargin;
}

.text {
  font-size: calc(#{$itemWidth} - 6vw);
  font-family: sans-serif;
  color: white;
  opacity: 0.5;
}

JavaScript

const srmColors = [
  '#FFE699',
  '#FFD878',
  '#FFCA5A',
  '#FFBF42',
  '#FBB123',
  '#F8A600',
  '#F39C00',
  '#EA8F00',
  '#E58500',
  '#DE7C00',
  '#D77200',
  '#CF6900',
  '#CB6200',
  '#C35900',
  '#BB5100',
  '#B54C00',
  '#B04500',
  '#A63E00',
  '#A13700',
  '#9B3200',
  '#952D00',
  '#8E2900',
  '#882300',
  '#821E00',
  '#7B1A00',
  '#771900',
  '#701400',
  '#6A0E00',
  '#660D00',
  '#5E0B00',
  '#5A0A02',
  '#600903',
  '#520907',
  '#4C0505',
  '#470606',
  '#440607',
  '#3F0708',
  '#3B0607',
  '#3A070B',
  '#36080A',
]
  
const $colorsDiv = $('#colors');
srmColors.forEach((color, index) => 
	$colorsDiv.append(`<div class="flexChild" style="background: ${color}"><div class="text">${index + 1}</div></div>`));