HTML-small-project/Project 3.html at main · stalight/HTML-small-project · 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
<!DOCTYPE html>
<!--This is so that I could link to the other folders easily-->
<html lang="en">
    <!--This shows that the html is set to english language-->
    <head>
        <title>Project 3 - Tic Tac Toe</title>
        <!--Title of the Webpage-->
        <link href="css/Project 3.css" type="text/css" rel="stylesheet">
        <!--Links to the stylesheet-->
        <link href="pic/1612527352.ico" rel="icon">
        <!--Links to the favicon-->
        <script src="js/project3.js" defer></script>
        <!--Links to the javascript-->
        <meta charset="utf-8">
        <!--This code makes sure that the code I type could be read by a machine-->
    </head>
    <body onload="activate()">
        <h1>Project 3 - Tic Tac Toe</h1>
        <div><h2>Instruction</h2>
        You, the player will go first, click on any tiles you prefer and the computer will go next,<br>
        the first to connect 3 tiles together on the playfield wins.</div>
        <!--Instruction for the viewer-->
        <h2 id="result"></h2>
        <div id="playfield">
            <!--As the name suggests, it is the playfield where the tic tac toe game takes place-->
            <div class="place" id="one">
            <input type="button" onclick="one()" id="button1">
            </div>
            <div class="place" id="two">
            <input type="button" onclick="two()" id="button2">
            </div>
            <div class="place" id="three">
            <input type="button" onclick="three()" id="button3">
            </div><br>
            <div class="place" id="four">
            <input type="button" onclick="four()" id="button4">
            </div>
            <div class="place" id="five">
            <input type="button" onclick="five()" id="button5">
            </div>
            <div class="place" id="six">
            <input type="button" onclick="six()" id="button6">
            </div><br>
            <div class="place" id="seven">
            <input type="button" onclick="seven()" id="button7">
            </div>
            <div class="place" id="eight">
            <input type="button" onclick="eight()" id="button8">
            </div>
            <div class="place" id="nine">
            <input type="button" onclick="nine()" id="button9">
            </div><br>
            <!--The tiles that the user and computer detects and use to input their choices, labelled from 1 to 9-->
        </div>
        <input type="button" onclick="reset()" value="Restart">
        <!--This button refreshes the page, meaning that the program restarts and the game too-->
        <div id=res></div>
        <div id="hyperlinks">
            <pre><a id="hype" href="Index Page.html">Home Page</a> <b>|</b> <a id="hype" href="Project 1.html">Project 1 - Guess a Number!</a> <b>|</b> <a id="hype" href="Project 2.html">Project 2 - Flip a Coin!</a> <b>|</b> <a id="hype" href="Project 3.html">Project 3 - Tic Tac Toe!</a> <b>|</b> <a id="hype" href="Reflection.html">Reflection</a></pre>
            <!--Hyperlinks for my other webpage-->
            </div>
    </body>
</html>