7guis-html-css-js/docs/cells/index.html at main · bradwoods/7guis-html-css-js · 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
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
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <title>Cells</title>
    <link rel="stylesheet" href="../taskCommonStyles.css" />
    <!-- GUI ------------------------------------------------- -->
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <header>
      <nav>
        <a href="../">Back</a>
      </nav>
      <h1>Cells</h1>
      <div id="line">
        ===================================================================================================================================================================
      </div>
    </header>

    <section id="description">
      <h2>Challenge:</h2>
      <p>Change propagation, widget customization, implementing a more authentic/involved GUI application.</p>
      <h2>Criteria:</h2>
      <ul id="criteria">
        <li>Create a simple but usable spreadsheet application.</li>
        <li>The spreadsheet should be scrollable.</li>
        <li>The rows should be numbered from 0 to 99 and the columns from A to Z.</li>
        <li>Double-clicking a cell C lets the user change C’s formula.</li>
        <li>
          After having finished editing the formula is parsed and evaluated and its updated value is shown in C. In
          addition, all cells which depend on C must be re-evaluated. This process repeats until there are no more
          changes in the values of any cell (change propagation).
        </li>
        <li>
          One should not just recompute the value of every cell but only of those cells that depend on another cell’s
          changed value.
        </li>
      </ul>
      <p>
        Cells is a more authentic and involved task that tests if a particular approach also scales to a somewhat bigger
        application. The two primary GUI-related challenges are intelligent propagation of changes and widget
        customization. Admittedly, there is a substantial part that is not necessarily very GUI-related but that is just
        the nature of a more authentic challenge. A good solution’s change propagation will not involve much effort and
        the customization of a widget should not prove too difficult. The domain-specific code is clearly separated from
        the GUI-specific code. The resulting spreadsheet widget is reusable.
      </p>
      <p>
        Cells is directly inspired by the
        <a href="https://www.artima.com/pins1ed/the-scells-spreadsheet.html" target="_blank" rel="noopener noreferrer"
          >SCells spreadsheet example</a
        >
        from the book Programming in Scala. Please refer to the book (or the implementations in this repository) for
        more details especially with respect to the not directly GUI-related concerns like parsing and evaluating
        formulas and the precise syntax and semantics of the spreadsheet language.
      </p>
      <img alt="A spreadsheet." src="/images/cells.png" />
    </section>

    <section id="gui">
      <!-- GUI ------------------------------------------------- -->
      <section id="cells">
        <h1>Cells</h1>
        <div id="tableLayout">
          <table>
            <thead>
              <tr id="colHeadings">
                <!-- Placeholder to prevent a letter being rendered in the rowHeadings column -->
                <th id="topLeftSquare" class="rowHeading"></th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </section>
      <section id="code">
        <h2>Code:</h2>
        <p>
          After opening a code link below, hit the '.' key to open GitHub's browser editor for improved reading
          experience.
        </p>
        <ul>
          <li>
            <a
              href="https://github.com/bradwoods/7-guis-html-css-js/blob/main/docs/cells/index.html"
              target="_blank"
              rel="noopener noreferrer"
              >HTML</a
            >
          </li>
          <li>
            <a
              href="https://github.com/bradwoods/7-guis-html-css-js/blob/main/docs/cells/styles.css"
              target="_blank"
              rel="noopener noreferrer"
              >CSS</a
            >
          </li>
          <li>
            <a
              href="https://github.com/bradwoods/7-guis-html-css-js/blob/main/docs/cells/index.js"
              target="_blank"
              rel="noopener noreferrer"
              >JS</a
            >
          </li>
        </ul>
      </section>
    </section>
    <!-- GUI ------------------------------------------------- -->
    <script src="index.js"></script>
  </body>
</html>