Skip to content

Commit dddfd1d

Browse files
rohithpalarohithpala
committed
Memory Card game using HTML, CSS, JS
1 parent df2b006 commit dddfd1d

35 files changed

+346
-60
lines changed

‎memory-card-game/images/image0.jpg

1.33 MB
Loading

‎memory-card-game/images/image1.jpg

906 KB
Loading

‎memory-card-game/images/image10.jpg

5.62 MB
Loading

‎memory-card-game/images/image11.jpg

860 KB
Loading

‎memory-card-game/images/image12.jpg

6.13 MB
Loading

‎memory-card-game/images/image13.jpg

1.25 MB
Loading

‎memory-card-game/images/image14.jpg

3.54 MB
Loading

‎memory-card-game/images/image15.jpg

3.03 MB
Loading

‎memory-card-game/images/image16.jpg

2.82 MB
Loading

‎memory-card-game/images/image17.jpg

907 KB
Loading

‎memory-card-game/images/image18.jpg

2.5 MB
Loading

‎memory-card-game/images/image19.jpg

1.98 MB
Loading

‎memory-card-game/images/image2.jpg

798 KB
Loading

‎memory-card-game/images/image20.jpg

2.28 MB
Loading

‎memory-card-game/images/image21.jpg

1.87 MB
Loading

‎memory-card-game/images/image22.jpg

2.22 MB
Loading

‎memory-card-game/images/image23.jpg

4.3 MB
Loading

‎memory-card-game/images/image24.jpg

1.83 MB
Loading

‎memory-card-game/images/image25.jpg

871 KB
Loading

‎memory-card-game/images/image26.jpg

4.35 MB
Loading

‎memory-card-game/images/image27.jpg

1.3 MB
Loading

‎memory-card-game/images/image28.jpg

702 KB
Loading

‎memory-card-game/images/image29.jpg

4.22 MB
Loading

‎memory-card-game/images/image3.jpg

3.42 MB
Loading

‎memory-card-game/images/image4.jpg

1.16 MB
Loading

‎memory-card-game/images/image5.jpg

2.46 MB
Loading

‎memory-card-game/images/image6.jpg

1.55 MB
Loading

‎memory-card-game/images/image7.jpg

318 KB
Loading

‎memory-card-game/images/image8.jpg

6.34 MB
Loading

‎memory-card-game/images/image9.jpg

2.62 MB
Loading

‎memory-card-game/images/qm.png

8.11 KB
Loading

‎memory-card-game/index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Memory Game | Card Game</title>
9+
10+
<link rel="stylesheet" href="memory-card-game.css">
11+
<script src="memory-card-game.js" defer></script>
12+
</head>
13+
14+
<body>
15+
<div class="n-cards-container">
16+
<span>Choose the No. of Cards to play</span>
17+
<div class="n-cards" data-n="12">12</div>
18+
<div class="n-cards" data-n="16">16</div>
19+
<div class="n-cards" data-n="20">20</div>
20+
<div class="n-cards" data-n="24">24</div>
21+
22+
<div id="written-by-container">
23+
<h3>Written by <a href="https://github.com/rohithpala" target="_blank">Rohith Pala</a> with &hearts;.</h3>
24+
<h3>You can find the code of this project
25+
<a href="https://github.com/rohithpala/HTML-CSS-JS-Projects/tree/main/memory-card-game"
26+
target="_blank">here</a>
27+
</h3>
28+
</div>
29+
</div>
30+
<div class="game-container">
31+
<nav>
32+
<div>
33+
<button class="nav-home-btn">Home</button>
34+
<button class="nav-restart-btn">Restart</button>
35+
</div>
36+
<div class="timer">
37+
<span class="minutes">00</span> :
38+
<span class="seconds">00</span>
39+
</div>
40+
<div class="moves-container">Moves : <span class="moves">0</span></div>
41+
</nav>
42+
43+
<div class="game-grid"></div>
44+
</div>
45+
46+
</body>
47+
<div class="game-completed-modal">
48+
<div class="modal">
49+
<span>
50+
You've Succesfully Completed the Game in <span class="final-moves"></span> moves
51+
<span>Time Taken : <span class="time-taken">00:00</span></span>
52+
</span>
53+
<button class="button home-btn">Go back to Home</button>
54+
<button class="button restart-btn">Restart this game</button>
55+
<button class="close-btn">x</button>
56+
</div>
57+
</div>
58+
59+
</html>

