From 7e7a593bf63740f3ba82972d6f1765c78df85375 Mon Sep 17 00:00:00 2001
From: MuhammadFarouk12 <muhammad12fk@gmail.com>
Date: Tue, 19 Aug 2025 02:20:06 +0300
Subject: [PATCH] Finshing the main features

---
 app.js        | 21 ++++++++++++---------
 style.css     | 17 +++++++++++++++++
 style.css.map |  2 +-
 style.sass    | 38 +++++++++++++++++++++++++++++++++++++-
 4 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/app.js b/app.js
index 0380395..9629a9c 100644
--- a/app.js
+++ b/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)
diff --git a/style.css b/style.css
index cf32cb8..5c85621 100644
--- a/style.css
+++ b/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 */
diff --git a/style.css.map b/style.css.map
index 80fb9f8..7665e6a 100644
--- a/style.css.map
+++ b/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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/style.sass b/style.sass
index 0c78436..7040a05 100644
--- a/style.sass
+++ b/style.sass
@@ -5,7 +5,9 @@
 
 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+