Skip to content

Commit 44f3409

Browse files
spacerockzerospacerockzero
committed
added keybindings for next/previous
1 parent 3ce2113 commit 44f3409

File tree

8 files changed

+75
-43
lines changed

8 files changed

+75
-43
lines changed

‎public/dist/css/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/bundle.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/bundle.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
<title>Practice JavaScript</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<!--<link rel="stylesheet" href="./dist/css/min.min.css">-->
8-
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/min/1.5/min.min.css">-->
97
<link href="./dist/css/style.css" rel="stylesheet">
108
</head>
119
<body>

‎src/css/lib/vars.scss‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
$persian-indigo: #2A0965;
2-
$medium-purple: #8D6BE8;
3-
$blue-gem: #492A9F;
4-
$light-blue-gem: lighten($blue-gem, 20%);
5-
$pinkish: #EB86BF;
6-
$amethyst: #A456D1;
7-
$light-amethyst: lighten($amethyst, 10%);
8-
$light-purple: lighten($medium-purple, 20%);
9-
$deep-lilac: #9D53B5;
1+
// $persian-indigo: #2A0965;
2+
// $medium-purple: #8D6BE8;
3+
// $blue-gem: #492A9F;
4+
// $light-blue-gem: lighten($blue-gem, 20%);
5+
// $pinkish: #EB86BF;
6+
// $amethyst: #A456D1;
7+
// $light-amethyst: lighten($amethyst, 10%);
8+
// $light-purple: lighten($medium-purple, 20%);
9+
// $deep-lilac: #9D53B5;
1010

1111
/* Palette generated by Material Palette - materialpalette.com/deep-purple/pink */
12-
$primary-color-dark: #512DA8;
13-
$primary-color: #673AB7;
14-
$primary-color-light: #D1C4E9;
15-
$primary-color-text: #FFFFFF;
16-
$accent-color: #FF4081;
17-
$primary-text-color: #212121;
18-
$secondary-text-color: #757575;
19-
$divider-color: #BDBDBD;
12+
// $primary-color-dark: #512DA8;
13+
// $primary-color: #673AB7;
14+
// $primary-color-light: #D1C4E9;
15+
// $primary-color-text: #FFFFFF;
16+
// $accent-color: #FF4081;
17+
// $primary-text-color: #212121;
18+
// $secondary-text-color: #757575;
19+
// $divider-color: #BDBDBD;
2020

2121
// $primary-color-dark: #303F9F;
2222
// $primary-color: #3F51B5;

