CompleteNewb
Coder
hello,
I'm trying to make the memory game from the youtube video I did everything she did, check my code on a codechecker, double check my picture path but it still doesn't work
here's the html file
[CODE lang="html" title="memory.html"]<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Memory game</title>
<link rel="stylesheet" href="style.css"></link>
<script src="app.js" charset="utf-8"></script>
</head>
<body>
<h3>Score:<span id="result"></span><h3>
<div class="grid">
</div>
</body>
</html>[/CODE]
here's the js file
[CODE lang="javascript" title="app.js"]document.addEventListener('DOMContentLoaded', ()=>{
const cardArray= [
{
name:'rooster',
img:'pictures/rooster.jpg.'
},
{
name:'monkey',
img:'monkey.jpg'
},
{
name:'robot',
img:'pictures/robot.jpg'
},
{
name:'mazinger',
img:'pictures/mazinger.jpg'
},
{
name:'book',
img:'pictures/book.jpg'
},
{
name:'megaman',
img:'pictures/megaman.jpg'
},
{
name:'rooster',
img:'pictures/rooster.jpg'
},
{
name:'monkey',
img:'monkey.jpg'
},
{
name:'robot',
img:'pictures/robot.jpg'
},
{
name:'mazinger',
img:'pictures/mazinger.jpg'
},
{
name:'book',
img:'pictures/book.jpg'
},
{
name:'megaman',
img:'pictures/megaman.jpg'
}
]
const grid = document.querySelector('.grid');
function createBoard(){
for (let i=0; i< cardArray.lenght; i++){
var card = document.createElement('img');
card.setAttribute('src', 'monkey.jpg');
card.setAttribute('data-id', i);
//card.addEventListener('click', flipcard);
grid.appendChild(card);
}
}
createBoard();
});
[/CODE]
and the css file
[CODE lang="css" title="style.css"].grid{
display:flex;
flex-wrap: wrap;
height:300px;
width: 400px;
}[/CODE]
Sorry for putting everything, but there's not much and I tought it would be easier.
The girl in the video executed that and she had the monkey picture repeated 12 times in a square.
Me i only have "score" show up.
thank you for your help
I'm trying to make the memory game from the youtube video I did everything she did, check my code on a codechecker, double check my picture path but it still doesn't work
here's the html file
[CODE lang="html" title="memory.html"]<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Memory game</title>
<link rel="stylesheet" href="style.css"></link>
<script src="app.js" charset="utf-8"></script>
</head>
<body>
<h3>Score:<span id="result"></span><h3>
<div class="grid">
</div>
</body>
</html>[/CODE]
here's the js file
[CODE lang="javascript" title="app.js"]document.addEventListener('DOMContentLoaded', ()=>{
const cardArray= [
{
name:'rooster',
img:'pictures/rooster.jpg.'
},
{
name:'monkey',
img:'monkey.jpg'
},
{
name:'robot',
img:'pictures/robot.jpg'
},
{
name:'mazinger',
img:'pictures/mazinger.jpg'
},
{
name:'book',
img:'pictures/book.jpg'
},
{
name:'megaman',
img:'pictures/megaman.jpg'
},
{
name:'rooster',
img:'pictures/rooster.jpg'
},
{
name:'monkey',
img:'monkey.jpg'
},
{
name:'robot',
img:'pictures/robot.jpg'
},
{
name:'mazinger',
img:'pictures/mazinger.jpg'
},
{
name:'book',
img:'pictures/book.jpg'
},
{
name:'megaman',
img:'pictures/megaman.jpg'
}
]
const grid = document.querySelector('.grid');
function createBoard(){
for (let i=0; i< cardArray.lenght; i++){
var card = document.createElement('img');
card.setAttribute('src', 'monkey.jpg');
card.setAttribute('data-id', i);
//card.addEventListener('click', flipcard);
grid.appendChild(card);
}
}
createBoard();
});
[/CODE]
and the css file
[CODE lang="css" title="style.css"].grid{
display:flex;
flex-wrap: wrap;
height:300px;
width: 400px;
}[/CODE]
Sorry for putting everything, but there's not much and I tought it would be easier.
The girl in the video executed that and she had the monkey picture repeated 12 times in a square.
Me i only have "score" show up.
thank you for your help
.
). Good, glad to see it now works!
