1
I am developing a memory game and the icons they are not going one for each li but every loop appearing one more icons in the corresponding li. In the last li appears 16 icons instead of a.
const cards = [
'fa fa-diamond',
'fa fa-paper-plane-o',
'fa fa-anchor',
'fa fa-bolt',
'fa fa-cube',
'fa fa-leaf',
'fa fa-bicycle',
'fa fa-bomb',
'fa fa-diamond',
'fa fa-paper-plane-o',
'fa fa-anchor',
'fa fa fa-bolt',
'fa fa-cube',
'fa fa-leaf',
'fa fa-bicycle',
'fa fa-bomb'
];
let ul = document.getElementById('li');
let li = '';
for (i = 0; i<cards.length; i++) {
li += '<li class="card">' +
'<i class=" ' +cards[i]+ '" </i>' +
'</li>'
};
document.getElementById('deck').innerHTML= li;
$("li").on('click' , function(){
$(this).toggleClass(".card open show");
console.log("li");
});html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
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;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game - Jogo da Memória</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="css/app.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">3</span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul id="deck" class="deck"> </ul>
</div>
<script src="js/app.js"></script>
</body>
</html>bold text
Missing close the element
iwithin the js.– Francisco
Truth ! ! ! thank you very much ! ! ! ! !
– Diego Cruz