├── README.md
├── style.css
├── script.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # Connect-Four
2 | Connect Four Points To Win The Game
3 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /* scrollbar start  */
  2 | 
  3 | ::-webkit-scrollbar {
  4 |     width: 5px;
  5 |     border-radius: 50%;
  6 | }
  7 | 
  8 | 
  9 | /* Track */
 10 | 
 11 | ::-webkit-scrollbar-track {
 12 |     background: black;
 13 | }
 14 | 
 15 | 
 16 | /* Handle */
 17 | 
 18 | ::-webkit-scrollbar-thumb {
 19 |     background: #4f3ff0;
 20 | }
 21 | 
 22 | 
 23 | /* Handle on hover */
 24 | 
 25 | ::-webkit-scrollbar-thumb:hover {
 26 |     background: #2013af;
 27 | }
 28 | 
 29 | 
 30 | /* scrollbar end  */
 31 | 
 32 | .grow {
 33 |     transition: all 0.3s ease-in-out;
 34 | }
 35 | 
 36 | .grow:hover {
 37 |     transform: scale(1.1);
 38 | }
 39 | 
 40 | body {
 41 |     background-color: #e9e7fd;
 42 |     height: 100vh;
 43 | }
 44 | 
 45 | 
 46 | /* Main Container */
 47 | 
 48 | #main-container {
 49 |     align-items: center;
 50 |     display: flex;
 51 |     flex-direction: column;
 52 |     justify-content: center;
 53 |     min-height: 99vh;
 54 | }
 55 | 
 56 | 
 57 | /* Player Details */
 58 | 
 59 | #player {
 60 |     background-color: #d5deff;
 61 |     border: 4px solid #4f3ff0;
 62 |     border-radius: 3px;
 63 |     margin-top: 10px;
 64 |     padding: 1px;
 65 |     width: 216px;
 66 |     font-size: 11px;
 67 | }
 68 | 
 69 | #player-type {
 70 |     color: #4f3ff0;
 71 |     font-family: "Poppins";
 72 |     letter-spacing: 5px;
 73 |     text-align: center;
 74 |     text-transform: uppercase;
 75 |     margin: 0;
 76 | }
 77 | 
 78 | #player1 {
 79 |     background-color: #d5deff;
 80 |     border: 4px solid #4f3ff0;
 81 |     border-radius: 3px;
 82 |     margin-top: 5px;
 83 |     padding: 1px;
 84 |     width: 416px;
 85 |     font-size: 11px;
 86 | }
 87 | 
 88 | #player-type1 {
 89 |     color: #4f3ff0;
 90 |     font-family: "Poppins";
 91 |     letter-spacing: 5px;
 92 |     text-align: center;
 93 |     text-transform: uppercase;
 94 |     margin: 0;
 95 | }
 96 | 
 97 | 
 98 | /* Grid */
 99 | 
