main.js updated with generation on shape and eventListener added. sty…

…le.css updated with appropriate styles for index.html
zero-to-mastery · Oct 31, 2021 · c747ce6 · c747ce6
1 parent f3f1ad6
commit c747ce6
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 17 deletions.
diff --git a/.idea/Canvaz.iml b/.idea/Canvaz.iml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/art/auxfuse-points/index.html b/src/art/auxfuse-points/index.html
@@ -1,15 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
-    <title>Auxfuse - Canvaz Points to Shape</title>
-</head>
-<body>
-    <canvas></canvas>
-
-    <script src="main.js"></script>
-</body>
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <title>Auxfuse - Canvaz Points to Shape</title>
+    </head>
+    <body>
+        <div class="utils">
+            <h1>Shape Generator</h1>
+
+            <p>
+                Radius determines the size of the shape. The inset will determine the inwards direction
+                and length of an edge. Points will determine the overall shape itself, 3 making a triangle,
+                4 a rectangle, 5 a pentagon (or a star if inset is set to 0.5) etc etc.
+            </p>
+
+            <p>Select the radius, the inset, and the amount of points, then click "Generate".</p>
+            <form>
+                <label for="points">Radius</label>
+                <input type="number" value="100" min="100" max="1000" id="radius">
+
+                <label for="points">Inset</label>
+                <input type="number" value="0.5" min="0.1" max="1000" id="inset">
+
+                <label for="points">Points</label>
+                <input type="number" value="7" min="1" max="1000" id="points">
+
+                <button id="submit" type="submit">Generate</button>
+            </form>
+        </div>
+
+        <canvas></canvas>
+
+        <script src="main.js"></script>
+    </body>
 </html>
diff --git a/src/art/auxfuse-points/main.js b/src/art/auxfuse-points/main.js
@@ -1,7 +1,11 @@
 const c = document.querySelector('canvas');
 const ctx = c.getContext('2d');
+const radius = document.querySelector('#radius');
+const inset = document.querySelector('#inset');
+const points = document.querySelector('#points');
+const submit = document.querySelector('#submit');
 
-c.height = window.innerHeight;
+c.height = window.innerHeight*0.75;
 c.width = window.innerWidth;
 
 function sides(r, inset, n){
@@ -24,4 +28,8 @@ function sides(r, inset, n){
     ctx.fill();
 };
 
-sides(100, 0.5, 6);
+submit.addEventListener('click', e => {
+    e.preventDefault();
+
+    sides(radius.value, inset.value, points.value);
+});
diff --git a/src/art/auxfuse-points/style.css b/src/art/auxfuse-points/style.css
@@ -9,7 +9,46 @@ body {
 }
 
 canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
+    width: 100%;
+    height: 60vh;
+    object-fit: contain;
+}
+
+.utils {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem 2rem;
+    text-align: center;
+}
+
+.utils > p {
+    margin: 1rem;
+    padding: 0 2rem;
+}
+
+.utils > p:nth-child(3) {
+    font-weight: bold;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+form > * {
+    margin: 0.3rem;
+}
+
+form > label {
+    margin: 0;
+    font-weight: bold;
+}
+
+@media (min-width: 576px) {
+    form {
+        flex-direction: row;
+    }
 }