CSS
body {
margin: 0;
font-family: 'PT serif', serif;
background-color: #141929;
}
a, a:focus, a:hover, a:active {
cursor: pointer;
}
a {
color: #25a8fd;
text-decoration: none;
}
.modbg {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.logolinkwrap {
text-align: center;
margin: 0 auto 2em;
}
.logolink {
text-align: center;
font-style: italic;
display: inline-block;
}
.logolinkwrap img {
-webkit-filter: drop-shadow(0 0 0 #FFF);
filter: drop-shadow(0 0 0 #FFF);
width: 3em;
height: auto;
}
.card-wrapper {
color: #000;
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 83.125em;
/*1330px;*/
}
h1 {
color: #fffce9;
font-weight: normal;
font-size: 48px;
font-size: 3rem;
text-align: center;
font-style: italic;
margin: auto;
}
.score {
color: #fffce9;
text-align: center;
}
.facit {
color: #fffce9;
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: start;
align-content: flex-start;
padding: 0;
min-height: 6em;
/*96px;*/
margin: 1em 0.5em auto 0.5em;
overflow: hidden;
}
.facit li {
width: 100%;
margin-bottom: 0.5em;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.facit span {
display: inline-block;
}
.facit span::after, .logolink::after {
content: '';
width: 100%;
height: 1px;
display: block;
background-color: #25a8fd;
opacity: 0;
position: relative;
-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
transition: opacity 0.6s, -webkit-transform 0.6s;
transition: opacity 0.6s, transform 0.6s;
transition: opacity 0.6s, transform 0.6s, -webkit-transform 0.6s;
}
.facit a:hover span:after,
.facit a:focus span:after,
.facit a:active span:after,
.logolink:hover::after,
.logolink:focus::after,
.logolink:active::after {
opacity: 1;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
@media only screen and (min-width: 30em) {
/*480*/
.facit li {
width: 50%;
}
}
@media only screen and (min-width: 48em) {
/*768*/
.facit li {
width: 33.33%;
}
}
@media only screen and (min-width: 83.125) {
/*1330px*/
.facit li {
width: 25%;
}
}
.facit img {
width: 1.5em;
height: 1.5em;
border-radius: 1em;
float: left;
margin: 0 0.5em 0 0;
}
.deck {
list-style-type: none;
margin: auto;
padding: 0;
position: relative;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.card {
background-color: #fffce9;
box-sizing: border-box;
border: 0.3125em solid #fffce9;
/*5px*/
border-radius: 0.5em;
/*8px*/
box-shadow: 0 0 1px #000;
display: inline-block;
margin: 0.5em auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0.5em 0.5em;
width: 8.75em;
/*140px;*/
height: 14.3125em;
/*229px;*/
-webkit-transition: box-shadow 0.6s, -webkit-transform 0.6s;
transition: box-shadow 0.6s, -webkit-transform 0.6s;
transition: transform 0.6s, box-shadow 0.6s;
transition: transform 0.6s, box-shadow 0.6s, -webkit-transform 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card:hover {
cursor: pointer;
}
@media only screen and (min-width: 83.125) {
/*1330px*/
.card {
height: 12.3125em;
/*245px;*/
width: 9.375em;
/*150px;*/
}
}
.card:hover, .card-flipped {
box-shadow: 0 0 0.75em #ffdfcb;
}
.deck img {
margin: 0 auto;
width: 100%;
height: auto;
}
.card-name {
margin: auto;
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
}
.card-text {
margin: auto 1em;
}
.deck img.card-text-icon {
width: 50%;
margin: auto auto 0 auto;
}
.deck img.card-person-icon {
width: 33%;
position: absolute;
top: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
background-color: #fffce9;
padding: 0.125em;
box-sizing: border-box;
border-radius: 50%;
}
/*Pair found*/
.correct {
visibility: hidden;
}
.card.instant-correct {
background-color: #c6ecc6;
}
.pulsate {
box-shadow: 0 0 16px green;
-webkit-animation: pulsate 2s ease-out;
animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes pulsate {
0% {
box-shadow: 0 0 2px green;
}
50% {
box-shadow: 0 0 16px yellow;
}
100% {
box-shadow: 0 0 2px green;
}
}
@keyframes pulsate {
0% {
box-shadow: 0 0 2px green;
}
50% {
box-shadow: 0 0 16px yellow;
}
100% {
box-shadow: 0 0 2px green;
}
}
.card.flipped.slideup {
-webkit-transform: rotateY(180deg) translate3d(0, -2000px, 0);
transform: rotateY(180deg) translate3d(0, -2000px, 0);
-webkit-transition: box-shadow 0.6s, -webkit-transform 2s;
transition: box-shadow 0.6s, -webkit-transform 2s;
transition: transform 2s, box-shadow 0.6s;
transition: transform 2s, box-shadow 0.6s, -webkit-transform 2s;
}
.card-wrapper {
-webkit-transition: -webkit-transform .3s ease;
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
-webkit-perspective: 6000px;
perspective: 6000px;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-front {
border-radius: 0.125em;
background-color: #fbb;
background-image: url("http://redonion.se/img/codepen/memory/cardbackground.svg");
background-size: cover;
position: absolute;
display: block;
}
.card-front:hover {
background-color: #ffebeb;
}
.card-front, .card-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.card-back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/*Endnote*/
.endnote {
position: absolute;
color: white;
text-align: center;
top: 30%;
display: none;
}
.endnote p {
margin: 0 auto;
font-size: 78px;
color: #23a5fa;
}
.endnote-show {
display: block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: endnoteshow;
animation-name: endnoteshow;
}
@-webkit-keyframes endnoteshow {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes endnoteshow {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
JAVASCRIPT
$(document).ready(function(){
var cardDeck = [
//objekt1
{
cardname: 'Heydon Pickering',
cardimg: 'https://pbs.twimg.com/profile_images/798991361605189632/r0orL3a6_400x400.jpg',
cardicon:'http://redonion.se/img/codepen/memory/owl.svg',
cardlink:'https://twitter.com/heydonworks',
cardpair:'0'
},
//objekt2
{
cardicon:'http://redonion.se/img/codepen/memory/owl.svg',
cardtext:'lobotomized owl keeper',
cardpair:'0'
},
//objekt3
{
cardname: 'Chris Coyier',
cardimg: 'https://pbs.twimg.com/profile_images/778921008979935232/5m0hKrUC_400x400.jpg',
cardicon:'http://redonion.se/img/codepen/memory/codepen.svg',
cardlink:'https://twitter.com/chriscoyier',
cardpair:'1'
},
//objekt4
{
cardicon:'http://redonion.se/img/codepen/memory/codepen.svg',
cardtext:'shoptalking trickster',
cardpair:'1'
},
//object 5
{
cardname: 'Rachel Andrew',
cardimg: 'https://pbs.twimg.com/profile_images/781380559947915265/wrjtv_jp_400x400.jpg',
cardicon:'http://redonion.se/img/codepen/memory/perch.svg',
cardlink:'https://twitter.com/rachelandrew',
cardpair:'2'
},
//object 6
{
cardicon:'http://redonion.se/img/codepen/memory/perch.svg',
cardtext:'perching on the grid',
cardpair:'2'
},
//object 7
{
cardname: 'Mark Robbins',
cardimg: 'https://pbs.twimg.com/profile_images/605390755444760576/WgiJJDoR_400x400.jpg',
cardicon:'http://redonion.se/img/codepen/memory/email.svg',
cardlink:'https://twitter.com/m_j_robbins',
cardpair:'3'
},
//object 8
{
cardicon:'http://redonion.se/img/codepen/memory/email.svg',
cardtext:'(e)mailman',
cardpair:'3'
},
//object 9
{
cardname: 'Paul Irish',
cardimg: 'https://pbs.twimg.com/profile_images/420826194083213312/CP1RmLa3_400x400.jpeg',
cardicon:'http://redonion.se/img/codepen/memory/google.svg',
cardlink:'https://twitter.com/paul_irish',
cardpair:'4'
},
//object 10
{
cardicon:'http://redonion.se/img/codepen/memory/google.svg',
cardtext:'prefers chromed dev tools',//'Google posterboy',
cardpair:'4'
},
//object 11
{
cardname: 'Una Kravets',
cardimg: 'https://pbs.twimg.com/profile_images/815292019081936896/6up9dULL_400x400.jpg',
cardicon:'http://redonion.se/img/codepen/memory/unicorn.svg',
cardlink:'https://twitter.com/una',
cardpair:'5'
},
//object 12
{
cardicon:'http://redonion.se/img/codepen/memory/unicorn.svg',
cardtext:'talking UI unicorn',
cardpair:'5'
},
//object 13
{
cardname: 'Val Head',
cardimg: 'https://pbs.twimg.com/profile_images/669650293747900416/GApkPcFY_400x400.jpg',
cardicon:'http://redonion.se/img/codepen/memory/head.svg',
cardlink:'https://twitter.com/vlh',
cardpair:'6'
},
//object 14
{
cardicon:'http://redonion.se/img/codepen/memory/head.svg',
cardtext:'animations in style',
cardpair:'6'
},
//object 15
{
cardname: 'Brad Frost',
cardimg: 'https://pbs.twimg.com/profile_images/499941427820769281/8tYwgR5r_400x400.png',
cardicon:'http://redonion.se/img/codepen/memory/atom.svg',
cardlink:'https://twitter.com/brad_frost',
cardpair:'7'
},
//object 16
{
cardicon:'http://redonion.se/img/codepen/memory/atom.svg',
cardtext:'makes molecules of designed atoms',
cardpair:'7'
}
];
var facitDeck = [];
function createfacitDeck(){
const decklength = cardDeck.length * 0.5;
for (let i = 0; i < decklength; i++) {
facitDeck.push({cardpair: i});
};
}
createfacitDeck();
//Function for creating a random number, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (included)
// Using Math.round() will give you a non-uniform distribution!
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function dealCards(){
if(cardDeck.length < 1){
alert('no more');
}
else{
for (let i = 0; i < 16; i++) {
const antalObjektMinusEtt = cardDeck.length - 1;
const myRandomNumber = getRandomIntInclusive(0, antalObjektMinusEtt);
const tempCardname = cardDeck[myRandomNumber].cardname;
const tempCardtext = cardDeck[myRandomNumber].cardtext;
const tempCardimg = cardDeck[myRandomNumber].cardimg;
const tempCardbackground = cardDeck[myRandomNumber].cardbackground;
const tempCardpair = cardDeck[myRandomNumber].cardpair;
const tempCardicon = cardDeck[myRandomNumber].cardicon;
const tempCardlink = cardDeck[myRandomNumber].cardlink;
const printCardtext = '<li class="card" data-pairs="' + tempCardpair + '"><div class="card-front"></div><div class="card-back"><img src="' + tempCardicon + '" width="48" height="48" alt="icon" class="card-text-icon"><p class="card-text">' + tempCardtext + '</p></div></li>';
const printPerson = '<li class="card" data-pairs="' + tempCardpair + '"><div class="card-front"></div><div class="card-back"><img src="' + tempCardimg + '" width="100" height="100" alt="' + tempCardname + '"><img src="' + tempCardicon + '" width="32" height="32" alt="icon" class="card-person-icon"><p class="card-name">' + tempCardname + '</p></div></li>';
for(let j = 0; j < facitDeck.length; j++){
if((tempCardpair == facitDeck[j].cardpair) && (tempCardname != undefined)){
facitDeck[j].cardname = tempCardname;
facitDeck[j].cardimg = tempCardimg;
facitDeck[j].cardlink = tempCardlink;
}
else if((tempCardpair == facitDeck[j].cardpair) && (tempCardtext != undefined)){
facitDeck[j].cardtext = tempCardtext;
}
}
if(tempCardname != undefined){
$('.deck').append(printPerson);
}
else if(tempCardtext != undefined){
$('.deck').append(printCardtext);
}
//delete
cardDeck.splice( myRandomNumber, 1 );
};//for
}//else
}//dealCards
//return numberofflipped
function findflipped(){
let numberofflipped = 0;
//loopa through all li and check for .flipped
$('.deck li').each(function(){
if($(this).hasClass('flipped') == true){
numberofflipped++;
}
});
return numberofflipped;
}
function storepairs(){
let datapairArray = Array();
let datapair = '';
$('.deck li').each(function(){
if($(this).hasClass('flipped') == true){
datapair = $(this).attr('data-pairs');
datapairArray.push(datapair);
}
});
console.log('storepairs ' + datapairArray);
return datapairArray;
}
function compare(){
const datapairArray = storepairs();
if(datapairArray[0] != datapairArray[1]){
return false;
}
else{
return true;
}
}
dealCards();
$('.card').on('click', function(){
if(($(this).hasClass('flipped') != true) || ($(this).hasClass('correct') != true) || ($(this).hasClass('instant-correct') != true)){
$(this).toggleClass('flipped');
let numberofflipped = findflipped();
if(numberofflipped == 2){
let isitapair = compare();
if(isitapair == true){
const currentScore = parseInt($('.score span').text(), 10);
let newScore = currentScore + 1;
$('.score span').text(newScore);
//last pair
if(newScore == 8) {
$('.endnote').addClass('endnote-show');
}
$('.flipped').each(function(){
let mythis = $(this);
mythis.addClass('instant-correct');
mythis.addClass('pulsate');
setTimeout(function(){
mythis.removeClass('pulsate');
mythis.addClass('slideup');
}, 1000);
setTimeout(function(){
mythis.addClass('correct');
}, 2000);
});//flipped
//find the pair
let thispair = $('.flipped').attr("data-pairs");
let facitli = '<li><a href="' + facitDeck[thispair]['cardlink'] + '" title="' + facitDeck[thispair]['cardname'] + '"><img src="' + facitDeck[thispair]['cardimg'] + '" width="100" height="100" alt="' + facitDeck[thispair]['cardname'] + '"><span>' + facitDeck[thispair]['cardname'] + '</span></a> - <em>' + facitDeck[thispair]['cardtext'] + '</em></li>';
$('.facit').append(facitli);
}
}//if
else {
$('.deck').find('.flipped').removeClass('flipped');
$(this).toggleClass('flipped');
}
}//if
});//click function
});//end ready
1 Response