├── README.md
├── css
    ├── game.css
    ├── login.css
    └── reset.css
├── images
    ├── back.png
    ├── beth.png
    ├── bg.jpg
    ├── brain.png
    ├── cerebro.jpg
    ├── jerry.png
    ├── jessica.png
    ├── logo.png
    ├── meeseeks.png
    ├── morty.png
    ├── pessoa-passaro.png
    ├── pickle-rick.png
    ├── rick.png
    ├── scroopy.png
    └── summer.png
├── index.html
├── js
    ├── game.js
    └── login.js
└── pages
    └── game.html


/README.md:
--------------------------------------------------------------------------------
1 | <h1>Memory Card</h1> 
2 | 
3 | <img src="images/logo.png" alt="Image" height="250" width="500">
4 | 
5 | 
6 | 
7 | 
8 | 


--------------------------------------------------------------------------------
/css/game.css:
--------------------------------------------------------------------------------
 1 | main {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   width: 100%;
 5 |   background-image: url('../images/bg.jpg');
 6 |   background-size: cover;
 7 |   min-height: 100vh;
 8 |   align-items: center;
 9 |   justify-content: center;
10 |   padding: 20px 20px 50px;
11 | }
12 | 
13 | header {
14 |   display: flex;
15 |   align-items: center;
16 |   justify-content: space-between;
17 |   background-color: rgba(255, 255, 255, 0.8);
18 |   font-size: 1.2em;
19 |   width: 100%;
20 |   max-width: 800px;
21 |   padding: 30px;
22 |   margin: 0 0 30px;
23 |   border-radius: 5px;
24 | }
25 | 
26 | .grid {
27 |   display: grid;
28 |   grid-template-columns: repeat(7, 1fr);
29 |   gap: 15px;
30 |   width: 100%;
31 |   max-width: 1200px;
32 |   margin: 0 auto;
33 | }
34 | 
35 | .card {
36 |   aspect-ratio: 3/4;
37 |   width: 100%;
38 |   border-radius: 5px;
39 |   position: relative;
40 |   transition: all 400ms ease;
41 |   transform-style: preserve-3d;
42 |   background-color: #ccc;
43 | }
44 | 
45 | .face {
46 |   width: 100%;
47 |   height: 100%;
48 |   position: absolute;
49 |   background-size: cover;
50 |   background-position: center;
51 |   border: 5px solid #00b5cc;
52 |   border-radius: 5px;
53 |   transition: all 400ms ease;
54 | }
55 | 
56 | .front {
57 |   transform: rotateY(180deg);
58 | }
59 | 
60 | .back {
61 |   background-image: url('../images/back.png');
62 |   backface-visibility: hidden;
63 | }
64 | 
65 | .reveal-card {
66 |   transform: rotateY(180deg);
67 | }
68 | 
69 | .disabled-card {
70 |   filter: saturate(0);
71 |   opacity: 0.5;
72 | }
73 | 
74 | @media screen and (max-width:920px) {
75 |   .grid {
76 |     grid-template-columns: repeat(5, 1fr);
77 | 
78 |   }
79 | }


--------------------------------------------------------------------------------
/css/login.css:
--------------------------------------------------------------------------------
 1 | .login-form {
 2 |   align-items: center;
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   height: 100vh;
 6 |   justify-content: center;
 7 | }
 8 | 
 9 | .login__header {
10 |   align-items: center;
11 |   display: flex;
12 |   flex-direction: column;
13 |   justify-content: center;
14 |   margin-bottom: 50px;
15 | }
16 | 
17 | .login__header img {
18 |   width: 250px;
19 | }
20 | 
21 | 
22 | 
23 | .login__header h1 {
24 |   color: #333;
25 |   font-size: 1.5em;
26 | }
27 | 
28 | .login__input {
29 |   border: 2px solid #333;
30 |   border-radius: 8px;
31 |   color: #333;
32 |   font-size: 1em;
33 |   margin-bottom: 15px;
34 |   max-width: 300px;
35 |   outline: none;
36 |   padding: 15px;
37 |   width: 100%;
38 | }
39 | 
40 | .login__button {
41 |   background-color: #00b5cc;
42 |   border: 3px solid #b2df28;
43 |   border-radius: 8px;
44 |   color: #fff;
45 |   cursor: pointer;
46 |   font-size: 1em;
47 |   max-width: 300px;
48 |   padding: 15px;
49 |   width: 100%;
50 | }
51 | 
52 | .login__button:disabled {
53 |   background-color: #eee;
54 |   border: 2px solid #969595;
55 |   color: #aaa;
56 |   cursor: auto;
57 | }


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 2 | 
 3 | * {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   box-sizing: border-box;
 7 |   list-style: none;
 8 |   border: none;
 9 |   font-family: 'Press Start 2P', cursive;
10 | }
11 | 


