Finshing the main features

app.js

@@ -1,17 +1,20 @@
 city.focus();
 async function getTimes(city, countryCode){
-  console.log("Starting . . .")
+  document.getElementById("city").focus()
   document.getElementById("show_city").innerText = city.toUpperCase() + " City "
   document.getElementById("show_country").innerText = countryCode.toUpperCase() + " Country"
-  const response = await fetch(`http://api.aladhan.com/v1/timingsByCity?city=${city}&country=${countryCode}`)
-  const parsedResponse = await response.json();
-  const times = parsedResponse.data.timings
-  let container = ""
-  for (const time in times) {
-    console.log(time + " : " + times[time])
-    container += `<li>${time} : ${times[time]}</li>`
-  }
+  try {
+    const response = await fetch(`http://api.aladhan.com/v1/timingsByCity?city=${city}&country=${countryCode}`)
+    const parsedResponse = await response.json();
+    const times = parsedResponse.data.timings
+    let container = ""
+    for (const time in times) {
+      container += `<li><span class="cell">${time}</span><span class="cell">${times[time]}</span></li>`
+    }
     document.getElementById("times_container").innerHTML = container
+  } catch(err){
+    console.log("Faild: " + err.message)
+  }
 }
 
 document.getElementById("getTimes").onclick = ()=> getTimes(city.value, code.value)

style.css

@@ -8,6 +8,10 @@ h1 {
   text-align: center;
 }
 
+h3 {
+  text-align: center;
+}
+
 body {
   background-color: #E1DC9F;
 }
@@ -41,9 +45,22 @@ button {
   margin: 20px auto;
 }
 
+li {
+  list-style: none;
+}
+
 span {
   color: #991111;
   font-weight: bold;
 }
 
+.cell {
+  border: 3px solid #991111;
+  padding: 10px 20px;
+  display: inline-block;
+  margin: 10px -1px;
+  width: 50%;
+  text-align: center;
+}
+
 /*# sourceMappingURL=style.css.map */

style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AACJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AACF;EACE;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAEF;EACE;;;AACF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AACJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AACF;EACE;;;AACF;EACE;EACA;;;AACF;EACE;EACA;EACA;EACA;EACA;EACA","file":"style.css"}

style.sass

@@ -5,6 +5,8 @@
 
 h1 
   text-align: center
+h3
+  text-align: center
    
 body 
   background-color: #E1DC9F
@@ -30,6 +32,40 @@ button
   border-radius: 5px
   width: max(220px, 100%)
   margin: 20px auto
+li
+  list-style: none
 span 
   color: #991111
   font-weight: bold
+.cell 
+  border: 3px solid #991111 
+  padding: 10px 20px
+  display: inline-block
+  margin: 10px -1px
+  width: 50%
+  text-align: center
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+