Rock-Paper-Scissors HTML
<!--
Using a combination of HTML, HTML forms, CSS, and JavaScript we will build a simple version
of a Rock, Paper, Scissors game, where a user can play against the computer.
-->
<html>
<!-- Inside the head tag you include some information about the page. -->
<head>
<!-- The title is what shows on your browser tab. -->
<title>Play Rock-Paper-Scissors</title>
<!-- Add a link to the CSS file that has the required styling. -->
<link href="rps_complete.css" rel="stylesheet" type="text/css" />
<!-- Add a link to the JavaScript file that has the required functions to be executed for this page. -->
<script src="rps_complete.js"></script>
</head>
<!-- Inside the body tags you include the actual page content to be displayed. -->
<body>
<p class="box-title">The Rock-Paper-Scissors Game</p>
<p class="styled-para">
This is the popular game between two players where each player chooses one of three options and the winner is decided by a hierarchy rule that goes:
</p>
<ul class="styled-para">
<li>Rock beats Scissors</li>
<li>Paper beats Rock</li>
<li>Scissors beats Paper</li>
</ul>
<!-- CSS styles can also be defined inline for an element as below. Use only if required for some ad-hoc styling for a specific element, not recommended otherwise, as it can lead to messy code
-->
<h2 style="font-family: Arial;color:green;">Let's Play!</h2>
<p class="styled-para">
Enter one of the three options:
</p>
<!-- A Form is a collection of elements that accept user inputs
There are a few types of form elements, the commonly ones being
a text input box where the user can input a value
and a button which the user can click on to initiate an action.
-->
<form>
<!-- The form action is processed in the JavaScript code -->
<!-- To be able to identify the text box to read the value from
the element is given an id.
-->
<input type="text" id="user-call-input" />
<p id="error-message" style="color:red"></p>
<!-- All elements have what are known as events which refer to possible user actions.
Each type of element will have its own set of relevant events.
For example, a button element will have an "onclick" event.
A JavaScript function can be attached to the events that need to be "handled". When the event occurs, such as the user clicking on a button, the attached function is executed.
-->
<button type="button" onclick="playRound()">Play!</button>
</form>
<!-- We can create empty elements as placeholders that will be dynamically populated with values by the Javacript function as it executes. Each element must have an id so the function can identify it. -->
<p class="styled-para">
<strong>Your call: </strong><span id="your-call" class="big-number"></span>
</p>
<!-- So far we received an input from the user and displayed it on the page using the JavaScript function -->
<!-- Now we add the game logic where the computer generates a random call and the winner is determined -->
<!-- Create plaeholder elements for the values generated by the game logic -->
<p class="styled-para">
<strong>Computer call: </strong><span id="computer-call" class="big-number"></span>
</p>
<p class="styled-para">
<span id="round-winner-call" class="big-number" style="font-family: Arial;color:green;"></span>
</p>
<p class="styled-para">
Score after <span id="rounds">0</span> rounds:
</p>
<p class="styled-para">
You: <span id="user-score" class="big-number">0</span>
Computer: <span id="computer-score" class="big-number">0</span>
Draws: <span id="no-score-count" class="big-number">0</span>
</p>
</body>
</html>