100 | #grid {
101 |     background-color: #4f3ff0;
102 |     border: 3.5px solid #d5deff;
103 |     border-radius: 8px;
104 |     box-shadow: 2px 3px 7px grey;
105 |     margin-top: 20px;
106 |     max-width: 600px;
107 |     padding: 2px;
108 | }
109 | 
110 | 
111 | /* Grid Row */
112 | 
113 | .row {
114 |     display: flex;
115 | }
116 | 
117 | 
118 | /* Grid Column */
119 | 
120 | .col {
121 |     align-items: center;
122 |     background-color: #d5deff;
123 |     border: 1px solid #4f3ff0;
124 |     border-radius: 5px;
125 |     display: flex;
126 |     justify-content: center;
127 |     height: 50px;
128 |     margin: 5px;
129 |     width: 50px;
130 | }
131 | 
132 | 
133 | /* Buttons */
134 | 
135 | .btn {
136 |     background-color: transparent;
137 |     border: none;
138 |     color: transparent;
139 |     height: 100%;
140 |     padding: 0;
141 |     width: 100%;
142 | }
143 | 
144 | #reset-btn {
145 |     background-color: transparent;
146 |     border: 2px solid #4f3ff0;
147 |     border-radius: 5px;
148 |     color: #4f3ff0;
149 |     font-family: "Poppins";
150 |     font-size: 1rem;
151 |     margin: 20px 0;
152 |     padding: 10px 40px;
153 |     text-transform: uppercase;
154 |     transition: 0.7s;
155 | }
156 | 
157 | #reset-btn:hover {
158 |     background-color: #4f3ff0;
159 |     color: #d5deff;
160 |     cursor: pointer;
161 |     transition: 0.7s;
162 | }
163 | 
164 | 
165 | /* Player - 1 Buttons */
166 | 
167 | .btn-player-1 {
168 |     background-color: #34c471;
169 |     border: 2px solid #34c471;
170 |     border-radius: 50%;
171 |     color: red;
172 |     height: 40px;
173 |     width: 40px;
174 | }
175 | 
176 | 
177 | /* Player - 2 Buttons */
178 | 
179 | .btn-player-2 {
180 |     background-color: #df3670;
181 |     border: 2px solid #df3670;
182 |     border-radius: 50%;
183 |     color: red;
184 |     height: 40px;
185 |     width: 40px;
186 | }
187 | 
188 | 
189 | /* Media Queries */
190 | 
191 | @media (max-width: 800px) {
192 |     #grid {
193 |         width: 500px;
194 |     }
195 | 
196 |     .col {
197 |         height: 62px;
198 |         margin: 4px;
199 |         width: 62px;
200 |     }
201 | 
202 |     #player {
203 |         width: 450px;
204 |     }
205 | 
206 |     #reset-btn {
207 |         font-size: 1.2rem;
208 |     }
209 | 
210 |     .btn-player-1 {
211 |         height: 40px;
212 |         width: 40px;
213 |     }
214 | 
215 |     .btn-player-2 {
216 |         height: 40px;
217 |         width: 40px;
218 |     }
219 | 
220 |     #player {
221 |         margin-top: 10px;
222 |         padding: 1px;
223 |         width: 210px;
224 |         font-size: 11px;
225 |     }
226 | 
227 |     #player-type {
228 |         letter-spacing: 1px;
229 |         margin: 0;
230 |     }
231 | 
232 |     #player1 {
233 |         border-radius: 3px;
234 |         margin-top: 5px;
235 |         padding: 1px;
236 |         width: 350px;
237 |         font-size: 11px;
238 |     }
239 | 
240 |     #player-type1 {
241 |         letter-spacing: 3px;
242 |         margin: 0;
243 |     }
244 | }
245 | 
246 | @media (max-width: 550px) {
247 |     #grid {
248 |         width: 400px;
249 |     }
250 | 
251 |     .col {
252 |         height: 50px;
253 |         margin: 3px;
254 |         width: 50px;
255 |     }
256 | 
257 |     #player {
258 |         margin-top: 10px;
259 |         padding: 1px;
260 |         width: 210px;
261 |         font-size: 11px;
262 |     }
263 | 
264 |     #player-type {
265 |         letter-spacing: 1px;
266 |         margin: 0;
267 |     }
268 | 
269 |     #player1 {
270 |         border-radius: 3px;
271 |         margin-top: 5px;
272 |         padding: 1px;
273 |         width: 250px;
274 |         font-size: 11px;
275 |     }
276 | 
277 |     #player-type1 {
278 |         letter-spacing: 3px;
279 |         margin: 0;
280 |     }
281 | 
282 |     #reset-btn {
283 |         font-size: 1rem;
284 |     }
285 | 
286 |     .btn-player-1 {
287 |         height: 30px;
288 |         width: 30px;
289 |     }
290 | 
291 |     .btn-player-2 {
292 |         height: 30px;
293 |         width: 30px;
294 |     }
295 | }
296 | 
297 | @media (max-width: 450px) {
298 |     #player {
299 |         margin-top: 10px;
300 |         padding: 1px;
301 |         width: 240px;
302 |         font-size: 11px;
303 |     }
304 | 
305 |     #player-type {
306 |         letter-spacing: 1px;
307 |         margin: 0;
308 |     }
309 | 
310 |     #player1 {
311 |         border-radius: 3px;
312 |         margin-top: 5px;
313 |         padding: 1px;
314 |         width: 250px;
315 |         font-size: 11px;
316 |     }
317 | 
318 |     #player-type1 {
319 |         letter-spacing: 3px;
320 |         margin: 0;
321 |     }
322 | 
323 |     #grid {
324 |         width: 90%;
325 |     }
326 | 
327 |     .col {
328 |         height: 40px;
329 |         margin: 2px;
330 |     }
331 | 
332 |     #player {
333 |         align-items: center;
334 |         display: flex;
335 |         border-width: 5px;
336 |         justify-content: center;
337 |         height: 30px;
338 |         width: 37%;
339 |     }
340 | 
341 |     #player-type {
342 |         font-size: 1.2rem;
343 |     }
344 | 
345 |     #reset-btn {
346 |         font-size: 0.8rem;
347 |     }
348 | 
349 |     .btn-player-1 {
350 |         height: 20px;
351 |         width: 20px;
352 |     }
353 | 
354 |     .btn-player-2 {
355 |         height: 20px;
356 |         width: 20px;
357 |     }
358 | }


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | // DOM Variables
  2 | 
  3 | var buttons = document.getElementsByClassName("btn");
  4 | var reset = document.getElementById("reset-btn");
  5 | var playerType = document.getElementById("player-type");
  6 | var click = document.getElementById("click");
  7 | var win = document.getElementById("win");
  8 | var lost = document.getElementById("lost");
  9 | // Game Flow Variables
 10 | 
 11 | var playerNumber = 1; // Initially player - 1 gets to start his/her turn
 12 | 
 13 | var filledGrid = []; // Player board
 14 | 
 15 | var filledCells = 0; // No. of cells that has been filled
 16 | 
 17 | for (var i = 0; i < 6; i++) {
 18 | 
 19 |     var arr = [-1, -1, -1, -1, -1, -1, -1]; // Board is initialised with -1
 20 |     filledGrid.push(arr);
 21 | 
 22 | }
 23 | 
 24 | // Click Sound 
 25 | function clicksound() {
 26 |     click.play();
 27 | }
 28 | 
 29 | // Event Listener for Buttons
 30 | 
 31 | reset.addEventListener("click", function () {
 32 | 
 33 |     resetBoard();
 34 | 
 35 | });
 36 | 
 37 | for (var i = 0; i < buttons.length; i++) {
 38 | 
 39 |     // Handing the Event when button was clicked
 40 | 
 41 |     buttons[i].addEventListener("click", function () {
 42 | 
 43 |         // Make move and disable the button to avoid furthur clicking it again
 44 | 
 45 |         var buttonNo = this.classList[1];
 46 |         makeMove(this, buttonNo.slice(4));
 47 | 
 48 |     });
 49 | 
 50 | }
 51 | 
 52 | 
 53 | // Function to Make Move on the passed button and disable it
 54 | function makeMove(button, buttonNo) {
 55 | 
 56 |     var row = buttonNo % 7 === 0 ? Math.floor(buttonNo / 7) - 1 : Math.floor(buttonNo / 7);
 57 |     var col = buttonNo % 7 === 0 ? 6 : (buttonNo % 7) - 1;
 58 | 
 59 |     if (playerNumber === 1) {
 60 | 
 61 |         button.classList.add("btn-player-1");
 62 | 
 63 | 
 64 |         filledGrid[row][col] = 1;
 65 |         filledCells++;
 66 | 
 67 | 
 68 |         if (playerWon(row, col, 1) === true) {
 69 | 
 70 | 
 71 | 
 72 | 
 73 | 
 74 |             win.play();
 75 |             swal({
 76 |                 title: "GREEN WINS",
 77 |                 text: "Press Ok To Play Again",
 78 |                 icon: "success",
 79 |                 buttons: true,
 80 |                 Mode: true,
 81 |             })
 82 |                 .then((willDelete) => {
 83 |                     if (willDelete) {
 84 |                         resetBoard();
 85 |                     }
 86 |                 });
 87 |         }
 88 | 
 89 |         // Update the player
 90 |         playerNumber = 2;
 91 |         playerType.textContent = "Player - 2";
 92 | 
 93 |     } else {
 94 | 
 95 |         button.classList.add("btn-player-2");
 96 | 
 97 | 
 98 |         filledGrid[row][col] = 2;
 99 |         filledCells++;
100 | 
101 |         if (playerWon(row, col, 2) === true) {
102 |             win.play();
103 |             swal({
104 |                 title: "RED WINS",
105 |                 text: "Press Ok To Play Again",
106 |                 icon: "success",
107 |                 buttons: true,
108 |                 Mode: true,
109 |             })
110 |                 .then((willDelete) => {
111 |                     if (willDelete) {
112 |                         resetBoard();
113 |                     }
114 |                 });
115 |         }
116 | 
117 |         // Update the player
118 |         playerNumber = 1;
119 |         playerType.textContent = "Player - 1";
120 | 
121 |     }
122 | 
123 |     // If all the cells has been filled
124 | 
125 |     if (filledCells === 42) {
126 |         lost.play();
127 |         swal({
128 |             title: "Draw",
129 |             text: "Press Ok To Play Again",
130 |             icon: "error",
131 |             buttons: true,
132 |             dangerMode: true,
133 |         })
134 |             .then((willDelete) => {
135 |                 if (willDelete) {
136 |                     resetBoard();
137 |                 }
138 |             });
139 |         return;
140 |     }
141 | 
142 |     // Disable the button is the move is made
143 |     setTimeout(function () {
144 |         button.disabled = true;
145 |     }, 10);
146 | 
147 | }
148 | 
149 | function playerWon(row, col, player) {
150 | 
151 |     var count = 0;
152 | 
153 |     // Check for columns
154 | 
155 |     for (var i = 0; i < 7; i++) {
156 |         if (filledGrid[row][i] === player) {
157 |             count++;
158 |             if (count === 4) return true;
159 |         } else {
160 |             count = 0;
161 |         }
162 | 
163 |     }
164 | 
165 |     count = 0;
166 | 
167 |     // Check for Rows
168 | 
169 |     for (var i = 0; i < 6; i++) {
170 |         if (filledGrid[i][col] === player) {
171 |             count++;
172 |             if (count === 4) return true;
173 |         } else {
174 |             count = 0;
175 |         }
176 |     }
177 | 
178 | 
179 |     count = 0;
180 | 
181 |     // Check for primary diagonal
182 | 
183 |     if (row >= col) {
184 | 
185 |         var i = row - col;
186 |         var j = 0;
187 | 
188 |         for (; i <= 5; i++, j++) {
189 |             if (filledGrid[i][j] === player) {
190 |                 count++;
191 |                 if (count == 4) return true;
192 |             } else {
193 |                 count = 0;
194 |             }
195 |         }
196 |     } else {
197 | 
198 |         var i = 0;
199 |         var j = col - row;
200 | 
201 |         for (; j <= 6; i++, j++) {
202 |             if (filledGrid[i][j] === player) {
203 |                 count++;
204 |                 if (count == 4) return true;
205 |             } else {
206 |                 count = 0;
207 |             }
208 |         }
209 | 
210 |     }
211 | 
212 |     count = 0;
213 | 
214 |     // Check for secondary diagonal
215 | 
216 |     if (row + col <= 5) {
217 | 
218 |         var i = row + col;
219 |         var j = 0;
220 | 
221 |         for (; i >= 0 && j <= row + col; i--, j++) {
222 |             if (filledGrid[i][j] === player) {
223 |                 count++;
224 |                 if (count == 4) return true;
225 |             } else {
226 |                 count = 0;
227 |             }
228 |         }
229 | 
230 |     } else {
231 | 
232 |         var i = 5;
233 |         var j = row + col - 5;
234 | 
235 |         for (; j <= 6; j++, i--) {
236 |             if (filledGrid[i][j] === player) {
237 |                 count++;
238 |                 if (count == 4) return true;
239 |             } else {
240 |                 count = 0;
241 |             }
242 |         }
243 | 
244 |     }
245 |     return false;
246 | 
247 | }
248 | 
249 | // Function to reset the Board completely
250 | function resetBoard() {
251 | 
252 |     // Remove all the disabled buttons and the styles
253 | 
254 |     for (var i = 0; i < buttons.length; i++) {
255 |         buttons[i].disabled = false;
256 |         buttons[i].classList.remove("btn-player-1");
257 |         buttons[i].classList.remove("btn-player-2");
258 |     }
259 | 
260 | 
261 |     // Player Number is changed to 1
262 | 
263 |     playerNumber = 1;
264 |     playerType.textContent = "Player - 1";
265 | 
266 | 
267 |     // Filled Cells is changed to 0
268 | 
269 |     filledCells = 0;
270 | 
271 | 
272 |     // Filling the Board with -1
273 | 
274 |     for (var i = 0; i < 6; i++) {
275 |         for (var j = 0; j < 7; j++) {
276 |             filledGrid[i][j] = -1;
277 |         }
278 |     }
279 | 
280 | }


