diff --git a/index.html b/index.html
index 2e1af51..4f78f6d 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
+
@@ -7,12 +8,15 @@
Document
+
+
+
diff --git a/script.js b/script.js
index 14df777..8e870cf 100644
--- a/script.js
+++ b/script.js
@@ -15,17 +15,26 @@ 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 `
- ${result.name}
`;
+function res2Html(result) {
+ if (result.length == 0 ){
+ return `Not found
`;
+ }
+ result = result[0];
+ return `
+
+
+
${result.name}
+
+`;
}
async function response(e) {
@@ -33,7 +42,7 @@ async function response(e) {
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
index 0b03f73..561b11d 100644
--- 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);
}
\ No newline at end of file