Driver Input

app.js

@@ -42,9 +42,9 @@ async function updateDrivers() {
                     drivers[driver.Driver.driverId].constructor = driver.Constructors[0].name
                 } else if (driver.Driver.hasOwnProperty("permanentNumber")) {
                     drivers[driver.Driver.driverId] = {
-                        "permanentNumber": driver.Driver.permanentNumber,
                         "firstName": driver.Driver.givenName,
                         "lastName": driver.Driver.familyName,
+                        "permanentNumber": driver.Driver.permanentNumber,
                         "age": getAge(driver.Driver.dateOfBirth),
                         "firstYear": i,
                         "nationality": driver.Driver.nationality,

assets/css/main.css

@@ -87,20 +87,27 @@ input[type=text] {
 }
 
 .header {
-    color: white;
+    outline: 0px !important;
-    font-family: "FormulaOne";
-    border: 0px !important;
     vertical-align: bottom;
     background-color: transparent !important;
 }
 
-.text {
+.header .text {
-    position: absolute;
     bottom: 0;
     left: 0;
+    line-height: normal !important;
+    vertical-align: bottom !important;
+}
+
+.text {
+    line-height: 50px;
+    vertical-align: middle;
+    position: absolute;
     width: 50px;
     margin-left: auto;
     margin-right: auto;
+    color: white;
+    font-family: "FormulaOne";
 }
 
 .row {
@@ -112,8 +119,8 @@ input[type=text] {
     background-color: #171717;
     height: 50px;
     width: 50px;
-    border: 2px solid #3a3a3c;
+    outline: 2px solid #3a3a3c;
-    margin: 3px;
+    margin: 4px;
     text-align: center;
     position: relative;
 }
@@ -123,4 +130,30 @@ input[type=text] {
     margin-left: auto;
     margin-right: auto;
     width: 380px;
+}
+
+@keyframes shake {
+    0% {
+        transform: translateX(0);
+    }
+
+    20% {
+        transform: translateX(-10px);
+    }
+
+    40% {
+        transform: translateX(10px);
+    }
+
+    60% {
+        transform: translateX(-10px);
+    }
+
+    80% {
+        transform: translateX(10px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
 }

assets/js/main.js

@@ -123,7 +123,23 @@ document.addEventListener("keyup", function (event) {
                 }
             })
 
-            document.getElementById("myInput").value = ""
+            if (top > 0.5) {
+                document.getElementById("myInput").value = ""
+                let obj = {}
+                Object.entries(driversObj).forEach(driver => {
+                    if (driver[1].firstName + " " + driver[1].lastName == guess) obj = driver[1]
+                })
+                let frames = Array.from(document.getElementsByClassName("frame")).filter(x => x.childNodes.length == 0)
+                for (let i = 0; i < 6; i++) {
+                    frames[i].innerHTML = `<div class="guess text">${Object.values(obj)[i + 2]}</div > `
+                }
+                console.log(obj)
+            }
+            else {
+                let element = document.getElementById("myInput")
+                element.style.removeProperty("animation")
+                setTimeout(() => element.style.animation = "shake .5s", 100)
+            }
         }
     }
 });