├── README.md
└── src
├── index.html
├── index.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # random-table-image
2 | Random Table Image
3 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
18 |
19 |
20 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | const input = document.getElementById("input");
2 | const buttonGenerate = document.getElementById("button[generate]");
3 | const form = document.getElementById("form");
4 | const random = document.getElementById("button[reload]");
5 | const randomImage = document.getElementById("button[generate-image]");
6 |
7 | // Image Generator
8 |
9 | randomImage.addEventListener("click", () => {
10 | if (!input.value) {
11 | alert("Please use number");
12 | } else {
13 | input.classList.add("hidden");
14 | buttonGenerate.classList.add("hidden");
15 | randomImage.classList.add("hidden");
16 | random.classList.remove("hidden");
17 | const table = document.createElement("table");
18 | let body = document.getElementsByTagName("body")[0];
19 |
20 | let tbl = document.createElement("table");
21 | let tblBody = document.createElement("tbody");
22 |
23 | spiralArray = function (edge) {
24 | var arr = Array(edge),
25 | x = 0,
26 | y = edge,
27 | total = edge * edge--,
28 | dx = 1,
29 | dy = 0,
30 | i = 0,
31 | j = 0;
32 | while (y) arr[--y] = [];
33 | while (i < total) {
34 | arr[y][x] = i++;
35 | x += dx;
36 | y += dy;
37 | if (++j == edge) {
38 | if (dy < 0) {
39 | x++;
40 | y++;
41 | edge -= 2;
42 | }
43 | j = dx;
44 | dx = -dy;
45 | dy = j;
46 | j = 0;
47 | }
48 | }
49 | return arr;
50 | };
51 | arr = spiralArray((edge = input.value));
52 | arr.map((item1, i) => {
53 | let row = document.createElement("tr");
54 |
55 | item1.map((item, ii) => {
56 | console.log(item);
57 | let cell = document.createElement("td");
58 | let img = document.createElement("img");
59 | let cellText = document.createTextNode(item);
60 | cell.appendChild(cellText);
61 | cell.appendChild(img);
62 | img.setAttribute(
63 | `src`,
64 | `https://source.unsplash.com/collection/${item}`
65 | );
66 | img.setAttribute(`style`, `width: 120px; height: 120px; `);
67 | row.appendChild(cell);
68 | });
69 |
70 | tblBody.appendChild(row);
71 | });
72 | tbl.appendChild(tblBody);
73 | body.appendChild(tbl);
74 |
75 | tbl.setAttribute("border", "1");
76 | }
77 | });
78 |
79 | buttonGenerate.addEventListener("click", () => {
80 | if (!input.value || typeof input == "string") {
81 | alert("Please use number");
82 | } else {
83 | input.classList.add("hidden");
84 | buttonGenerate.classList.add("hidden");
85 | randomImage.classList.add("hidden");
86 | random.classList.remove("hidden");
87 | // create Element.
88 | const table = document.createElement("table");
89 | let body = document.getElementsByTagName("body")[0];
90 | let tbl = document.createElement("table");
91 | let tblBody = document.createElement("tbody");
92 |
93 | spiralArray = function (edge) {
94 | var arr = Array(edge),
95 | x = 0,
96 | y = edge,
97 | total = edge * edge--,
98 | dx = 1,
99 | dy = 0,
100 | i = 0,
101 | j = 0;
102 | while (y) arr[--y] = [];
103 | while (i < total) {
104 | arr[y][x] = i++;
105 | x += dx;
106 | y += dy;
107 | if (++j == edge) {
108 | if (dy < 0) {
109 | x++;
110 | y++;
111 | edge -= 2;
112 | }
113 | j = dx;
114 | dx = -dy;
115 | dy = j;
116 | j = 0;
117 | }
118 | }
119 | return arr;
120 | };
121 | arr = spiralArray((edge = input.value));
122 | arr.map((item1, i) => {
123 | let row = document.createElement("tr");
124 |
125 | item1.map((item, ii) => {
126 | console.log(item);
127 | let cell = document.createElement("td");
128 | let img = document.createElement("img");
129 | let cellText = document.createTextNode(item);
130 | cell.appendChild(cellText);
131 | cell.appendChild(img);
132 | cell.setAttribute(
133 | `style`,
134 | `background-color: rgb(${item + item + 10}, ${item + item + 40}, ${
135 | item + item + 40
136 | })`
137 | );
138 |
139 | // img.setAttribute(`src`, `https://source.unsplash.com/collection/${item}`)
140 | // img.setAttribute(`style`, `width: 120px; height: 120px; `)
141 | row.appendChild(cell);
142 | });
143 |
144 | tblBody.appendChild(row);
145 | });
146 | tbl.appendChild(tblBody);
147 | body.appendChild(tbl);
148 |
149 | tbl.setAttribute("border", "1");
150 | }
151 | });
152 |
153 | // reload page click reload.
154 | random.addEventListener("click", () => {
155 | window.location.reload();
156 | });
157 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | .hidden {
2 | display: none;
3 | }
4 | .mb-1 {
5 | margin-bottom: 1rem;
6 | }
7 |
--------------------------------------------------------------------------------