Add files via upload

steffano-da-cruz · May 23, 2024 · 72c3a02 · 72c3a02
1 parent 1bd7e7b
commit 72c3a02
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 12 deletions.
diff --git a/css/style.css b/css/style.css
@@ -21,6 +21,12 @@ body {
   margin-bottom: 3rem;
 }
 
+.bills-result,
+.bills-result-2 {
+  color: black;
+  font-size: 2rem;
+}
+
 /* BUTTONS */
 
 .btn {
@@ -45,7 +51,7 @@ body {
 
 /* MAIN CONTENT */
 
-.bills-info {
+.bills-interface {
   margin: 21rem auto 0 auto;
   display: flex;
   flex-direction: column;
@@ -75,20 +81,20 @@ body {
   border: none;
   border-radius: 0.5rem;
   height: 2.4rem;
-  padding: 0 0.6rem;
+  padding: 0 1rem;
 }
 
 .bills-buttons-box {
   display: flex;
   gap: 1.6rem;
 }
 
-.bills-result-on .bills-info {
+.bills-result-on .bills-interface {
   margin: 11rem auto 0 auto;
 }
 
 .bills-result-on .bills-result-box {
-  margin: 5rem auto 0 auto;
+  margin: 5rem auto 4rem auto;
   height: 20rem;
   width: 50rem;
   background-color: #fff;
@@ -101,8 +107,77 @@ body {
   margin-bottom: 1rem;
 }
 
-.bills-result,
-.bills-result-2 {
-  color: black;
-  font-size: 2rem;
+/* MEDIA QUERIES */
+
+/* 848px */
+@media (max-width: 53em) {
+  .btn {
+    font-size: 1.8rem;
+    font-weight: 600;
+    width: 16rem;
+    height: 6rem;
+    padding: 1rem;
+  }
+
+  .bills-interface {
+    margin: 15rem auto 0 auto;
+  }
+
+  .bills-title {
+    line-height: 1;
+  }
+
+  .bills-title span {
+    display: block;
+    text-align: center;
+  }
+
+  .bills-data-box input {
+    font-size: 1.6rem;
+    height: 3rem;
+  }
+
+  .bills-result-on .bills-interface {
+    margin: 5rem auto 0 auto;
+  }
+
+  .bills-result-on .bills-result-box {
+    margin: 5rem auto 4rem auto;
+    height: 20rem;
+    width: 45rem;
+  }
+}
+
+/* 672px */
+@media (max-width: 42em) {
+  .bills-interface {
+    margin: 10rem auto 0 auto;
+  }
+
+  .bills-title {
+    font-size: 10rem;
+  }
+
+  .bills-data-box {
+    flex-direction: column;
+  }
+
+  .bills-result-on .bills-result-box {
+    margin: 4rem auto 4rem auto;
+    width: 38rem;
+  }
+}
+
+/* 496px */
+@media (max-width: 31em) {
+  html {
+    font-size: 50%;
+  }
+}
+
+/* 368px */
+@media (max-width: 23em) {
+  html {
+    font-size: 45%;
+  }
 }
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,13 +9,13 @@
   </head>
   <body>
     <main class="bills-container">
-      <div class="bills-info">
+      <div class="bills-interface">
         <img
           class="bills-calendar"
           src="./assets/images/calendar.png"
           alt="Calendar"
         />
-        <h1 class="bills-title">Monthly Bills</h1>
+        <h1 class="bills-title">Monthly <span>Bills</span></h1>
         <div class="bills-data-box">
           <div>
             <label>Bill name:</label>

diff --git a/js/script.js b/js/script.js
@@ -52,7 +52,15 @@ registerBill.addEventListener("click", function () {
 
 billsNameIn.addEventListener("keydown", function (e) {
   if (e.key === "Enter") {
-    billsValueIn.focus();
+    const billName = billsNameIn.value;
+
+    if (!billName) {
+      showResult();
+      billsResult.textContent = "You must fill both fields!";
+      billsResult2.textContent = "";
+    } else {
+      billsValueIn.focus();
+    }
   }
 });