From ddfaa43ae334d0c2144278a78712ce4061ab030c Mon Sep 17 00:00:00 2001
From: Ivan Sosnin <vansosnin@gmail.com>
Date: Sat, 27 Oct 2018 19:43:33 +0500
Subject: [PATCH 1/2] Make css-grid example more semantic

---
 css-grid/index.html       | 36 +++++++++++++++++++++++++++---------
 css-grid/scripts/grid.js  |  2 +-
 css-grid/styles/style.css |  1 +
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/css-grid/index.html b/css-grid/index.html
index 4cac0f43..b51d9654 100644
--- a/css-grid/index.html
+++ b/css-grid/index.html
@@ -14,15 +14,33 @@ <h1 class="puzzle-title">CSS Grid Paradise Puzzle</h1>
 				<a href="#playing-the-game" class="button button--primary">How to play</a>
 			</header>
 			<div class="puzzle-game">
-				<img tabindex=0 id="piece-1" src="./images/grid_1.png" class="puzzle-game-image" aria-label="The">
-				<img tabindex=0 id="piece-2" src="./images/grid_2.png" class="puzzle-game-image" aria-label="only">
-				<img tabindex=0 id="piece-3" src="./images/grid_3.png" class="puzzle-game-image" aria-label="disability">
-				<img tabindex=0 id="piece-4" src="./images/grid_4.png" class="puzzle-game-image" aria-label="in">
-				<img tabindex=0 id="piece-5" src="./images/grid_5.png" class="puzzle-game-image" aria-label="life">
-				<img tabindex=0 id="piece-6" src="./images/grid_6.png" class="puzzle-game-image" aria-label="is">
-				<img tabindex=0 id="piece-7" src="./images/grid_7.png" class="puzzle-game-image" aria-label="a">
-				<img tabindex=0 id="piece-8" src="./images/grid_8.png" class="puzzle-game-image" aria-label="bad">
-				<img tabindex=0 id="piece-9" src="./images/grid_9.png" class="puzzle-game-image" aria-label="attitude">
+				<button id="piece-1" class="puzzle-game-image" type="button">
+					<img src="./images/grid_1.png" aria-label="The">
+				</button>
+				<button id="piece-2" class="puzzle-game-image" type="button">
+					<img src="./images/grid_2.png" aria-label="only">
+				</button>
+				<button id="piece-3" class="puzzle-game-image" type="button">
+					<img src="./images/grid_3.png" aria-label="disability">
+				</button>
+				<button id="piece-4" class="puzzle-game-image" type="button">
+					<img src="./images/grid_4.png" aria-label="in">
+				</button>
+				<button id="piece-5" class="puzzle-game-image" type="button">
+					<img src="./images/grid_5.png" aria-label="life">
+				</button>
+				<button id="piece-6" class="puzzle-game-image" type="button">
+					<img src="./images/grid_6.png" aria-label="is">
+				</button>
+				<button id="piece-7" class="puzzle-game-image" type="button">
+					<img src="./images/grid_7.png" aria-label="a">
+				</button>
+				<button id="piece-8" class="puzzle-game-image" type="button">
+					<img src="./images/grid_8.png" aria-label="bad">
+				</button>
+				<button id="piece-9" class="puzzle-game-image" type="button">
+					<img src="./images/grid_9.png" aria-label="attitude">
+				</button>
 			</div>
 			<aside class="puzzle-score">
 				Clicks: <span id="clicks">0</span>
diff --git a/css-grid/scripts/grid.js b/css-grid/scripts/grid.js
index 21008833..c733a8dd 100644
--- a/css-grid/scripts/grid.js
+++ b/css-grid/scripts/grid.js
@@ -1,7 +1,7 @@
 (function () {
 	'use strict';
 
-	const pieces = [...document.querySelectorAll('.puzzle-game > img')];
+	const pieces = [...document.querySelectorAll('.puzzle-game > button')];
 	const clickScore = document.getElementById('clicks');
 	const soundButton = document.getElementById('toggle-audio');
 	const congratulations = document.getElementsByClassName('congratulations')[0];
diff --git a/css-grid/styles/style.css b/css-grid/styles/style.css
index ac46b40b..529b389f 100644
--- a/css-grid/styles/style.css
+++ b/css-grid/styles/style.css
@@ -38,6 +38,7 @@ body {
 	margin: 0;
 	outline: 1px solid #000;
 	outline-offset: -1px;
+	padding: 0;
 }
 
 .hidden-piece {

From ad4d35b98c3df4aa30bba19508de1bf45026096e Mon Sep 17 00:00:00 2001
From: Ivan Sosnin <vansosnin@gmail.com>
Date: Wed, 2 Jan 2019 16:05:21 +0500
Subject: [PATCH 2/2] Fix audio only mode

---
 css-grid/index.html | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/css-grid/index.html b/css-grid/index.html
index b51d9654..237049f4 100644
--- a/css-grid/index.html
+++ b/css-grid/index.html
@@ -14,32 +14,32 @@ <h1 class="puzzle-title">CSS Grid Paradise Puzzle</h1>
 				<a href="#playing-the-game" class="button button--primary">How to play</a>
 			</header>
 			<div class="puzzle-game">
-				<button id="piece-1" class="puzzle-game-image" type="button">
-					<img src="./images/grid_1.png" aria-label="The">
+				<button id="piece-1" class="puzzle-game-image" aria-label="The" type="button">
+					<img src="./images/grid_1.png">
 				</button>
-				<button id="piece-2" class="puzzle-game-image" type="button">
-					<img src="./images/grid_2.png" aria-label="only">
+				<button id="piece-2" class="puzzle-game-image" aria-label="only" type="button">
+					<img src="./images/grid_2.png">
 				</button>
-				<button id="piece-3" class="puzzle-game-image" type="button">
-					<img src="./images/grid_3.png" aria-label="disability">
+				<button id="piece-3" class="puzzle-game-image" aria-label="disability" type="button">
+					<img src="./images/grid_3.png">
 				</button>
-				<button id="piece-4" class="puzzle-game-image" type="button">
-					<img src="./images/grid_4.png" aria-label="in">
+				<button id="piece-4" class="puzzle-game-image" aria-label="in" type="button">
+					<img src="./images/grid_4.png">
 				</button>
-				<button id="piece-5" class="puzzle-game-image" type="button">
-					<img src="./images/grid_5.png" aria-label="life">
+				<button id="piece-5" class="puzzle-game-image" aria-label="life" type="button">
+					<img src="./images/grid_5.png">
 				</button>
-				<button id="piece-6" class="puzzle-game-image" type="button">
-					<img src="./images/grid_6.png" aria-label="is">
+				<button id="piece-6" class="puzzle-game-image" aria-label="is" type="button">
+					<img src="./images/grid_6.png">
 				</button>
-				<button id="piece-7" class="puzzle-game-image" type="button">
-					<img src="./images/grid_7.png" aria-label="a">
+				<button id="piece-7" class="puzzle-game-image" aria-label="a" type="button">
+					<img src="./images/grid_7.png">
 				</button>
-				<button id="piece-8" class="puzzle-game-image" type="button">
-					<img src="./images/grid_8.png" aria-label="bad">
+				<button id="piece-8" class="puzzle-game-image" aria-label="bad" type="button">
+					<img src="./images/grid_8.png">
 				</button>
-				<button id="piece-9" class="puzzle-game-image" type="button">
-					<img src="./images/grid_9.png" aria-label="attitude">
+				<button id="piece-9" class="puzzle-game-image" aria-label="attitude" type="button">
+					<img src="./images/grid_9.png">
 				</button>
 			</div>
 			<aside class="puzzle-score">