codeup-web-exercises/konami.html at main · Austin-Whitley/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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
    <title>Konami Code</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<style>
    .hide{
        display: none;
    }
    li{
        color: red;
        display: inline;
    }
    img{
        border: 1px solid black;
        border-radius: 5px;
    }
    body{
        background: rgb(131,58,180);
        background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    }
    .stat-bar{
        position: absolute;
        bottom: 10px;
    }
    .health-bar, .mana-bar{
        width: 100px;
        height: 15px;
        border: 1px solid white;
        display: inline-block;
    }
    .health-bar{
        background-color: red;
    }
    .mana-bar{
        background-color: lightskyblue;
    }
    p{
        color: white;
    }

</style>
<body>
<h1>Konami Code</h1>

<div class="container d-flex justify-content-center">
    <img src="img/gokuKaioKen.gif" alt="Super spicy gif">
</div>
<div class="d-flex justify-content-center">
    <audio controls autoplay class="hide">
        <source src="audio/ultra-instinct-theme-sound-effect-ClME2p0alk.mp3" type="audio/mpeg">
    </audio>
</div>

//using this table as an example of the .on() method in jQuery
<table id="dataTable">
    <th>Item</th>
    <th>Sale price</th>
    <th>Profit</th>
    <tr>
        <td>1</td>
        <td>$100</td>
        <td>$65</td>
    </tr>
    <tr>
        <td>2</td>
        <td>$200</td>
        <td>$90</td>
    </tr>
    <tr>
        <td>3</td>
        <td>$500</td>
        <td>$300</td>
    </tr>
</table>
//=============================================================

<div class="stat-bar row">
    <div class="col-6">
        <p>HP</p>
        <div class="health-bar"></div>
    </div>
    <div class="col-6">
        <p>Mana</p>
        <div class="mana-bar"></div>
    </div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    "use strict";

    var tracker = 0;
    var konami = ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a"];

    var orderHandle = function(event){
        if(konami.indexOf(event.key) < 0 || event.key !== konami[tracker]){
            tracker = 0;
            return;
        }
        tracker++;
        //if complete reset and give lives
        if(konami.length === tracker){
            tracker = 0;
            $("body").css("background", "rgb(2,0,36);");
            $("body").css("background", "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%)");
            $(".hide").css("display", "inline");
            $("img").attr("src", "img/gokuUltraInstinct2.gif")
            $("h1").css("color", "white")
            $(".health-bar").animate({width: '+=300px'},2000);
            $(".mana-bar").animate({width: '+=300px'},2000);
        }
    };

    $(document).keyup(orderHandle);

    //example of the .on() function using jQuery
    $("#dataTable tbody tr").on("click", function(){
       console.log($(this).text());
    });


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