min-keyboard-tester/index.js at main · fathulfahmy/min-keyboard-tester · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
const catYellow = "#f9e2af";
const catBlue = "#1e66f5";
// KEYCAP COLORS
function allBlackKeycap() {
  $(".keycap-style").css("background-color", "black");
  $(".keycap-style").css("color", "white");
}
function allWhiteKeycap() {
  $(".keycap-style").css("background-color", "white");
  $(".keycap-style").css("color", "black");
}
function singleYellowKeycap(e) {
  $("#" + e.code).css("background-color", catYellow);
  $("#" + e.code).css("color", "black");
}
function singleBlueKeycap(e) {
  $("#" + e.code).css("background-color", catBlue);
  $("#" + e.code).css("color", "white");
}

// TIMEOUT BUTTON
let timeout = true;
$("#timeout").click(function (e) {
  $(this).toggleClass("disabled-button");
  if (timeout) {
    $(this).html("Timeout OFF");
  } else {
    $(this).html("Timeout ON");
  }
  if (darkMode) {
    allWhiteKeycap();
  } else {
    allBlackKeycap();
  }
  timeout = !timeout;
});

// SOUND BUTTON
let sound = true;
$("#sound").click(function (e) {
  $(this).toggleClass("disabled-button");
  if (sound) {
    $(this).html("Sound OFF");
  } else {
    $(this).html("Sound ON");
  }
  sound = !sound;
});

// DARK MODE BUTTON
let darkMode = true;
$("#dark-mode").click(function (e) {
  $(this).toggleClass("disabled-button");
  $("body").toggleClass("light");
  if (darkMode) {
    $(this).html("Dark Mode OFF");
    allBlackKeycap();
  } else {
    $(this).html("Dark Mode ON");
    allWhiteKeycap();
  }
  darkMode = !darkMode;
});

// KEYCAP PRESSED
$(document).keydown(function (e) {
  e.preventDefault();
  if (darkMode) {
    singleYellowKeycap(e);
  } else {
    singleBlueKeycap(e);
  }
  if (sound) {
    $("audio#coinsfx")[0].play();
  }
  console.log("Key: " + e.code + " Code: " + e.keyCode);
});

// KEYCAP NOT PRESSED
$(document).keyup(function (e) {
  if (timeout) {
    if (darkMode) {
      allWhiteKeycap();
    } else {
      allBlackKeycap();
    }
  }
  if(sound){
    $("audio#coinsfx")[0].pause();
    $("audio#coinsfx")[0].currentTime = 0;
  }
});