feat: use more descriptive width

src/assets/calculator.js

@@ -19,19 +19,19 @@ const FAIL_CRITERIA = {
 };
 
 class Dimensions {
-    constructor(length, width, height) {
-        this.length = length;
+    constructor(width, depth, height) {
         this.width = width;
+        this.depth = depth;
         this.height = height;
     }
 
     toString() {
-        return `${this.length}x${this.width}x${this.height}`;
+        return `${this.width}x${this.depth}x${this.height}`;
     }
 
     static fromDict(data) {
-        const { length, width, height } = data;
-        return new Dimensions(length, width, height);
+        const { width, depth,  height } = data;
+        return new Dimensions(width, depth, height);
     }
 }
 

src/assets/css/style.css

@@ -152,6 +152,15 @@ label {
     cursor: pointer;
 }
 
+.card-photo label {
+    color: var(--text-one);
+    padding: 10px;
+}
+
+.measurement {
+    width: 100px;
+}
+
 .cage-selector {
     display: flex;
     flex-wrap: wrap;

src/index.html

@@ -46,8 +46,9 @@
 
             <div class="card">
                 <div class="card-photo">
-                    <input type="checkbox" id="tiaki"/>
-                    <form class="form-measurements">
+
+                    <label for="form-cage-measurements">Käfigmaße</label>
+                    <form id="form-cage-measurements" class="form-measurements">
                         <div class="input-measurement">
                             <label for="width">Breite</label>
                             <input class="measurement" type="number" id="width">
@@ -62,7 +63,6 @@
                         </div>
                     </form>
                 </div>
-                <label>Käfigmaße</label>
             </div>
 
         </div>
@@ -86,7 +86,7 @@
         <div class="container output-element" id="resultsDiv">
         </div>
     </div>
-
+</div>
 <script>
 
     var labelNumRats = document.getElementById("labelNumRats");