--------------------------------------------------------------------------------
/images/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/back.png


--------------------------------------------------------------------------------
/images/beth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/beth.png


--------------------------------------------------------------------------------
/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/bg.jpg


--------------------------------------------------------------------------------
/images/brain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/brain.png


--------------------------------------------------------------------------------
/images/cerebro.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/cerebro.jpg


--------------------------------------------------------------------------------
/images/jerry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/jerry.png


--------------------------------------------------------------------------------
/images/jessica.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/jessica.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/logo.png


--------------------------------------------------------------------------------
/images/meeseeks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/meeseeks.png


--------------------------------------------------------------------------------
/images/morty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/morty.png


--------------------------------------------------------------------------------
/images/pessoa-passaro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/pessoa-passaro.png


--------------------------------------------------------------------------------
/images/pickle-rick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/pickle-rick.png


--------------------------------------------------------------------------------
/images/rick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/rick.png


--------------------------------------------------------------------------------
/images/scroopy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/scroopy.png


--------------------------------------------------------------------------------
/images/summer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manualdodev/memory-game/c771d285de01934f95f82da7d06881c61c6820f4/images/summer.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |   <link rel="stylesheet" href="./css/reset.css">
 9 |   <link rel="stylesheet" href="./css/login.css">
10 | 
11 |   <script defer src="./js/login.js"></script>
12 |   <link rel="shortcut icon" href="./images/brain.png" type="image/x-icon">
13 |   <title>Memory Game | Login</title>
14 | </head>
15 | 
16 | <body>
17 | 
18 |   <form class="login-form">
19 | 
20 |     <div class="login__header">
21 |       <img src="./images/logo.png" alt="logo">
22 |       <img src="./images/cerebro.jpg" alt="brain icon">
23 |       <h1>Memory Game</h1>
24 |     </div>
25 | 
26 |     <input type="text" placeholder="Name" class="login__input">
27 |     <button type="submit" class="login__button">Play</button>
28 | 
29 |   </form>
30 | 
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/js/game.js:
--------------------------------------------------------------------------------
  1 | const grid = document.querySelector('.grid');
  2 | const spanPlayer = document.querySelector('.player');
  3 | const timer = document.querySelector('.timer');
  4 | 
  5 | const characters = [
  6 |   'beth',
  7 |   'jerry',
  8 |   'jessica',
  9 |   'morty',
 10 |   'pessoa-passaro',
 11 |   'pickle-rick',
 12 |   'rick',
 13 |   'summer',
 14 |   'meeseeks',
 15 |   'scroopy',
 16 | ];
 17 | 
 18 | const createElement = (tag, className) => {
 19 |   const element = document.createElement(tag);
 20 |   element.className = className;
 21 |   return element;
 22 | }
 23 | 
 24 | let firstCard = '';
 25 | let secondCard = '';
 26 | 
 27 | const checkEndGame = () => {
 28 |   const disabledCards = document.querySelectorAll('.disabled-card');
 29 | 
 30 |   if (disabledCards.length === 20) {
 31 |     clearInterval(this.loop);
 32 |     alert(`Parabéns, ${spanPlayer.innerHTML}! Seu tempo foi de: ${timer.innerHTML}`);
 33 |   }
 34 | }
 35 | 
 36 | const checkCards = () => {
 37 |   const firstCharacter = firstCard.getAttribute('data-character');
 38 |   const secondCharacter = secondCard.getAttribute('data-character');
 39 | 
 40 |   if (firstCharacter === secondCharacter) {
 41 | 
 42 |     firstCard.firstChild.classList.add('disabled-card');
 43 |     secondCard.firstChild.classList.add('disabled-card');
 44 | 
 45 |     firstCard = '';
 46 |     secondCard = '';
 47 | 
 48 |     checkEndGame();
 49 | 
 50 |   } else {
 51 |     setTimeout(() => {
 52 | 
 53 |       firstCard.classList.remove('reveal-card');
 54 |       secondCard.classList.remove('reveal-card');
 55 | 
 56 |       firstCard = '';
 57 |       secondCard = '';
 58 | 
 59 |     }, 500);
 60 |   }
 61 | 
 62 | }
 63 | 
 64 | const revealCard = ({ target }) => {
 65 | 
 66 |   if (target.parentNode.className.includes('reveal-card')) {
 67 |     return;
 68 |   }
 69 | 
 70 |   if (firstCard === '') {
 71 | 
 72 |     target.parentNode.classList.add('reveal-card');
 73 |     firstCard = target.parentNode;
 74 | 
 75 |   } else if (secondCard === '') {
 76 | 
 77 |     target.parentNode.classList.add('reveal-card');
 78 |     secondCard = target.parentNode;
 79 | 
 80 |     checkCards();
 81 | 
 82 |   }
 83 | }
 84 | 
 85 | const createCard = (character) => {
 86 | 
 87 |   const card = createElement('div', 'card');
 88 |   const front = createElement('div', 'face front');
 89 |   const back = createElement('div', 'face back');
 90 | 
 91 |   front.style.backgroundImage = `url('../images/${character}.png')`;
 92 | 
 93 |   card.appendChild(front);
 94 |   card.appendChild(back);
 95 | 
 96 |   card.addEventListener('click', revealCard);
 97 |   card.setAttribute('data-character', character)
 98 | 
 99 |   return card;
100 | }
101 | 
102 | const loadGame = () => {
103 |   const duplicateCharacters = [...characters, ...characters];
104 | 
105 |   const shuffledArray = duplicateCharacters.sort(() => Math.random() - 0.5);
106 | 
107 |   shuffledArray.forEach((character) => {
108 |     const card = createCard(character);
109 |     grid.appendChild(card);
110 |   });
111 | }
112 | 
113 | const startTimer = () => {
114 | 
115 |   this.loop = setInterval(() => {
116 |     const currentTime = +timer.innerHTML;
117 |     timer.innerHTML = currentTime + 1;
118 |   }, 1000);
119 | 
120 | }
121 | 
122 | window.onload = () => {
123 |   spanPlayer.innerHTML = localStorage.getItem('player');
124 |   startTimer();
125 |   loadGame();
126 | }
127 | 


