add basic input validation

allow multiple search results improve page styles: - move info notification to the top - adjust element spacing - make multiple search results scroll horizontally
nyakotey · Aug 26, 2022 · a9f135f · a9f135f
1 parent 5954051
commit a9f135f
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 51 deletions.
diff --git a/index.html b/index.html
@@ -15,15 +15,15 @@
 
 <body>
     <header class="header">Call Codes Checker</header>
+    <section class="info">
+        <p class="info_header"><i class="fas fa-circle-info info-icon"></i>&nbsp;&nbsp;Note</p>
+        <p>Get the country or state from the dialing code</p>
+    </section>
     <section class="input">
         <input class="input_box" type="tel" name="input-code" id="input-code" placeholder="+234">
         <button class="input_submit">Enter</button>
     </section>
     <section class="display"></section>
-    <section class="info">
-        <p class="info_header"><i class="fas fa-circle-info info-icon"></i>&nbsp;&nbsp;Note</p>
-        <p>Get the country or state from the dialing code</p>
-    </section>
     <script src="script.js"></script>
 </body>
 

diff --git a/script.js b/script.js
@@ -2,49 +2,51 @@ const $ = (elem) => document.querySelectorAll(elem);
 const input = $("input")[0];
 const output = $(".display")[0];
 const submitButton = $("button")[0];
-const errQueryHtml = `<div class="error">Please revise your input</div>`;
 
-async function fetchDB() {
-    let resp = await fetch("countries.json");
-    json = await resp.json();
-    return json;
-}
-
-function submitOnEnter(e) {
-    if (e.keyCode == 13 || e.code == "Enter" || e.key == "Enter") {
-        response(e);
-    }
-}
 function getQuery() {
     query = input.value;
     // input.value = "";
     return query;
 }
 
