├── README.md
├── app.js
├── images
├── beatles.jpeg
├── blink182.jpeg
├── card.jpeg
├── fkatwigs.jpeg
├── fleetwood.jpeg
├── joy-division.jpeg
├── ledzep.jpeg
├── metallica.jpeg
└── pinkfloyd.jpeg
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # memory-game
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | document.addEventListener("DOMContentLoaded", (e) => {
2 | console.log(e);
3 | cardGenerator();
4 | board();
5 | });
6 |
7 | const cardGenerator = () => {
8 | //We generate the object 🧑🏻💻
9 | let cardData = [
10 | { imgSrc: "./images/beatles.jpeg", id: 1, name: "beatles" },
11 | { imgSrc: "./images/blink182.jpeg", id: 2, name: "blink 182" },
12 | { imgSrc: "./images/fkatwigs.jpeg", id: 3, name: "fka twigs" },
13 | { imgSrc: "./images/fleetwood.jpeg", id: 4, name: "fleetwood" },
14 | { imgSrc: "./images/joy-division.jpeg", id: 5, name: "joy division" },
15 | { imgSrc: "./images/ledzep.jpeg", id: 6, name: "lep zeppelin" },
16 | { imgSrc: "./images/metallica.jpeg", id: 7, name: "metallica" },
17 | { imgSrc: "./images/pinkfloyd.jpeg", id: 8, name: "pink floyd" },
18 | { imgSrc: "./images/beatles.jpeg", id: 9, name: "beatles" },
19 | { imgSrc: "./images/blink182.jpeg", id: 10, name: "blink 182" },
20 | { imgSrc: "./images/fkatwigs.jpeg", id: 11, name: "fka twigs" },
21 | { imgSrc: "./images/fleetwood.jpeg", id: 12, name: "fleetwood" },
22 | { imgSrc: "./images/joy-division.jpeg", id: 13, name: "joy division" },
23 | { imgSrc: "./images/ledzep.jpeg", id: 14, name: "led zeppelin" },
24 | { imgSrc: "./images/metallica.jpeg", id: 15, name: "metallica" },
25 | { imgSrc: "./images/pinkfloyd.jpeg", id: 16, name: "pink floyd" },
26 | ];
27 |
28 | //We need to shuffle the cards 🃏
29 | cardData.sort(() => Math.random() - 0.5);
30 |
31 | //We generate the cards ♣️
32 | cardData.forEach((item) => {
33 | const section = document.querySelector("section");
34 | const card = document.createElement("div");
35 | card.classList = "card";
36 |
37 | card.setAttribute("id", item.id);
38 | card.setAttribute("name", item.name);
39 |
40 | const face = document.createElement("img");
41 | face.classList = "face";
42 | face.src = item.imgSrc;
43 |
44 | const back = document.createElement("div");
45 | back.classList = "back";
46 |
47 | section.appendChild(card);
48 | card.appendChild(face);
49 | card.appendChild(back);
50 |
51 | card.addEventListener("click", (e) => {
52 | console.log(e);
53 | //Run our flip animation
54 | face.classList.toggle("toggleCard");
55 | card.classList.toggle("toggleCard");
56 | });
57 | });
58 |
59 | //
60 | };
61 |
62 | const board = () => {
63 | console.log("i will fight you");
64 | };
65 |
66 | //Toggle Cards
67 | // document.addEventListener("click", (event) => {
68 | // console.log(event);
69 | // if(event.target === '')
70 | // });
71 |
--------------------------------------------------------------------------------
/images/beatles.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/beatles.jpeg
--------------------------------------------------------------------------------
/images/blink182.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/blink182.jpeg
--------------------------------------------------------------------------------
/images/card.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/card.jpeg
--------------------------------------------------------------------------------
/images/fkatwigs.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/fkatwigs.jpeg
--------------------------------------------------------------------------------
/images/fleetwood.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/fleetwood.jpeg
--------------------------------------------------------------------------------
/images/joy-division.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/joy-division.jpeg
--------------------------------------------------------------------------------
/images/ledzep.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/ledzep.jpeg
--------------------------------------------------------------------------------
/images/metallica.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/metallica.jpeg
--------------------------------------------------------------------------------
/images/pinkfloyd.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/memory-game/b383b5de9478823144ff1397467d812fb91e3117/images/pinkfloyd.jpeg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Memory Game
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | height: 100vh;
12 | }
13 |
14 | section {
15 | display: grid;
16 | grid-template-rows: repeat(4, 10rem);
17 | grid-template-columns: repeat(4, 10rem);
18 | perspective: 800px;
19 | grid-gap: 2rem;
20 | }
21 |
22 | .back {
23 | background-color: black;
24 | }
25 |
26 | .face,
27 | .back {
28 | position: absolute;
29 | backface-visibility: hidden;
30 | width: 100%;
31 | height: 100%;
32 | }
33 |
34 | .card {
35 | transform-style: preserve-3d;
36 | transition: transform 1s;
37 | position: relative;
38 | width: 100%;
39 | height: 100%;
40 | }
41 |
42 | .toggleCard {
43 | transform: rotateY(180deg);
44 | }
45 |
--------------------------------------------------------------------------------