--------------------------------------------------------------------------------
/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 |     <title>Connect Four</title>
  8 | 
  9 |     <!-- Google Fonts -->
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com">
 11 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
 12 | 
 13 |     <!-- CSS -->
 14 |     <link rel="stylesheet" href="style.css">
 15 | 
 16 | </head>
 17 | 
 18 | <body>
 19 | 
 20 |     <div id="main-container">
 21 |         <div id="player1">
 22 |             <h1 id="player-type1">Connect Four </h1>
 23 |         </div>
 24 |         <div id="player">
 25 | 
 26 |             <h1 id="player-type">Player - 1</h1>
 27 | 
 28 |         </div>
 29 | 
 30 |         <div id="grid">
 31 | 
 32 |             <div class="row">
 33 | 
 34 |                 <div class="col">
 35 | 
 36 |                     <button onclick="clicksound()" class="btn btn-1 grow"></button>
 37 | 
 38 |                 </div>
 39 | 
 40 |                 <div class="col">
 41 | 
 42 |                     <button onclick="clicksound()" class="btn btn-2 grow"></button>
 43 | 
 44 |                 </div>
 45 | 
 46 |                 <div class="col">
 47 | 
 48 |                     <button onclick="clicksound()" class="btn btn-3 grow"></button>
 49 | 
 50 |                 </div>
 51 | 
 52 |                 <div class="col">
 53 | 
 54 |                     <button onclick="clicksound()" class="btn btn-4 grow"></button>
 55 | 
 56 |                 </div>
 57 | 
 58 |                 <div class="col">
 59 | 
 60 |                     <button onclick="clicksound()" class="btn btn-5 grow"></button>
 61 | 
 62 |                 </div>
 63 | 
 64 |                 <div class="col">
 65 | 
 66 |                     <button onclick="clicksound()" class="btn btn-6 grow"></button>
 67 | 
 68 |                 </div>
 69 | 
 70 |                 <div class="col">
 71 | 
 72 |                     <button onclick="clicksound()" class="btn btn-7 grow"></button>
 73 | 
 74 |                 </div>
 75 | 
 76 |             </div>
 77 | 
 78 |             <div class="row">
 79 | 
 80 |                 <div class="col">
 81 | 
 82 |                     <button onclick="clicksound()" class="btn btn-8 grow"></button>
 83 | 
 84 |                 </div>
 85 | 
 86 |                 <div class="col">
 87 | 
 88 |                     <button onclick="clicksound()" class="btn btn-9 grow"></button>
 89 | 
 90 |                 </div>
 91 | 
 92 |                 <div class="col">
 93 | 
 94 |                     <button onclick="clicksound()" class="btn btn-10 grow"></button>
 95 | 
 96 |                 </div>
 97 | 
 98 |                 <div class="col">
 99 | 