+function validateQuery(query) {
+    // valid [.+0-9\-,]
+    const nonMatch = /[a-zA-Z;:' "?<>/.{}\\\[\]@_=!#$%^&*]/gm;
+    regex = new RegExp(nonMatch);
+    if (regex.test(query) || query == "") {
+        return false;
+    }
+    return true;
+}
+
+async function fetchDB() {
+    let resp = await fetch("countries.json");
+    json = await resp.json();
+    return json;
+}
+
 function search(db, searchArg) {
     return db.filter((e) => e.dialCode == searchArg);
 }
 
 function res2Html(result) {
+    const notFoundHtml = `<div class="error">Not found</div>`;
+    let AllCountryHtml = "";
+
     if (result.length == 0) {
-        return `<div class="error">Not found</div>`;
+        return notFoundHtml;
     }
-    result = result[0];
-    return `
+    result.forEach((c) => {
+         countryHtml = `
 <div class="country">
-    <p class="country_name">${result.name}</p>
-    <div class="country_flag"><img src="${result.flag}" alt="" class="country_flag_img"></div>
+<p class="country_name">${c.name}</p>
+<div class="country_flag"><img src="${c.flag}" alt="" class="country_flag_img"></div>
 </div>    
 `;
-}
-function validateQuery(query) {
-    // valid [.+0-9\-,]
-    const nonMatch = /[a-zA-Z;:' "?<>/.{}\\\[\]@_=!#$%^&*]/gm;
-    regex = new RegExp(nonMatch);
-    if (regex.test(query) || query == "") {
-        return false;
-    }
-    return true;
+AllCountryHtml += countryHtml; 
+    });
+
+    return AllCountryHtml;
 }
 
 async function response() {
@@ -55,17 +57,20 @@ async function response() {
         data = search(db, query);
         output.innerHTML = res2Html(data);
     } else {
+    const errQueryHtml = `<div class="error">Please revise your input</div>`;
         output.innerHTML = errQueryHtml;
     }
 }
 
-input.addEventListener("enter", response);
-input.addEventListener("keydown", submitOnEnter);
-submitButton.addEventListener("click", response);
+function submitOnEnter(e) {
+    if (e.keyCode == 13 || e.code == "Enter" || e.key == "Enter") {
+        response(e);
+    }
+}
 
 async function tests() {
     const testRandomCountry = () => {
-        countries = ["+255", "+241", "+239", "+237", "+1"];
+        countries = ["+255", "+241", "+239", "+44", "+237", "+1", "+1264"];
         i = Math.floor(Math.random() * countries.length);
         return countries[i];
     };
@@ -74,8 +79,12 @@ async function tests() {
     // };
     // response(fake);
     db = await fetchDB();
-        data = search(db, testRandomCountry());
-        output.innerHTML = res2Html(data);
-
+    data = search(db, testRandomCountry());
+    output.innerHTML = res2Html(data);
 }
 // tests();
+
+// main
+input.addEventListener("enter", response);
+input.addEventListener("keydown", submitOnEnter);
+submitButton.addEventListener("click", response);
diff --git a/style.css b/style.css
@@ -4,9 +4,17 @@
     box-sizing: border-box;
     position: relative;
     font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif;
+    scroll-behavior: smooth;
 }
 
 :root {
+    /* palette */
+    --white: #fafafaff;
+    --onyx: #37393aff;
+    --blue-crayola: #3777ffff;
+    --ocean-green: #26c485ff;
+    --maximum-yellow-red: #e3b23cff;
+    /* page */
     --yellow: #e3b23c;
     --green: #66a583;
     --bg: #fbfbfb;
@@ -23,10 +31,11 @@ body {
     height: 100vh;
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
     flex-flow: column nowrap;
     background: var(--bg);
     color: var(--text);
+    overflow-x: hidden;
+    gap: 2.5em;
 }
 
 /* body > * {
@@ -41,6 +50,7 @@ body {
     color: white;
     background: var(--header);
     font-size: 1.3rem;
+    z-index: 1;
 }
 
 .input {
@@ -64,7 +74,6 @@ body {
 
 .input_submit {
     width: 30%;
-    padding: 0.7rem 1.6rem;
     border-radius: 0.3rem;
     border: none;
     font-size: 1.14rem;
@@ -75,52 +84,67 @@ body {
 .display {
     width: 85vmin;
     display: flex;
-    /* border: 1px solid #000; */
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    gap: 2rem;
+    padding: 1.5rem 0;
 }
 
 .country {
+    width: 65%;
     display: flex;
+    flex: 0 0 max-content;
     /* justify-content: center;
     align-items: center; */
     gap: 0.8rem;
     flex-direction: column;
-    /* background: var(--country); */
+    background: white;
     padding: 1rem;
-    border-radius: .5rem;
-    /* border: 3px solid var(--yellow); */
+    border-radius: 0.5rem;
+    box-shadow: 0 0 2px 0px rgba(94, 94, 94, 0.164),
+        0 0 4px 1px rgba(55, 118, 255, 0.05);
 }
 
 .country_name {
     /* font-size: 1.3rem; */
     font-weight: bold;
 }
+
 .country_flag {
+    width: 100%;
     height: 25vmin;
     overflow: hidden;
+    background: var(--bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .country_flag_img {
-    object-fit: contain;
-    width: auto;
+    object-fit: fill;
+    width: 100%;
     height: 100%;
 }
 
 .info {
     background: var(--info);
     width: 85vmin;
     border-radius: 0.5rem;
-    padding: .7rem 1.3rem .9rem;
+    padding: 0.7rem 1.3rem 0.9rem;
+    margin-top: 5rem;
 }
-.info_header{
-    padding-bottom: .6rem;
+
+.info_header {
+    padding-bottom: 0.6rem;
 }
 
 .info-icon {
     color: var(--green);
 }
-.error{
+
+.error {
     background: #fcd4dc;
     width: 85vmin;
     border-radius: 0.5rem;
-    padding: .7rem 1.3rem .9rem;
-}
+    padding: 0.7rem 1.3rem 0.9rem;
+}