-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (90 loc) · 4.38 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
99
100
101
102
103
<!-- This is a "http/https" protocli Internet ("Web") Page Document-->
<!DOCTYPE html>
<!-- Language of this webpage document is "American (USA) English" -->
<html lang="en-US">
<!-- Metadata for this site -->
<head>
<!-- Universal Character Encoding -->
<meta charset="UTF-8">
<!-- Webpage's Title -->
<title>Odin's Rock, Paper, Scissors | wolfdaemon</title>
<!-- Scripts (loads ASAP)
(cite: https://stackoverflow.com/questions/436411/where-shoold-i-put-script-tags-in-html-markup)-->
<script src="script.js" defer></script>
<!-- Webpage's Authorship -->
<meta name="author" content="Michael "Cal" Krug">
<!-- Webpage's Description: Used in search engine resolt pages -->
<meta name="description" content="A Rock, Paper, Scissors game implmented as dictated by the Odin Project.">
<!-- Webpage's Favicon: The icon for this website -->
<link rel="icon" href="../favicon.ico" type="image/x-icon">
<!-- Responsive Website Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Webpage's styling; i.e. the Cascading Style Sheet (CSS3) of this page -->
<link rel="stylesheet" href="index.css">
<!-- ************************** -->
</head>
<!-- Contents of the webpage
(cite.: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)
Usually contains five basic sections:
1. Header (<header>)
2. Navigation Bar (<nav>)
3. Main Content (<main>)
4. Sidebar (<aside>)
5. Footer (<footer>)
The Sections are marked by comments explaining their use below.
-->
<body>
<!-- Document Section: Header
(The strip: big heading, logo, tagline, usually the same between pages)
-->
<header>
<h1>Odin's Rock, Paper, Scissors (wolfdaemon)</h1>
</header>
<!-- Document Section: Main Content
(Main content that's unique to this webpage)
-->
<main>
<!-- Webpage contains an article.
<article> encloses a block of related content that makes sense on its own without the rest of the page
(e.g., a single blog post).
Another element I haven't used but coold be here is:
<section> is similar to <article>, but it is more for grouping together a single part of the page that
constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and
summaries), or a theme.
It's considered best practice to begin each section with a heading; also note that you can break
<article>s up into different <section>s, or <section>s up into different <article>s,
depending on the context.
But I'll find a use for section when appropriate.
-->
<article>
<h2>Instructions</h2>
<p>Welcome to <strong>Odin's Rock, Paper, Scissors</strong>, here's how to play the game.</p>
<h3>Setup</h3>
<h4>Seeing Program Output</h4>
<p>Pull out your browser's <em>Developer Tools' console</em>
in order to see the output of the program. The easiest way to do this for most users will be to:</p>
<ol>
<li>Right click on this page</li>
<li>Click "Inspect (Q)" (<em>Firefox</em>), or "Inspect" (<em>Chrome</em>)</li>
<li>Click the "Console" tab in the Developer Tools within your browser</li>
</ol>
<h4>Playing</h4>
<p>From this point, you can click to start the game with the <em>Start Game</em> button.
Then, it's simply a matter of typing <em>Rock</em>, <em>Paper</em>, or <em>Scissors</em>
into the prompt in the webpage, and either clicking <strong>OK</strong> or simply pressing
<strong>ENTER</strong> on your keyboard. The output of the game within your browser's console
will show you the results.</p>
<button type="button" onclick="game()">Start Game</button>
<h4>Restarting the Game</h4>
<p>Simply refresh the page by pressing <strong>F5</strong> on your keyboard, or clicking your
browser's respective refresh button.</p>
</article>
<footer>
<p>Copyleft 2024 under the
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU AGPLv3</a>
license, which you can also obtain in the
<a href="https://github.com/dissidenttux/odin-rock-paper-scissors">source code</a>.
</p>
</footer>
</body>
</html>