100 |                     <button onclick="clicksound()" class="btn btn-11 grow"></button>
101 | 
102 |                 </div>
103 | 
104 |                 <div class="col">
105 | 
106 |                     <button onclick="clicksound()" class="btn btn-12 grow"></button>
107 | 
108 |                 </div>
109 | 
110 |                 <div class="col">
111 | 
112 |                     <button onclick="clicksound()" class="btn btn-13 grow"></button>
113 | 
114 |                 </div>
115 | 
116 |                 <div class="col">
117 | 
118 |                     <button onclick="clicksound()" class="btn btn-14 grow"></button>
119 | 
120 |                 </div>
121 | 
122 |             </div>
123 | 
124 |             <div class="row">
125 | 
126 |                 <div class="col">
127 | 
128 |                     <button onclick="clicksound()" class="btn btn-15 grow"></button>
129 | 
130 |                 </div>
131 | 
132 |                 <div class="col">
133 | 
134 |                     <button onclick="clicksound()" class="btn btn-16 grow"></button>
135 | 
136 |                 </div>
137 | 
138 |                 <div class="col">
139 | 
140 |                     <button onclick="clicksound()" class="btn btn-17 grow"></button>
141 | 
142 |                 </div>
143 | 
144 |                 <div class="col">
145 | 
146 |                     <button onclick="clicksound()" class="btn btn-18 grow"></button>
147 | 
148 |                 </div>
149 | 
150 |                 <div class="col">
151 | 
152 |                     <button onclick="clicksound()" class="btn btn-19 grow"></button>
153 | 
154 |                 </div>
155 | 
156 |                 <div class="col">
157 | 
158 |                     <button onclick="clicksound()" class="btn btn-20 grow"></button>
159 | 
160 |                 </div>
161 | 
162 |                 <div class="col">
163 | 
164 |                     <button onclick="clicksound()" class="btn btn-21 grow"></button>
165 | 
166 |                 </div>
167 | 
168 |             </div>
169 | 
170 |             <div class="row">
171 | 
172 |                 <div class="col">
173 | 
174 |                     <button onclick="clicksound()" class="btn btn-22 grow"></button>
175 | 
176 |                 </div>
177 | 
178 |                 <div class="col">
179 | 
180 |                     <button onclick="clicksound()" class="btn btn-23 grow"></button>
181 | 
182 |                 </div>
183 | 
184 |                 <div class="col">
185 | 
186 |                     <button onclick="clicksound()" class="btn btn-24 grow"></button>
187 | 
188 |                 </div>
189 | 
190 |                 <div class="col">
191 | 
192 |                     <button onclick="clicksound()" class="btn btn-25 grow"></button>
193 | 
194 |                 </div>
195 | 
196 |                 <div class="col">
197 | 
198 |                     <button onclick="clicksound()" class="btn btn-26 grow"></button>
199 | 
200 |                 </div>
201 | 
202 |                 <div class="col">
203 | 
204 |                     <button onclick="clicksound()" class="btn btn-27 grow"></button>
205 | 
206 |                 </div>
207 | 
208 |                 <div class="col">
209 | 
210 |                     <button onclick="clicksound()" class="btn btn-28 grow"></button>
211 | 
212 |                 </div>
213 | 
214 |             </div>
215 | 
216 |             <div class="row">
217 | 
218 |                 <div class="col">
219 | 
220 |                     <button onclick="clicksound()" class="btn btn-29 grow"></button>
221 | 
222 |                 </div>
223 | 
224 |                 <div class="col">
225 | 
226 |                     <button onclick="clicksound()" class="btn btn-30 grow"></button>
227 | 
228 |                 </div>
229 | 
230 |                 <div class="col">
231 | 
232 |                     <button onclick="clicksound()" class="btn btn-31 grow"></button>
233 | 
234 |                 </div>
235 | 
236 |                 <div class="col">
237 | 
238 |                     <button onclick="clicksound()" class="btn btn-32 grow"></button>
239 | 
240 |                 </div>
241 | 
242 |                 <div class="col">
243 | 
244 |                     <button onclick="clicksound()" class="btn btn-33 grow"></button>
245 | 
246 |                 </div>
247 | 
248 |                 <div class="col">
249 | 
250 |                     <button onclick="clicksound()" class="btn btn-34 grow"></button>
251 | 
252 |                 </div>
253 | 
254 |                 <div class="col">
255 | 
256 |                     <button onclick="clicksound()" class="btn btn-35 grow"></button>
257 | 
258 |                 </div>
259 | 
260 |             </div>
261 | 
262 |             <div class="row">
263 | 
264 |                 <div class="col">
265 | 
266 |                     <button onclick="clicksound()" class="btn btn-36 grow"></button>
267 | 
268 |                 </div>
269 | 
270 |                 <div class="col">
271 | 
272 |                     <button onclick="clicksound()" class="btn btn-37 grow"></button>
273 | 
274 |                 </div>
275 | 
276 |                 <div class="col">
277 | 
278 |                     <button onclick="clicksound()" class="btn btn-38 grow"></button>
279 | 
280 |                 </div>
281 | 
282 |                 <div class="col">
283 | 
284 |                     <button onclick="clicksound()" class="btn btn-39 grow"></button>
285 | 
286 |                 </div>
287 | 
288 |                 <div class="col">
289 | 
290 |                     <button onclick="clicksound()" class="btn btn-40 grow"></button>
291 | 
292 |                 </div>
293 | 
294 |                 <div class="col">
295 | 
296 |                     <button onclick="clicksound()" class="btn btn-41 grow"></button>
297 | 
298 |                 </div>
299 | 
300 |                 <div class="col">
301 | 
302 |                     <button onclick="clicksound()" class="btn btn-42 grow"></button>
303 | 
304 |                 </div>
305 | 
306 |             </div>
307 | 
308 |         </div>
309 | 
310 |         <button type="button" class="grow" id="reset-btn">Play Again</button>
311 | 
312 |     </div>
313 |     <audio id="click">
314 |         <source src="https://zerooctave.co/ZeroOctave-Javascript-Projects/assets/Audio/connectfour/click.mp3" type="audio/ogg">
315 |     </audio>
316 |     <audio id="win">
317 |         <source src="https://zerooctave.co/ZeroOctave-Javascript-Projects/assets/Audio/connectfour/win.wav" type="audio/ogg">
318 |     </audio>
319 |     <audio id="lost">
320 |         <source src="https://zerooctave.co/ZeroOctave-Javascript-Projects/assets/Audio/connectfour/lost.wav" type="audio/ogg">
321 |     </audio>
322 |     <script src="script.js"></script>
323 |     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
324 | </body>
325 | 
326 | </html>


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