From 374b61a8f7fc19c1503c985f806980b8fd44ca8c Mon Sep 17 00:00:00 2001
From: ametoresu <mail@tenkyuu.dev>
Date: Fri, 27 Dec 2024 19:10:22 +0800
Subject: [PATCH] updated UI a little

---
 index.html |  6 +++---
 script.js  |  3 +--
 styles.css | 31 +++++++++++++++++++++++++++----
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 39d023b..ef5c31d 100644
--- a/index.html
+++ b/index.html
@@ -19,11 +19,11 @@
   <header></header>
   <main>
     <div class="summary">
-      <h1>Temperature Converter</h1>
-      <p>This web application allows users to convert temperatures between various units, including Celsius, Fahrenheit, and Kelvin. It provides a straightforward interface for quick and accurate conversions.</p>
+      <h1 class="app-title">Temperature Converter</h1>
+      <p class="app-description">This web application allows users to convert temperatures between various units, including Celsius, Fahrenheit, and Kelvin. It provides a straightforward interface for quick and accurate conversions.</p>
     </div>
     <div class="converter-ctn">
-      <div class="">Convert <span id="convertFromTxt"></span> to <span id="convertToTxt"></span></div>
+      <div class="convert-fr-to-txt">Convert <span id="convertFromTxt"></span> to <span id="convertToTxt"></span></div>
       <div class="convertion-wrapper">
         <div class="selection-wrapper">
           <select name="tempUnitFrom" id="tempUnitFrom">
diff --git a/script.js b/script.js
index 577bdc4..c95e10a 100644
--- a/script.js
+++ b/script.js
@@ -74,8 +74,7 @@ const calculate = (value) => {
   const to = tempUnitTo.value;
 
   if (!parsedInt || isNaN(parsedInt)) {
-    result.innerHTML = updateOutputTxt(from, to, convert(parsedInt, from, to));
-    return;
+    return result.innerHTML = updateOutputTxt(0, 0, convert(parsedInt, 0, 0));
   } else {
     document.getElementById("result").innerHTML = updateOutputTxt(from, to, convert(parsedInt, from, to));
   }
diff --git a/styles.css b/styles.css
index 13750be..4083231 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,8 @@
 :root {
+  --mobile-txt-sml: 2rem;
+  --mobile-txt-mdm: 3rem;
+  --mobile-txt-lrg: 4rem;
+  --box-shadow: 0rem 0.2rem 0.8rem #00000025;
   --button: #0031a2;
 }
 *,
@@ -9,17 +13,26 @@
   padding: 0;
 }
 html {
-  /* font-size: 62.5%; */
+  font-size: 62.5%;
 }
 main {
   width: 90%;
   margin: 0 auto;
 }
+.app-title {
+  font-size: var(--mobile-txt-lrg);
+}
+.app-description {
+  font-size: var(--mobile-txt-sml);
+}
 .converter-ctn {
-  box-shadow: 0rem 0.2rem 0.8rem #00000025;
-  padding: 1rem 2rem;
+  box-shadow: var(--box-shadow);
+  padding: 2rem;
   margin-top: 1.4rem;
 }
+.convert-fr-to-txt {
+  font-size: var(--mobile-txt-sml);
+}
 .convertion-wrapper {
   white-space: nowrap;
 }
@@ -29,15 +42,25 @@ main {
   margin-top: 0.4rem;
 }
 select {
+  font-size: var(--mobile-txt-sml);
+  padding: 1rem;
   width: 50%;
+  background-color: lightblue;
+  border: 0.1rem solid black;
+  border-radius: 0.2rem;
+  box-shadow: var(--box-shadow);
 }
 input {
+  font-size: var(--mobile-txt-sml);
+  padding: 1rem;
   margin-top: 0.4rem;
   width: 100%;
+  box-shadow: var(--box-shadow);
 }
 #result {
+  font-size: var(--mobile-txt-mdm);
   text-align: center;
-  padding: 1rem;
+  padding: 2rem;
 }
 
 @media only screen and (min-width: 1240px) {
-- 
2.39.5