--------------------------------------------------------------------------------
/js/login.js:
--------------------------------------------------------------------------------
 1 | const input = document.querySelector('.login__input');
 2 | const button = document.querySelector('.login__button');
 3 | const form = document.querySelector('.login-form');
 4 | 
 5 | const validateInput = ({ target }) => {
 6 |   if (target.value.length > 3) {
 7 |     button.removeAttribute('disabled');
 8 |     return;
 9 |   }
10 | 
11 |   button.setAttribute('disabled', '');
12 | }
13 | 
14 | const handleSubmit = (event) => {
15 |   event.preventDefault();
16 | 
17 |   localStorage.setItem('player', input.value);
18 |   window.location = 'pages/game.html';
19 | }
20 | 
21 | input.addEventListener('input', validateInput);
22 | form.addEventListener('submit', handleSubmit);
23 | 


--------------------------------------------------------------------------------
/pages/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <link rel="stylesheet" href="../css/reset.css">
 8 |   <link rel="stylesheet" href="../css/game.css">
 9 | 
10 |   <script defer src="../js/game.js"></script>
11 | 
12 |   <title>Memory Game</title>
13 | </head>
14 | 
15 | <body>
16 | 
17 |   <main>
18 |     <header>
19 |       <span class="player"></span>
20 |       <span>Tempo: <span class="timer">00</span></span>
21 |     </header>
22 | 
23 |     <div class="grid"></div>
24 |   </main>
25 | 
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------