codeup-web-exercises/konami.html at main · luisOrell/codeup-web-exercises · 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
<!DOCTYPE html>
<html>
<head>
    <title>Konami Code</title>
    <style>

        .toggle-color {
            background-color: darkred;
        }
    </style>
</head>

<body>
<div class="main-body">
<h1>Konami Code</h1>

<p class="msg">Hello World</p>

<form>
    <label for="textField">Type something:</label><br>
    <input type="text" id="textField" name="textField" placeholder="Type Here">
</form>


<script>
    "use strict";

    //The Konami Code: Up, Up, Down, Down, Left, Right, Left, Right, B, A ( ↑ ↑ ↓ ↓ ← → ← → B A )
    const secretCode = [
        "ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a", "Enter"
    ];

    let secretKeyEntered = 0;

    document.addEventListener("keyup", event => {
        const key = event.key;
        console.log(`key pressed: ${event.key}`);
        if (key === secretCode[secretKeyEntered]) {
            secretKeyEntered++;

            if (secretKeyEntered === secretCode.length) {
                // alert("You have added 30 lives!");

                document.querySelector(".main-body").setAttribute("style", "background: black")
                document.querySelector("h1").setAttribute("style", "color: red")

                setInterval(function () {
                    document.querySelector(".msg").classList.toggle(".toggle-color")
                }, 1000);

                secretKeyEntered = 0;
            }
        } else {
            secretKeyEntered = 0;
        }
    });

</script>
</div>
</body>
</html>