Some tricks for fonts to fit input field

nyakove · Nov 22, 2018 · b5d8797 · b5d8797
1 parent ec286b7
commit b5d8797
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/calcscript.js b/calcscript.js
@@ -129,6 +129,38 @@ function clickOff(event) {
     event.target.style.backgroundColor = '#FFFFE0';
 }
 
+function alert_() {
+    if (document.getElementsByTagName('input')[0].value.length >= 14) {
+        document.getElementsByTagName('input')[0].style.fontSize = '0.5em';
+        console.log('Limit max!')
+    } 
+
+    else if (document.getElementsByTagName('input')[0].value.length >= 11) {
+        document.getElementsByTagName('input')[0].style.fontSize = '0.75em';
+        console.log('Limit min!');
+    }
+
+    else {
+        document.getElementsByTagName('input')[0].style.fontSize = '1em';  
+    }
+}
+
+/*function foo_test () {
+    if (document.getElementsByTagName('input')[0].value > 11) {
+        document.getElementsByTagName('input')[0].style.fontSize = '6vh';
+        console.log('Limit first!')
+    } 
+    
+    else if (document.getElementsByTagName('input')[0].value > 16) {
+        document.getElementsByTagName('input')[0].style.fontSize = '6vh';
+        console.log('Limit second!');
+    }
+    
+    else {
+        document.getElementsByTagName('input')[0].style.fontSize = '8vh';  
+    }
+}*/
+
 document.getElementById('keys').addEventListener('click', clickInput);
 document.getElementById('keys').addEventListener('mousedown', clickOn);
 document.getElementById('keys').addEventListener('mouseup', clickOff);
@@ -138,3 +170,5 @@ document.addEventListener('keydown', keyOps);
 document.getElementById('result').addEventListener('click', calculate);
 document.getElementById('clear').addEventListener('click', clear);
 document.getElementById('del').addEventListener('click', del);
+document.getElementById('keys').addEventListener('click', alert_);
+document.addEventListener('keydown', alert_);
diff --git a/calcstyle.css b/calcstyle.css
@@ -1,5 +1,5 @@
 #container {
-    width: 310px;
+    width: 340px;
     position: fixed;
     top: 50%;
     left: 50%;
@@ -11,6 +11,10 @@
     padding: 10px;
 }
 
+#table {
+    font-size: 62px;
+}
+
 #keys {
     height: 80vh;
     display: flex;
@@ -57,11 +61,10 @@
 
 input {
     width: 100%;
-    height: 40px;
+    height: 10vh;
     background-color: #B0E0E6;
     margin-bottom: 10px;
     text-align: right;
-    font-size: 30pt;
     font-family: "Segoe UI";
     font-weight: 600;
     opacity: 1.0;