diff --git a/3-terrarium/solution/index.html b/3-terrarium/solution/index.html
index 1c44732b..c4f6f9da 100644
--- a/3-terrarium/solution/index.html
+++ b/3-terrarium/solution/index.html
@@ -17,48 +17,48 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/3-terrarium/solution/script.js b/3-terrarium/solution/script.js
index cc3950b0..316ddcde 100644
--- a/3-terrarium/solution/script.js
+++ b/3-terrarium/solution/script.js
@@ -27,6 +27,7 @@ function dragElement(terrariumElement) {
pos3 = 0,
pos4 = 0;
terrariumElement.onpointerdown = pointerDrag;
+ terrariumElement.onkeydown = keyboardMove;
function pointerDrag(e) {
e.preventDefault();
@@ -61,4 +62,64 @@ function dragElement(terrariumElement) {
document.onpointerup = null;
document.onpointermove = null;
}
+
+ // keyboard "dragging" functionality
+ // arrow keys move a plant by a small increment
+ // home/end/page up/page down move a plant by a larger increment
+ function keyboardMove(e) {
+ // set movement amounts
+ const smallIncrement = 5;
+ const largeIncrement = 200;
+
+ let diffX = 0;
+ let diffY = 0;
+
+ const { key } = e;
+ let moved = false;
+
+ switch (key) {
+ case 'ArrowLeft':
+ diffX = -1 * smallIncrement;
+ moved = true;
+ break;
+ case 'ArrowRight':
+ diffX = smallIncrement;
+ moved = true;
+ break;
+ case 'ArrowUp':
+ diffY = -1 * smallIncrement;
+ moved = true;
+ break;
+ case 'ArrowDown':
+ diffY = smallIncrement;
+ moved = true;
+ break;
+ case 'Home':
+ diffX = -1 * largeIncrement;
+ moved = true;
+ break;
+ case 'End':
+ diffX = largeIncrement;
+ moved = true;
+ break;
+ case 'PageUp':
+ diffY = -1 * largeIncrement;
+ moved = true;
+ break;
+ case 'PageDown':
+ diffY = largeIncrement;
+ moved = true;
+ break;
+ }
+
+ if (moved) {
+ e.preventDefault();
+ terrariumElement.style.top = terrariumElement.offsetTop + diffY + 'px';
+ terrariumElement.style.left = terrariumElement.offsetLeft + diffX + 'px';
+ }
+ }
}
+
+// Can you think of ways to improve accessibility?
+// For example, how would someone using a screen reader know to use arrow keys?
+// Or how would you let someone with less dexterity place plants without dragging?
\ No newline at end of file
diff --git a/3-terrarium/solution/style.css b/3-terrarium/solution/style.css
index 9c627e83..39662e28 100644
--- a/3-terrarium/solution/style.css
+++ b/3-terrarium/solution/style.css
@@ -34,9 +34,18 @@ h1 {
position: absolute;
max-width: 150%;
max-height: 150%;
+ border-radius: 50%;
z-index: 2;
}
+.plant:focus-visible {
+ /* A transparent outline shows up in Windows High Contrast mode */
+ outline: 4px solid transparent;
+ /* A box shadow makes a pretty focus style, but is invisible in high contrast mode */
+ box-shadow: 0 0 6px 2px #516c16;
+ z-index: 3;
+}
+
/*https://codepen.io/Rotarepmi/pen/rjpNZY*/
.jar-walls {