handle response when no country can be found

minor fixes
nyakotey · Aug 23, 2022 · 1ec1bce · 1ec1bce
1 parent 579ff94
commit 1ec1bce
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -1,18 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
     <section class="input">
-        <input  class="input-box" type="text" name="input-code" id="input-code" placeholder="+XXX">
-        <button class="input-submit" >Enter</button>
+        <input class="input_box" type="text" name="input-code" id="input-code" placeholder="+XXX">
+        <button class="input_submit">Enter</button>
     </section>
     <section class="display"></section>
+    <!-- <section class="info"></section> -->
     <script src="script.js"></script>
 </body>
+
 </html>
diff --git a/script.js b/script.js
@@ -15,25 +15,34 @@ function submitOnEnter(e) {
     }
 }
 function getQuery(e) {
-        return e.target.value;
+        query = e.target.value;
         input.value = "";
+        return query;
 }
 
 function search(db, searchArg) {
     return db.filter((e) => e.dialCode == searchArg);
 }
 
-function resultHtml(result) {
-    return `<img src="${result.flag}" alt="country flag" class="country-flag">
-    <p class="country-name">${result.name}</p>`;
+function res2Html(result) {
+    if (result.length == 0 ){
+        return `<div class="error">Not found</div>`;
+    }
+    result = result[0];
+    return `
+<div class="country">
+    <img src="${result.flag}" alt="country flag" class="country_flag">
+    <p class="country_name">${result.name}</p>
+</div>    
+`;
 }
 
 async function response(e) {
     db = await fetchDB();
     console.log(db);
     query = getQuery(e);
     data = search(db, query);
-    output.innerHTML = resultHtml(...data);
+    output.innerHTML = res2Html(data);
 }
 
 input.addEventListener("enter", response);

diff --git a/style.css b/style.css
@@ -5,6 +5,7 @@
     padding:0;
     box-sizing: border-box;
     position: relative;
+    font-family:Verdana, Geneva, Tahoma, sans-serif
 }
 *::before,
 *::after{
@@ -16,7 +17,7 @@
     --red: #f2023f;
     --belly: #e4c5a8;
     --beak: #fab92b;
-    --eye: whitesmoke;
+    --info: #a8afaf;
     --dev-outline: solid lime 2px;
 }
 body{
@@ -25,27 +26,30 @@ body{
     display: flex;
     align-items: center;
     justify-content: space-evenly;
-    background-color: beige;
+    background-color: rgb(255, 255, 255);
     flex-flow: column nowrap;
 }
-body > *{
-    border: var(--dev-outline);
-}
 /* .input{
 } */
-.input-box{
+.input_box{
     width: 50vmin;
     height: 2.8rem;
     font-size: 1.2rem;
 }
-.input-submit{
+.input_submit{
     padding: 0.7rem 1.6rem;
     border-radius: 0.3rem;
-    border: 1px solid;
+    border: none;
     font-size: 1.14rem;
 }
-.country-flag{
+.country_flag{
     width: 40vmin;
     height: 25vmin;
     border-radius: 0.4rem;
+}
+.country_name{
+    font-size: 1.3rem;
+}
+.info{
+    background: var(--info);
 }