made style edits

nyakotey · Aug 24, 2022 · 8709472 · 8709472
1 parent 1ec1bce
commit 8709472
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -6,16 +6,24 @@
     <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="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"/>
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
+    <header class="header">Call Codes Checker</header>
     <section class="input">
-        <input class="input_box" type="text" name="input-code" id="input-code" placeholder="+XXX">
+        <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"></section> -->
+    <section class="info">
+        <p class="info_header"><i class="fas fa-circle-info info-icon"></i>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
@@ -16,7 +16,7 @@ function submitOnEnter(e) {
 }
 function getQuery(e) {
         query = e.target.value;
-        input.value = "";
+        // input.value = "";
         return query;
 }
 
@@ -31,8 +31,8 @@ function res2Html(result) {
     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 class="country_flag"><img src="${result.flag}" alt="" class="country_flag_img"></div>
 </div>    
 `;
 }
@@ -47,4 +47,16 @@ async function response(e) {
 
 input.addEventListener("enter", response);
 input.addEventListener("keydown", submitOnEnter);
-submitButton.addEventListener("click",response);
+submitButton.addEventListener("click",response);
+
+function tests(){
+    const randomCountry = () => {
+        countries = ["+255","+241","+239","+237"];
+        i = Math.floor(Math.random() * countries.length);
+        return countries[i];
+    }
+    const fake = {
+        target: {value: randomCountry()}
+    }
+    response(fake);
+}
diff --git a/style.css b/style.css
@@ -1,55 +1,86 @@
-*,
-*::before,
-*::after{
-    margin:0;
-    padding:0;
+* {
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
     position: relative;
-    font-family:Verdana, Geneva, Tahoma, sans-serif
+    font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif;
 }
-*::before,
-*::after{
-    content:'';
-    position: absolute;
-}
-:root{
+:root {
     --black: #111;
     --red: #f2023f;
-    --belly: #e4c5a8;
-    --beak: #fab92b;
-    --info: #a8afaf;
+    --green: #66a583;
+    --unset: #fafafa;
+    --info: #d9f3e4;
+    --header: #5c6263;
     --dev-outline: solid lime 2px;
 }
-body{
+body {
     width: 100vw;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: space-evenly;
-    background-color: rgb(255, 255, 255);
+    background-color: #ffffff;
     flex-flow: column nowrap;
+    background: var(--unset);
 }
-/* .input{
+/* body > * {
+    border: var(--dev-outline);
 } */
-.input_box{
-    width: 50vmin;
+.header {
+    position: absolute;
+    top: 0;
+    padding: 0.8rem;
+    width: 100%;
+    text-align: center;
+    color: white;
+    background: var(--header);
+}
+.input {
+    width: 85vmin;
+    display: flex;
+}
+.input_box {
+    width: 70%;
     height: 2.8rem;
     font-size: 1.2rem;
 }
-.input_submit{
+.input_submit {
+    width: 30%;
     padding: 0.7rem 1.6rem;
     border-radius: 0.3rem;
     border: none;
     font-size: 1.14rem;
 }
-.country_flag{
-    width: 40vmin;
+.country {
+    display: flex;
+    /* justify-content: center;
+    align-items: center; */
+    gap: .8rem;
+    flex-direction: column;
+}
+.display{
+    width: 85vmin;
+}
+.country_flag {
     height: 25vmin;
-    border-radius: 0.4rem;
+    overflow: hidden;
+}
+.country_flag_img {
+    object-fit: contain;
+    width: auto;
+    height: 100%;
+    border-radius: 0.3rem;
 }
-.country_name{
+.country_name {
     font-size: 1.3rem;
 }
-.info{
+.info {
     background: var(--info);
-}
+    width: 85vmin;
+    border-radius: 0.5rem;
+    padding: 1rem;
+}
+.info-icon {
+    color: var(--green);
+}