‎src/css/style.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@
2323
display: flex;
2424
align-items: center;
2525
justify-content: center;
26+
text-shadow: 0 0 10px rgba(255,255,255,1),
27+
// 0 0 20px rgba(255,255,255,1),
28+
// 0 0 30px rgba(255,255,255,1),
29+
0 0 40px $primary-color;
30+
// 0 0 70px $primary-color;
31+
// 0 0 80px $primary-color,
32+
// 0 0 100px $primary-color;
2633
}
2734
.site-heading h1 {
2835
font-size: 200%;
@@ -49,7 +56,7 @@
4956
.controls > div > :active,
5057
.controls > div > .active {
5158
background-color: $primary-color;
52-
transition: all 200ms ease-in-out;
59+
transition: color 100ms ease-in-out;
5360
}
5461
.problem-group {
5562
display: block;

‎src/js/index.js‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
(function (document, window) {
22
// DEPENDENCIES
33
// ============================================================
4-
54
const localforage = require('localforage');
65

76
// PROBLEMS
87
// ============================================================
9-
108
const problems = require('../problems/arrays.js');
119

1210
// CONFIG
1311
// ============================================================
1412

1513
// Hoist current problem
1614
let currentProblem;
15+
1716
// Keys to ignore while user is navigating around the textarea but not changing any code
1817
const ignoreKeyCodes = [
1918
9, // Tab
@@ -131,6 +130,8 @@
131130

132131
function previousProblem() {
133132
console.log('previousProblem!');
133+
// Activate back button, for visual queue of nav feedback
134+
previousProblemButtonEl.classList.add('active');
134135
config.currentIndex = config.shuffle
135136
? getRandomIndex(problems)
136137
: getPreviousIndex(problems);
@@ -141,6 +142,8 @@
141142

142143
function nextProblem() {
143144
console.log('nextProblem!');
145+
// Activate next button, for visual queue of nav feedback
146+
nextProblemButtonEl.classList.add('active');
144147
config.currentIndex = config.shuffle
145148
? getRandomIndex(problems)
146149
: getNextIndex(problems);
@@ -312,16 +315,40 @@
312315
previousProblemButtonEl.parentNode.classList.add('hidden');
313316
}
314317

318+
// Keybinding stuff
319+
// ============================================================
320+
321+
// Debounced code validation
315322
const debouncedInputValidation = debounce(e => {
323+
console.log('e', e);
316324
// If not arrow keys or other non-character keys
317325
if (ignoreKeyCodes.indexOf(e.keyCode) === -1) {
318326
// Run test suite
319327
testSuite();
320328
}
321329
}, 200);
322330

331+
function problemNav(e) {
332+
// Go to previous problem keybinding
333+
// If CMD/CTRL + SHIFT + RETURN/ENTER
334+
if (config.shuffle === false && e.keyCode === 13 && e.shiftKey && e.metaKey) {
335+
// Go to next problem
336+
previousProblem();
337+
} else if (e.keyCode === 13 && !e.shiftKey && e.metaKey) {
338+
// Go to next problem keybinding
339+
// If CMD/CTRL + RETURN/ENTER
340+
// Go to next problem
341+
nextProblem();
342+
}
343+
}
344+
345+
346+
// Event Bindings
347+
// ============================================================
348+
323349
// Bind it up
324-
codeEl.addEventListener('keyup', debouncedInputValidation);
350+
codeEl.addEventListener('keydown', debouncedInputValidation);
351+
document.addEventListener('keydown', problemNav);
325352
shuffleProblemsButtonEl.addEventListener('click', toggleShuffle);
326353
previousProblemButtonEl.addEventListener('click', previousProblem);
327354
nextProblemButtonEl.addEventListener('click', nextProblem);

‎src/problems/arrays.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -472,7 +472,7 @@ module.exports = [
472472
{
473473
name: 'Array.filter()',
474474
time: 10,
475-
prompt: `Return an array of the numbers greater than 5 in 'fruits' using 'Array.filter()'`,
475+
prompt: `Return an array of the numbers greater than 5 in 'numbers' using 'Array.filter()'`,
476476
given: `const numbers = [1, 1, 2, 3, 5, 8, 13, 21];\r`,
477477
answer: `const numbers = [1, 1, 2, 3, 5, 8, 13, 21];
478478
const overFive = numbers.filter(num => num > 5);
@@ -507,16 +507,16 @@ module.exports = [
507507
{
508508
name: 'Array.map()',
509509
time: 10,
510-
prompt: `Return an array of 'numbers' array's square roots.`,
511-
given: `const numbers = [4, 9, 16];\r`,
512-
answer: `const numbers = [4, 9, 16];
513-
const roots = numbers.map(Math.sqrt);
510+
prompt: `Return an array of 'numbers' array's square roots, using 'Array.map()' and 'Math.sqrt()'`,
511+
given: `const numbers = [25, 121, 169];\r`,
512+
answer: `const numbers = [25, 121, 169];
513+
const roots = numbers.map(num => Math.sqrt(num));
514514
return roots;`,
515515
tests: [
516516
{
517517
name: 'Correct output',
518518
test(output) {
519-
return assert.deepEqual(output, [2, 3, 4]) === undefined;
519+
return assert.deepEqual(output, [5, 11, 13]) === undefined;
520520
}
521521
},
522522
{
@@ -532,15 +532,15 @@ module.exports = [
532532
}
533533
},
534534
{
535-
name: `First item is 2`,
535+
name: `First item is 5`,
536536
test(output) {
537-
return assert.deepEqual(output[0], 2) === undefined;
537+
return assert.deepEqual(output[0], 5) === undefined;
538538
}
539539
},
540540
{
541-
name: `Last item is 4`,
541+
name: `Last item is 13`,
542542
test(output) {
543-
return assert.deepEqual(output[output.length - 1], 4) === undefined;
543+
return assert.deepEqual(output[output.length - 1], 13) === undefined;
544544
}
545545
}
546546
]
@@ -553,11 +553,11 @@ module.exports = [
553553
const evenNumbers = [2, 4, 6, 8];
554554
const someOddNumbers = [2, 5, 6, 8];
555555
function isEven(element) {
556-
556+
557557
}
558558
return {
559559
evenNumbers: evenNumbers.,
560-
someOddNumbers: someOddNumbers.
560+
someOddNumbers: someOddNumbers.
561561
};`,
562562
answer: `
563563
const evenNumbers = [2, 4, 6, 8];
@@ -567,7 +567,7 @@ function isEven(element) {
567567
}
568568
return {
569569
evenNumbers: evenNumbers.every(isEven),
570-
someOddNumbers: someOddNumbers.every(isEven)
570+
someOddNumbers: someOddNumbers.every(isEven)
571571
};`,
572572
tests: [
573573
{
@@ -613,11 +613,11 @@ return {
613613
const evenNumbers = [2, 4, 6, 8];
614614
const someOddNumbers = [2, 4, 7, 8];
615615
function isOdd(element) {
616-
616+
617617
}
618618
return {
619619
evenNumbers: evenNumbers.,
620-
someOddNumbers: someOddNumbers.
620+
someOddNumbers: someOddNumbers.
621621
};`,
622622
answer: `
623623
const evenNumbers = [1, 3, 5, 7];
@@ -627,7 +627,7 @@ function isOdd(element) {
627627
}
628628
return {
629629
evenNumbers: evenNumbers.some(isOdd),
630-
someOddNumbers: someOddNumbers.some(isOdd)
630+
someOddNumbers: someOddNumbers.some(isOdd)
631631
};`,
632632
tests: [
633633
{

0 commit comments

Comments
 (0)