Develop Reference

How to use javascript to open the modal when connecting the API so that the user can see the animation effect?

let btn = document.querySelector('.btn');
let modal = document.querySelector('.modal');
let wrap = document.querySelector('.wrap');
let photo = document.querySelector('.photo');
let svg = document.querySelector('svg');
let data = [{
title: "dog",
age: 10,
rank: [{
rankStatus: 'behind'
},
{
rankStatus: 'generally',
rankNum: '20'
},
{
rankStatus: 'excellent'
}
]
}]
let rankStatusArr = data[0].rank.map(item => item.rankStatus);
let rankNum = data[0].rank.find(item => item.rankNum).rankNum;
btn.addEventListener('click', function(e) {
svg.style.display = "block"
axios.get("https://dog.ceo/api/breeds/image/random")
.then((response) => {
// 设置处理程序以在加载图像后显示图像
photo.addEventListener('load', () => {
svg.style.display = "none"
modal.style.display = "flex";
});
// 添加“加载”处理程序后设置图像源
photo.src = response.data.message;
})
.catch((error) => console.log(error));
// 排名狀態在 popup 打開後再載入動畫
let progress = rankNum;
let dot = document.getElementById("dot");
var dotPosition = (progress / 30) * 100;
dot.style.left = dotPosition + "%";
let txt = document.querySelectorAll('.txt');
for (let i = 0; i < txt.length; i++) {
txt[i].innerHTML = rankStatusArr[i];
}
})
wrap.addEventListener('click', function(e) {
e.stopPropagation();
})
modal.addEventListener('click', function() {
modal.style.display = "none"
})
.modal {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
}
.wrap {
width: 300px;
height: 300px;
padding: 20px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
flex-direction: column;
}
.wrap .photo {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 20px;
}
.wrap #progress-bar-container {
width: 100%;
height: 5px;
background-color: #fff;
position: relative;
display: flex;
flex-wrap: nowrap;
}
.wrap #progress-bar-container .progress-bar {
width: 33.33%;
height: 5px;
background-color: #ccc;
margin-right: 8px;
border-radius: 20px;
}
.wrap #progress-bar-container .progress-bar .txt {
text-align: center;
color: #ccc;
margin-top: 20px;
}
#progress-bar-1 {
background-color: #ddd;
}
#progress-bar-2 {
background-color: #ddd;
}
#progress-bar-3 {
background-color: #ddd;
margin-right: 0;
}
#dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: -3px;
left: 0;
transition: left 0.2s ease-out;
}
svg {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
svg .load {
stroke-dasharray: 0 500;
animation: rot 1s linear infinite;
}
#keyframes rot {
100% {
stroke-dasharray: 500 500;
}
}
.green {
color: yellowgreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.2/axios.min.js"></script>
<button class='btn'>open</button>
<div class="modal">
<div class="wrap">
<img class="photo" src="" alt="photo">
<div id="progress-bar-container">
<div class="progress-bar" id="progress-bar-1">
<p class="txt">1</p>
</div>
<div class="progress-bar" id="progress-bar-2">
<p class="txt">2</p>
</div>
<div class="progress-bar" id="progress-bar-3">
<p class="txt">3</p>
</div>
<div id="dot"></div>
</div>
</div>
</div>
<!-- load -->
<svg width="240px" height="240px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="110" cy="110" r="90" stroke-width="10" stroke="gainsboro" fill="none"></circle>
<circle cx="110" cy="110" r="90" stroke-width="10" stroke="darkturquoise" fill="none" class="load"></circle>
</svg>
I encountered a little difficulty in the following requirements. The first difficulty is that I hope that the popup will not be opened until the picture is fully loaded! But I hope that when the popup is opened, the dot can add animation and run to the specified progress position, but it seems that the animation I want to appear has already run before it is opened, and the user will not see the moving animation effect. The second problem is that I want to add a green color to the rankStatus font on the screen if the rankNum is included in the rankStatus object, but I am a novice in programming and don't know which section to add to achieve this. Hope to get your help, thank you.

To solve the first difficulty, you can add an event listener to the photo element which will be triggered when the image is loaded. Inside this event listener, you can set the display of the modal to 'flex' and the display of the svg element to 'none'.
To solve the second difficulty, you can use an if statement inside your rankStatusArr loop. This statement should check if the rankNum is included in the rankStatus object and if so, add a class to the txt element which adds the green color style.
let txt = document.querySelectorAll('.txt');
for (let i = 0; i < txt.length; i++) {
txt[i].innerHTML = rankStatusArr[i];
if (rankNum === rankStatusArr[i]) {
txt[i].classList.add('green');
}
}

How to show individual ALT tag and URL in responsive popup image gallery

I am pretty new here and also with Javascript but I have tried for quite some time now and can't get my head around how to have individual data in a popup image gallery.
I have tried adding it in multiple ways, and I do not really need a number (1-..) but an individual URL, also an individual description (using the alt tag). So this is the first code that offered it to me and I hope there is some geeks in this community that can give me an easy and quick "fix".
Many thanks in advance!
Here is some code to make you understand better (hopefully):
HTML:
<div class="popup">
<!-- top bar -->
<div class="top-bar">
<p class="image-name">img1.png</p>
<p class="image-description">Just an image</p>
<span class="close-btn"></span>
!-- image -->
<img src="./img/ads/1.png" class="large-image" alt="Just an image">
<!-- image-index -->
<p class="index">01</p>
</div>
<div class="gallery">
<div class="gallery-image">
<img src="./img/ads/1.png" alt="Just an image" class="image">
</div>...
CSS:
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 80%;
max-width: 100%;
height: 90vh;
max-height: 70%;
border-radius: 20px;
background: rgba(0, 0, 0, 0.75);
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
overflow: hidden;
transition: 1s;
opacity: 0;
}
.popup.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.popup.active .close-btn,
.popup.active .image-name,
.popup.active .index,
.popup.active .image-description,
.popup.active .large-image,
.popup.active .arrow-btn {
opacity: 1;
transition: opacity .5s;
transition-delay: 1s;
}
.top-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: #000;
color: #fff;
text-align: center;
line-height: 50px;
font-weight: 300;
}
.image-name {
opacity: 0;
}
.close-btn {
opacity: 0;
position: absolute;
top: 15px;
right: 20px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #f00;
cursor: pointer;
}
JAVASCRIPT:
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const imageName = document.querySelector('.image-name');
const largeImage = document.querySelector('.large-image');
const imageDis = document.querySelector('.image-description');
const imageIndex = document.querySelector('.index');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');
let index = 0; // will track our current image;
images.forEach((item, i) => {
item.addEventListener('click', () => {
updateImage(i);
popup.classList.toggle('active');
});
});
const updateImage = i => {
let path = `./img/ads/${i + 1}.png`;
largeImage.src = path;
imageName.innerHTML = path;
imageIndex.innerHTML = `0${i + 1}`;
index = i;
};
closeBtn.addEventListener('click', () => {
popup.classList.toggle('active');
});
leftArrow.addEventListener('click', () => {
if (index > 0) {
updateImage(index - 1);
}
});
rightArrow.addEventListener('click', () => {
if (index < images.length - 1) { updateImage(index + 1); } });```

How to rotate 4 children within a circle 90 degrees every 3 seconds using CSS custom properties and transform?

I'm trying to rotate 4 children (.feat) elements within a circle 90 degrees every 3 seconds using a CSS custom property called --angle, but it doesn't seem to work as expected:
function rotation() {
let inner = document.querySelector('[inn]');
let rota = inner.style.transform;
}
setInterval(rotation, 3000);
.feat-cont {
width: 60vmax;
height: 60vmax;
}
.feat-cont p {
display: inline-block;
}
.inner {
--angle: 0;
position: relative;
background-color: yellow;
transform: rotate(var(--angle) * 1deg);
width: 100%;
height: 100%;
border-radius: 50%;
}
.feat {
position: absolute;
}
.feat1 {
left: 25vmax;
}
.feat2 {
left: 50vmax;
top: 25vmax;
}
.feat3 {
left: 25vmax;
top: 50vmax;
}
.feat4 {
top: 25vmax;
}
<div class='feat-cont'>
<div class='inner' inn>
<div class='feat feat1' f1>
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
<p>Fast Performance</p>
</div>
<div class='feat feat2' f2>
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
<p>64 GBs of memory</p>
</div>
<div class='feat feat3' f3>
<img src="https://img.icons8.com/nolan/64/camera.png"/>
<p>3K MP camera</p>
</div>
<div class='feat feat4' f4>
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
<p>Trusted brand</p>
</div>
</div>
</div>

You can change the angle CSS custom property using CSSStyleDeclaration.setProperty():
circle.style.setProperty('--angle', `${ angle }deg`);
Also, note you use it as transform: rotate(var(--angle)), not as rotate(var(--angle) * 1deg), so the unit should already be included in the CSS property.
If you don't want to use CSS properties, you can change the style attribute directly:
circle.style.transform = `rotate(${ angle }deg)`;
However, I guess you need to rotate the circle in one direction while rotating all the children (.feat) in the opposite direction to keep them straight, so using CSS properties is probably more convenient, as otherwise, you would have to change the style attribute in all 4 children:
const circle = document.querySelector('.circle');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const step = 90;
let angle = 0;
let intervalID = null;
function updateRotation() {
circle.style.setProperty('--angle', `${ angle }deg`);
circle.style.setProperty('--angle-inverse', `${ -angle }deg`);
}
function autoRotate() {
intervalID = setInterval(() => {
angle += step;
updateRotation();
}, 3000);
}
prev.onclick = () => {
clearInterval(intervalID);
angle -= step;
updateRotation();
autoRotate();
};
next.onclick = () => {
clearInterval(intervalID);
angle += step;
updateRotation();
autoRotate();
};
autoRotate();
body {
font-family: monospace;
}
.container {
width: 60vmax;
height: 60vmax;
margin: 0 auto;
overflow: hidden;
}
.circle {
--angle: 0;
--angle-inverse: 0;
position: relative;
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform linear 1s;
transform: rotate(var(--angle));
}
.feat {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20vmax;
height: 20vmax;
text-align: center;
transition: transform linear 1s;
}
.feat > img {
width: 10vmax;
height: 10vmax;
}
.feat > p {
margin: 8px 0 0;
}
.feat1 {
top: 0;
left: 50%;
transform: translate(-50%, 0) rotate(var(--angle-inverse));
}
.feat2 {
right: 0;
top: 50%;
transform: translate(0, -50%) rotate(var(--angle-inverse));
}
.feat3 {
bottom: 0;
left: 50%;
transform: translate(-50%, 0) rotate(var(--angle-inverse));
}
.feat4 {
left: 0;
top: 50%;
transform: translate(0, -50%) rotate(var(--angle-inverse));
}
.button {
position: fixed;
top: 0;
bottom: 0;
background: transparent;
border: 0;
padding: 32px;
outline: none;
font-family: monospace;
font-size: 32px;
}
.button:hover {
background: rgba(0, 0, 0, .0625);
}
.prev {
left: 0;
}
.next {
right: 0;
}
<div class="container">
<button class="button prev">‹</button>
<div class="circle">
<div class="feat feat1">
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
<p>Fast Performance</p>
</div>
<div class="feat feat2">
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
<p>64 GBs of memory</p>
</div>
<div class="feat feat3">
<img src="https://img.icons8.com/nolan/64/camera.png"/>
<p>3K MP camera</p>
</div>
<div class="feat feat4">
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
<p>Trusted brand</p>
</div>
</div>
<button class="button next">›</button>
</div>

I have added a pure CSS solution, You might not need javascript manipulations at all, it's lightweight too.
Just use CSS inbuilt Animation property.
.inner{animation: rotate 12s infinite;}
#keyframes rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(90deg);}
50%{transform: rotate(180deg);}
75%{transform: rotate(270deg);}
100%{transform: rotate(360deg);}
}
Find the codepen here
.feat-cont {
width: 60vmax;
height: 60vmax;
}
.feat-cont p {
display: inline-block;
}
.inner {
position: relative;
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 50%;
}
.feat {
position: absolute;
}
.feat1 {
left: 25vmax;
}
.feat2 {
left: 50vmax;
top: 25vmax;
}
.feat3 {
left: 25vmax;
top: 50vmax;
}
.feat4 {
top: 25vmax;
}
.inner {
animation: rotate 12s infinite;
}
#keyframes rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(90deg);}
50%{transform: rotate(180deg);}
75%{transform: rotate(270deg);}
100%{transform: rotate(360deg);}
}
#keyframes r-rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(-90deg);}
50%{transform: rotate(-180deg);}
75%{transform: rotate(-270deg);}
100%{transform: rotate(-360deg);}
}
.feat {
animation: r-rotate 12s infinite;
}
<nav></nav>
<main>
<section>
<div class='feat-cont'>
<div class='inner' inn>
<div class='feat feat1' f1>
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/><br><p>Fast Performance</p>
</div>
<div class='feat feat2' f2>
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/><br><p>64 GBs of memory</p>
</div>
<div class='feat feat3' f3>
<img src="https://img.icons8.com/nolan/64/camera.png"/><br><p>3K MP camera</p>
</div>
<div class='feat feat4' f4>
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/><br><p>Trusted brand</p>
</div>
</div>
</div>
</section>
<section class='ndsection'>
</main>

Update Your javascript Code
setInterval(rotation, 3000);
var deg = 90;
let inner = document.querySelector('.inner');
function rotation() {
inner.style.transform='rotate('+deg+'deg)';
}

Why the last child of unordered list is not always animated as expected?

I want to make a simple filterable gallery with plain JavaScript. I made a pen in codepen, in which I'm doing some experiments with colored divs. It still has a lot of work in order to make a better javascript code, but there is a weird behavior which I cannot see why is happening.
The strange behavior has to do with the last child of the list, which isn't always animated as expected. To be more specific:
-If I just select the "yellow" button, all filtered yellow boxes will animate as expected.
-If I first select the "all" button and then I select the "yellow" button, the 10th box isn't animated.
I tried several different things and I noticed that the problem is with the last child of list. For example, I deleted the 6,7,8,9,10 and then the same problem appeared with the fifth box.
I've also tried to completely remove the CSS child selector but the weird behavior still existed.
Any ideas why this might be happening?
https://codepen.io/FoteiniK/pen/oJmbeJ?editors=1010
const allButton = document.getElementById("all");
const listItems = document.getElementsByClassName("item");
const blueButton = document.getElementById("blue");
const yellowButton = document.getElementById("yellow");
const redButton = document.getElementById("red")
const list = document.getElementById("list");
blueButton.onclick = () => {
for (let item of listItems) {
/*reset animation*/
item.style.animation = " ";
item.offsetHeight;
item.style.animation = null;
item.classList.remove("appear-items", "dissappear");
item.classList.contains("blue") === false &&
item.classList.add("dissappear");
}
list.classList.add("reorder");
};
yellowButton.onclick = () => {
for (let item of listItems) {
item.style.animation = " ";
item.offsetHeight;
item.style.animation = null;
item.classList.remove("dissappear", "appear-items");
item.classList.contains("yellow") ===
false && item.classList.add("dissappear");
}
list.classList.add("reorder");
};
redButton.onclick = () => {
for (let item of listItems) {
item.style.animation = " ";
item.offsetHeight;
item.style.animation = null;
item.classList.remove("dissappear", "appear-items");
item.classList.contains("red") ===
false && item.classList.add("dissappear");
}
list.classList.add("reorder");
};
allButton.onclick = () => {
list.classList.remove("reorder");
for (let item of listItems) {
item.style.animation = " ";
item.offsetHeight;
item.style.animation = null;
item.classList.remove("dissappear");
item.classList.add("appear-items");
}
};
$time:0.6s;
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
box-sizing: border-box;
}
.container {
display: flex;
background-color: #afafaf;
margin: 20px;
}
.list {
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.item {
order: 10;
padding: 30px;
background-color: #e12345;
margin: 10px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.buttons {
display: flex;
flex-direction: column;
justify-content: space-evenly;
& button {
padding: 10px;
margin: 3px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
opacity: 0.6;
}
}
}
.reorder {
// .item{
// animation:appear 0.5s;
// }
.item:nth-child(1) {
animation: appear $time ease-in;
order: 0;
}
.item:nth-child(2) {
animation: appear $time ease-in;
order: 1;
}
.item:nth-child(3) {
animation: appear $time ease-in;
order: 2;
}
.item:nth-child(4) {
animation: appear $time ease-in;
order: 5;
}
.item:nth-child(5) {
animation: appear $time ease-in;
order: 4;
}
.item:nth-child(6) {
animation: appear $time ease-in;
order: 2;
}
.item:nth-child(7) {
animation: appear $time ease-in;
order: 1;
}
.item:nth-child(8) {
animation: appear $time ease-in;
order: 0;
}
.item:nth-child(9) {
animation: appear $time ease-in;
order: 0;
}
.item:nth-child(10) {
animation: appear $time ease-in;
order: 1;
}
}
.appear-items {
animation: appear 0.5s;
}
#keyframes appear {
0% {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1);
}
20% {
opacity: 0.2;
transform: scale3d(0.2, 0.2, 0.2);
}
40% {
opacity: 0.4;
transform: scale3d(0.4, 0.4, 0.4);
}
60% {
opacity: 0.6;
transform: scale3d(0.6, 0.6, 0.6) translateY(0);
}
80% {
opacity: 0.8;
transform: scale3d(0.8, 0.8, 0.8);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.dissappear {
display: none;
}
<div class="container">
<div class="buttons">
<button class="all but" id="all">all</button>
<button class="blue but" id="blue">blue</button>
<button class="yellow but" id="yellow">yellow</button>
<button class="red but" id="red">red</button>
</div>
<ul class="list" id="list">
<li class="item blue">1</li>
<li class="item red">2</li>
<li class="item yellow">3</li>
<li class="item red">4</li>
<li class="item yellow">5</li>
<li class="item red">6</li>
<li class="item yellow">7</li>
<li class="item blue">8</li>
<li class="item red">9</li>
<li class="item yellow">10</li>
</ul>
</div>

Clicking card in memory game doesn't flip it over

I'm trying to make a memory game and am struggling to get the cards to flip over when they're clicked. I expected the following for loop to call the function displayCard when a card (corresponding to each li item with class card) is clicked, which function toggles the classes show and open (sets the card to visible [displays icon] and changes the background color). Any suggestions?
CodePen
For loop:
for (let i = 0; i < cards.length; i++) {
card = cards[i];
card.addEventListener('click', displayCard);
card.addEventListener('click', cardOpen);
card.addEventListener('click', congratulations);
}
displayCard function:
let displayCard = function() {
this.classList.toggle('open');
this.classList.toggle('show');
this.classList.toggle('disabled');
};
CSS for classes show and open:
.card-deck .card.open {
/* transform: rotateY(0); */
background: #02b3e4;
cursor: default;
animation-name: flipInY;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
}
.card-deck .card.show {
font-size: 33px;
}
.show {
visibility: visible !important;
opacity: 100 !important;
}

There are two errors in your code that need to be fixed and then the flipping occurs :
in the startGame function, deck.appendChild is not a function. deck was initialized with document.getElementsByClassName('card-deck'). And document.getElementsByClassName returns an array. You need to select the first index of this array.
in the startGame function, interval is not defined. Your function is called before the interval variable is declared. Either move up the interval variable declaration of declare it with the var keyword to "reserve" the identifier.
let card = document.getElementsByClassName('card');
// Spread operator (new in ES6) allows iterable to expand where 0+ arguments are expected
let cards = [...card];
let deck = document.getElementsByClassName('card-deck')[0];
let moves = 0;
let counter = document.querySelector('.moves');
let stars = document.querySelectorAll('.fa-star');
let matchingCard = document.getElementsByClassName('matching');
let starsList = document.querySelectorAll('.stars li');
let closeIcon = document.querySelector('.close');
let modal = document.getElementsByClassName('main-modal');
let openedCards = [];
// Game timer
let second = 0, minute = 0, hour = 0;
let timer = document.querySelector('.timer');
let interval;
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
let currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Shuffles cards upon page load
document.body.onload = startGame();
function startGame() {
// Shuffles deck
cards = shuffle(cards);
// Removes any existing classes from each card
for (let i = 0; i < cards.length; i++) {
deck.innerHTML = '';
[].forEach.call(cards, function(item) {
deck.appendChild(item);
});
cards[i].classList.remove('show', 'open', 'matching', 'disabled');
}
// Resets number of moves
moves = 0;
counter.innerHTML = moves;
// Resets star rating
for (let i = 0; i < stars.length; i++) {
stars[i].style.color = '#ffd700';
stars[i].style.visibility = 'visible';
}
// Resets timer
let second = 0;
let minute = 0;
let hour = 0;
let timer = document.querySelector('.timer');
timer.innerHTML = '0 mins 0 secs';
if (typeof interval != "undefined") {
sclearInterval(interval);
}
}
// Toggles open and show classes to display cards
let displayCard = function() {
this.classList.toggle('open');
this.classList.toggle('show');
this.classList.toggle('disabled');
};
// Adds opened cards to openedCards list and checks if cards are a match or not
function cardOpen() {
openedCards.push(this);
let len = openedCards.length;
if (len === 2) {
moveCounter();
if (openedCards[0].type === openedCards[1].type) {
matching();
} else {
notMatching();
}
}
}
// When cards match
function matching() {
openedCards[0].classList.add('matching', 'disabled');
openedCards[1].classList.add('matching', 'disabled');
openedCards[0].classList.remove('show', 'open');
openedCards[1].classList.remove('show', 'open');
openedCards = [];
}
// When cards don't match
function notMatching() {
openedCards[0].classList.add('not-matching');
openedCards[1].classList.add('not-matching');
disable();
setTimeout(function() {
openedCards[0].classList.remove('show', 'open', 'not-matching');
openedCards[1].classList.remove('show', 'open', 'not-matching');
enable();
openedCards = [];
}, 1100);
}
// Disables cards temporarily
function disable() {
Array.prototype.filter.call(cards, function(card) {
card.classList.add('disabled');
});
}
// Enables cards, disables matching cards
function enable() {
Array.prototype.filter.call(cards, function(card) {
card.classList.remove('disabled');
for (let i = 0; i < matchingCard.length; i++) {
matchingCard[i].classList.add('disabled');
}
});
}
// Counts player's moves
function moveCounter() {
moves++;
counter.innerHTML = moves;
// Starts timer on first click
if (moves == 1) {
second = 0;
minute = 0;
hour = 0;
startTimer();
}
// Sets star rating based on number of moves
if (moves > 8 && moves < 12) {
for (i = 0; i < 3; i++) {
if (i > 1) {
stars[i].style.visibility = 'collapse';
}
}
}
else if (moves > 13) {
for (i = 0; i < 3; i++) {
if (i > 0) {
stars[i].style.visibility = 'collapse';
}
}
}
}
function startTimer() {
interval = setInterval(function() {
timer.innerHTML = minute + 'mins ' + second + 'secs';
second++;
if (second == 60) {
minute++;
second = 0;
}
if (minute == 60) {
hour++;
minute = 0;
}
}, 1000);
}
// Congratulates player when all cards match and shows modal, moves, time and rating
function congratulations() {
if (matchingCard.length == 16) {
clearInterval(interval);
let finalTime = timer.innerHTML;
// Shows congratulations modal
modal.classList.add('show');
let starRating = document.querySelector('.stars').innerHTML;
// Shows move, time, and rating on modal
document.getElementsByClassName('final-move').innerHTML = moves;
document.getElementsByClassName('star-rating').innerHTML = starRating;
document.getElementsByClassName('total-time').innerHTML = finalTime;
closeModal();
}
}
// Closes modal upon clicking its close icon
function closeModal() {
closeIcon.addEventListener('click', function(e) {
modal.classList.remove('show');
startGame();
});
}
function reset() {
modal.classList.remove('show');
startGame();
}
// Adds event listeners to each card
for (let i = 0; i < cards.length; i++) {
card = cards[i];
card.addEventListener('click', displayCard);
card.addEventListener('click', cardOpen);
card.addEventListener('click', congratulations);
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff;
font-family: 'Permanent Marker', cursive;
font-size: 16px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Gloria Hallelujah', cursive;
}
/* DECK OF CARDS */
.card-deck {
width: 85%;
background: #716F71;
padding: 1rem;
border-radius: 4px;
box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 0 0 3em;
}
.card-deck .card {
height: 3.7rem;
width: 3.7rem;
margin: 0.2rem 0.2rem;
background: #141214;;
font-size: 0;
color: #ffffff;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.card-deck .card.open {
/* transform: rotateY(0); */
background: #02b3e4;
cursor: default;
animation-name: flipInY;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
}
.card-deck .card.show {
font-size: 33px;
}
.show {
visibility: visible !important;
opacity: 100 !important;
}
.card-deck .card.matching {
cursor: default;
background: #E5F720;
font-size: 33px;
animation-name: rubberBand;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
}
.card-deck .card.not-matching {
animation-name: pulse;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
background: #e2043b;
}
.card-deck .card.disabled {
pointer-events: none;
opacity: 0.9;
}
/* SCORE PANEL */
.score-panel {
text-align: left;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa-star {
color: #FFD700;
}
.timer {
display: inline-block;
margin: 0 1rem;
}
/* CONGRATULATIONS MODAL */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #ffffff;
border-radius: 5px;
width: 85%;
position: relative;
transition: all 5s ease-in-out;
font-family: 'Gloria Hallelujah', cursive;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #e5f720;
}
.popup .congrats-message,
.info-message {
max-height: 30%;
overflow: auto;
text-align: center;
}
.star-rating li {
display: inline-block;
}
.play-again {
background-color: #141214;
padding: 0.7rem 1rem;
font-size: 1.1rem;
display: block;
margin: 0 auto;
width: 50%;
font-family: 'Gloria Hallelujah', cursive;
color: #ffffff;
border-radius: 5px;
}
/* Animations */
#keyframes flipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
#keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
#keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.2, 1.2, 1.2);
}
to {
transform: scale3d(1, 1, 1);
}
}
/* MEDIA QUERIES */
#media (max-width: 320px) {
.card-deck {
width: 85%;
}
.card-deck .card {
height: 4.7rem;
width: 4.7rem;
}
}
/* For tablets and larger screens */
#media (min-width: 768px) {
.container {
font-size: 22px;
}
.card-deck {
width: 660px;
height: 680px;
}
.card-deck .card {
height: 125px;
width: 125px;
}
.popup {
width: 60%;
}
}
<!-- <!doctype html> -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">0</span> moves
<div class="timer"></div>
<div class="restart" onclick=startGame()>
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="card-deck">
<li class="card" type="diamond">
<i class="fa fa-diamond"></i>
</li>
<li class="card" type="plane">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card matching" type="anchor">
<i class="fa fa-anchor"></i>
</li>
<li class="card" type="bolt" >
<i class="fa fa-bolt"></i>
</li>
<li class="card" type="cube">
<i class="fa fa-cube"></i>
</li>
<li class="card matching" type="anchor">
<i class="fa fa-anchor"></i>
</li>
<li class="card" type="leaf">
<i class="fa fa-leaf"></i>
</li>
<li class="card" type="bicycle">
<i class="fa fa-bicycle"></i>
</li>
<li class="card" type="diamond">
<i class="fa fa-diamond"></i>
</li>
<li class="card" type="bomb">
<i class="fa fa-bomb"></i>
</li>
<li class="card" type="leaf">
<i class="fa fa-leaf"></i>
</li>
<li class="card" type="bomb">
<i class="fa fa-bomb"></i>
</li>
<li class="card open show" type="bolt">
<i class="fa fa-bolt"></i>
</li>
<li class="card" type="bicycle">
<i class="fa fa-bicycle"></i>
</li>
<li class="card" type="plane">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card" type="cube">
<i class="fa fa-cube"></i>
</li>
</ul>
<div class="main-modal overlay">
<div class="popup">
<h2>Congratulations!</h2>
<a class="close" href=# >×</a>
<div class="congrats-message">
Congratulations, you're a winner!
</div>
<div class="info-message">
<p>You made <span class=final-move></span> moves </p>
<p>In <span class=total-time></span></p>
<p>Rating: <span class=star-rating></span></p>
</div>
<button class="play-again" onclick="reset()">
Play again
</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>