Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
90 lines (88 sloc) 2.41 KB
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
html {
height: 100%;
}
body {
font-family: Tahoma, Geneva, sans-serif;
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
height: 100%;
}
#colorArray {
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.colorblock {
flex-basis: 20%;
height: 25%;
}
.secret-code {
font-size: 36px;
text-align: center;
height: 100%;
margin: 0;
display: none;
background-color: white;
}
.secret-code span {
position: relative;
top: calc(50% - 27px);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var colors = ["FF", "B7", "8D", "00", "55", "A5"]; // not used, just for reference
var colorsArray = [
{color: "FFB700", code: 49},
{color: "FF8DA5", code: 8},
{color: "FF0055", code: 16},
{color: "B78D00", code: 26},
{color: "B700A5", code: 19},
{color: "B755FF", code: 30},
{color: "8D0055", code: 4},
{color: "8D00FF", code: 15},
{color: "8DA5FF", code: 63},
{color: "8DFFB7", code: 54},
{color: "0055A5", code: 21},
{color: "00FFB7", code: 12},
{color: "00B78D", code: 10},
{color: "55A5B7", code: 39},
{color: "55FF00", code: 50},
{color: "55B78D", code: 43},
{color: "558D00", code: 14},
{color: "A5FF55", code: 1},
{color: "A5B700", code: 27},
{color: "A58D55", code: 2}
];
$(document).ready(function() {
colorsArray.forEach(function(color) {
$('#colorArray').append(`
<div class="colorblock" style="background-color:#${color.color}">
<p class="secret-code"><span>${color.code}</span></p>
</div>`);
});
$('.colorblock').click(function(event) {
$(event.target).find('.secret-code').show();
});
$('.secret-code').click(function(event) {
$(event.target).closest('.secret-code').hide();
})
});
</script>
</head>
<body>
<div class="wrapper">
<div id="colorArray"></div>
</div>
</body>
</html>
You can’t perform that action at this time.