-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (85 loc) · 3.53 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://kit.fontawesome.com/a12bd5cdcb.js" crossorigin="anonymous"></script>
<audio id="theme" src="assets/audio/theme.mp3"></audio>
<audio id="win" src="assets/audio/win.mp3"></audio>
<audio id="lose" src="assets/audio/lose.mp3"></audio>
<audio id="draw" src="assets/audio/draw.mp3"></audio>
</head>
<body>
<main>
<!-- top bar -->
<div class="div1">
<!-- game title -->
<div>Rock Paper Scissor</div>
<!-- modal button -->
<div class="how-to-play">
<span id="modal-button" title="click to know game rules">
How to play?
</span>
</div>
</div>
<!-- modal box -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close">×</span>
<p style="color: black;">Rock beats scissors <br> <br>
scissors beats paper and <br> <br> paper beats rock</p>
</div>
</div>
<!-- computer player -->
<div class="div2">
<img class="participant robot" src="assets/img/robot.png" alt="computer">
<span class="caption">Comp</span>
</div>
<!-- computer choice -->
<div class="div3">
<h3><span id="computer-choice"></span></h3>
</div>
<div class="div4">
<h3> <span id="result"></span></h3>
</div>
<!-- user choice -->
<div class="div5">
<div class="button-container">
<button id="rock-button"><img id="rock" class="choice" src="assets/img/rock.jpg" alt="rock"></button>
<button id="paper-button"><img id="paper" class="choice" src="assets/img/paper.jpg"
alt="paper"></button>
<button id="scissors-button"><img id="scissors" class="choice" src="assets/img/scissors.jpg"
alt="scissors"></button>
</div>
</div>
<!-- user player -->
<div class="div6">
<img class="participant" src="assets/img/people.png" alt="user">
<span class="caption">user</span>
<h3> <span id="user-choice"></span></h3>
</div>
</main>
<!-- start screen -->
<div class="play-container" id="play-container">
<!-- rock paper scissors icons -->
<div class="icons-container">
<div class="rock-icon"><i id="rock-icon" class="fa-solid fa-hand-fist"></i></div>
<div class="paper-icon"><i id="paper-icon" class="fa-solid fa-hand"></i></div>
<div class="scissors-icon"><i id="scissors-icon" class="fa-solid fa-hand-scissors"></i></div>
</div>
<!-- rock paper scissors text -->
<div class="game-title">Rock Paper Scissor</div>
<!-- play button -->
<div class="play-button-container"> <img id="start-button" class="start-button" src="assets/img/play.png"
alt="play-button"> </div>
<!-- play text -->
<span class="play-text">play</span>
</div>
<!-- js file -->
<script type="module" src="assets/js/app.js" charset="utf-8"></script>
</body>
</html>