‎memory-card-game/memory-card-game.css

Lines changed: 138 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,54 @@
7474
}
7575

7676
/* Game Container */
77+
78+
/* Navbar */
79+
nav {
80+
position: fixed;
81+
top: 0;
82+
left: 0;
83+
display: flex;
84+
justify-content: space-between;
85+
align-items: center;
86+
width: 100%;
87+
padding: 30px;
88+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
89+
}
90+
91+
nav>div {
92+
display: flex;
93+
justify-content: center;
94+
align-items: center;
95+
}
96+
97+
.moves-container {
98+
display: flex;
99+
justify-content: center;
100+
align-items: center;
101+
}
102+
103+
span.moves {
104+
font-weight: 600;
105+
margin-left: 5px;
106+
}
107+
108+
.nav-home-btn,
109+
.nav-restart-btn {
110+
display: flex;
111+
justify-content: center;
112+
align-items: center;
113+
color: #fff;
114+
background-color: #ff4848;
115+
margin-left: 10px;
116+
padding: 5px 15px;
117+
font-weight: 600;
118+
cursor: pointer;
119+
}
120+
121+
.nav-home-btn {
122+
background-color: #009700;
123+
}
124+
77125
.game-container {
78126
display: none;
79127
flex-direction: column;
@@ -87,6 +135,94 @@
87135
place-items: center;
88136
grid-template-columns: repeat(var(--cols), 1fr);
89137
grid-gap: 10px;
90-
width: 800px;
91-
height: 700px;
92138
}
139+
140+
.game-grid>div {
141+
display: flex;
142+
justify-content: center;
143+
align-items: center;
144+
width: 110px;
145+
height: 110px;
146+
border: 4px solid #000;
147+
cursor: pointer;
148+
}
149+
150+
.game-grid>div img {
151+
width: 100px;
152+
height: 100px;
153+
}
154+
155+
.game-grid>div>.open {
156+
display: none;
157+
}
158+
159+
/* Modal */
160+
.final-moves,
161+
.time-taken {
162+
font-weight: 600;
163+
}
164+
165+
.button {
166+
background-color: transparent;
167+
margin: 20px 10px;
168+
padding: 4px 10px;
169+
cursor: pointer;
170+
}
171+
172+
.game-completed-modal {
173+
display: none;
174+
position: fixed;
175+
top: 0;
176+
left: 0;
177+
width: 100vw;
178+
min-height: 100vh;
179+
flex-direction: column;
180+
justify-content: center;
181+
align-items: center;
182+
background-color: rgba(0, 0, 0, 0.2);
183+
}
184+
185+
.modal {
186+
position: relative;
187+
background-color: #fff;
188+
width: 500px;
189+
max-width: 100%;
190+
text-align: center;
191+
padding: 2rem;
192+
border-radius: 5px;
193+
}
194+
195+
.modal>span {
196+
display: block;
197+
}
198+
199+
.close-btn {
200+
position: absolute;
201+
top: 10px;
202+
right: 10px;
203+
display: flex;
204+
justify-content: center;
205+
align-items: center;
206+
color: #fff;
207+
background-color: #f00;
208+
border-radius: 50%;
209+
width: 20px;
210+
height: 20px;
211+
cursor: pointer;
212+
}
213+
214+
/* Written by ... */
215+
#written-by-container {
216+
display: flex;
217+
flex-direction: column;
218+
justify-content: center;
219+
align-items: center;
220+
border: 2px solid #000;
221+
border-radius: 10px;
222+
padding: 1rem;
223+
margin-top: 30px;
224+
}
225+
226+
#written-by-container a {
227+
color: #000;
228+
}

‎memory-card-game/memory-card-game.html

Lines changed: 0 additions & 48 deletions
This file was deleted.

0 commit comments

Comments
 (0)