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;
+}