Java-Script-Project/show_data.html at main · zhenhuaizeng/Java-Script-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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!--
	This is the page displays the title, and it set up the canvas.
    Author: Professor Josh, Zhenhuai Jack Zeng
    File: seattle.html
    Date: 5/31/2022
-->


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Dataset</title>

        <!-- styles for the page... -->
        <link rel="stylesheet" href="styles/styles.css">


        <!-- reference the script with your JS array here... -->
        <script src="scripts/dataset.js"></script>


    </head>
    <body>
        <main id="left-column">
            <h1>Dataset name goes here...</h1>
            <p>Introduce your dataset here...</p>
            <div>
                <!--added another section-->
                <section>
                    <label>Field name:</label>
                </section>
                <section>
                    <label>Field name:</label>
                    <span id="spanOne">Value</span>
                </section>
                <section>
                    <label>Field name:</label>
                    <span id="spanTwo">Value</span>
                </section>
                <section>
                    <label>Field name:</label>
                    <span id="spanThree">Value</span>
                </section>
                <section>
                    <label>Field name:</label>
                    <span id="spanFour">Value</span>
                </section>
                <section>
                    <label>Field name:</label>
                    <span id="spanFive">Value</span>
                </section>
                <section>
                    <label>Field name:</label>
                    <span id="spanSix">Value</span>
                </section>

                <section>
                    <button id="previous">Previous</button>
                    <button id="next">Next</button>
                </section>
            </div>
        </main>
        <aside id="right-column">
            <h2>Here are some interesting facts in my dataset!</h2>
            <ul>
                <li id="factOne"></li>
                <li id="factTwo"></li>
                <li id="factThree"></li>
            </ul>
        </aside>

        <!-- reference the script with program behavior here... -->
        <script src="scripts/script.js"></script>
        <script src="scripts/program_behavior.js"></script>
    </body>
</html>