create tables with boxes; init positioning

thisispalash · Oct 15, 2023 · 81b0e02 · 81b0e02
1 parent 2b1160e
commit 81b0e02
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 29 deletions.
diff --git a/functional.js b/functional.js
@@ -0,0 +1,17 @@
+const ids = ["a1", "a2", "a3", "b1", "b2", "b3", "c1", "c2", "c3"];
+
+document.onclick = function (event) {
+
+  const { target } = event;
+  const { id } = target;
+
+  if (ids.includes(id)) {
+    const box = document.getElementById(id);
+    box.classList.add('clicked');
+    box.classList.remove('unclicked');
+    document.addEventListener('click', function() {
+      box.classList.add('unclicked');
+      box.classList.remove('clicked');
+    }, true);
+  }
+}
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>Semicolon Fingers</title>
-
+  <link rel="icon" href="arms-400.png">
   <link rel="stylesheet" href="styles.css">
 </head>
 
@@ -13,35 +13,46 @@
 </noscript>
 
 <body>
-  <h1>Home</h1>
-  <p>Ini adalah halaman home</p>
-  <div class="unclicked" id="test" style="width: 10%;">
-    <p>
-      &nbsp;
-    </p>
-    <p>
-      &nbsp;
-    </p>
-    <p>
-      &nbsp;
-    </p>
-  </div>
+  <main>
+    <h1><u>Semicolon Fing</u>ers</h1>
+    <table>
+      <tr>
+        <td>
+          <div class="poem unclicked" id="a1"></div>
+        </td>
+        <td>
+          <div class="poem unclicked" id="a2"></div>
+        </td>
+        <td>
+          <div class="poem unclicked" id="a3"></div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="poem unclicked" id="b1"></div>
+        </td>
+        <td>
+          <div class="poem unclicked" id="b2"></div>
+        </td>
+        <td>
+          <div class="poem unclicked" id="b3"></div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="poem unclicked" id="c1"></div>
+        </td>
+        <td>
+          <div class="poem unclicked" id="c2"></div>
+        </td>
+        <td>
+          <div class="poem unclicked" id="c3"></div>
+        </td>
+      </tr>
+    </table>
+  </main>
 </body>
 
-<script>
-  var box = document.getElementById('test');
-  box.addEventListener('click', function() {
-    // alert('test');
-    box.classList.remove('unclicked');
-    box.classList.add('clicked');
-  });
-  document.addEventListener('click', function() {
-    // alert('test');
-    box.classList.remove('clicked');
-    box.classList.add('unclicked');
-  }, true);
-</script>
-
 <script src="functional.js"></script>
 <script src="telescopic.js"></script>
 

diff --git a/styles.css b/styles.css
@@ -1,9 +1,30 @@
 html {
   background: #95A5A7;
-  padding: 3rem 5rem;
   font-family: monospace;
+  height: 100%;
 }
 
+main {
+  margin: 3vmin 5vmin;
+  text-align: center;
+}
+
+h1 {
+  margin-bottom: 5vmin; 
+}
+
+table {
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.poem {
+  min-width: 19vmin;
+  min-height: 19vmin;
+  margin: 1vmin 4vmin;
+}
+
+
 /** media queries **/
 
 /* Extra small devices (phones, 600px and down) */
@@ -33,6 +54,7 @@ html {
 
 /** end media queries **/
 
+
 /** neumorphic styles **/
 
 .clicked {
@@ -47,6 +69,7 @@ html {
   box-shadow: 9.91px 9.91px 15px #889698, -9.91px -9.91px 15px #A2B4B6;
 }
 
+/* unused for now */
 .hovered {
   background: #95A5A7;
   border-radius: 15%;