ap-sheet/garbage.html at master · darth-cheney/ap-sheet · 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
<!doctype html>
<html>
    <head>
        <title>Grid Experiments</title>
    </head>
    <body>
        <main>
            <div id="grid">
            </div>
        </main>
        <style>
         #grid {
             display: grid;
             grid-template-areas: "ctab ctab ctab ctab ctab ctab ctab ctab ctab ctab ctab"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell"
             "rtab cell cell cell cell cell cell cell cell cell cell";
             border: 1px solid black;
             max-width: 1200px;
             grid-template-rows: [r-tab-start] 1fr repeat(10, [cell-row-start] 1fr);
             grid-template-columns: [c-tab-start] 1fr repeat(10, [cell-col-start] 1fr);
         }
         .cell {
             grid-column-start: var(--col-start);
             grid-column-end: span 1;
             grid-row-start: var(--row-start);
             grid-row-end: span 1;
             height: 50px;
         }
         .cell:first-child {
             grid-column-start: cell-col-start;
             grid-row-start: cell-row-start;
         }
        </style>
        <script>
         document.addEventListener('DOMContentLoaded', () => {
             let numCols = 10;
             let numRows = 12;
             let grid = document.getElementById('grid');
             for(let colNum = 0; colNum < numCols; colNum++){
                 for(let rowNum = 0; rowNum < numRows; rowNum++){
                     let el = document.createElement('div');
                     el.classList.add('cell');
                     /* el.style.setProperty('--col-start', colNum);
                      * el.style.setProperty('--row-start', rowNum); */
                     if(colNum == 0){
                         el.style.setProperty('--col-start', 'cell-col-start');
                     } else {
                         el.style.setProperty('--col-start', `cell-col-start ${colNum + 1}`);
                     }
                     if(rowNum == 0){
                         el.style.setProperty('--row-start', 'cell-row-start');
                     } else {
                         el.style.setProperty('--row-start', `cell-row-start ${rowNum + 1}`);
                     }
                     var randomColor = Math.floor(Math.random()*16777215).toString(16);
                     el.style.backgroundColor = `#${randomColor}`;
                     grid.append(el);
                     el.textContent = `${colNum}, ${rowNum}`;
                     }
             }

             // Example selection frame
             let div = document.createElement('div');
             div.style.backgroundColor = "rgba(220, 220, 220, 0.3)";
             div.style.gridColumnStart = "cell-col-start 2";
             div.style.gridColumnEnd = "cell-col-start -1";
             div.style.gridRowStart = "cell-row-start 1";
             div.style.gridRowEnd = "cell-row-start -1";
             grid.append(div);
         });
        </script>
    </body>
</html>