diff --git a/app.js b/app.js
index fccb249..0380395 100644
--- a/app.js
+++ b/app.js
@@ -1,8 +1,17 @@
+city.focus();
async function getTimes(city, countryCode){
console.log("Starting . . .")
+ 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();
- console.log(parsedResponse.data.timings)
+ const times = parsedResponse.data.timings
+ let container = ""
+ for (const time in times) {
+ console.log(time + " : " + times[time])
+ container += `${time} : ${times[time]}`
+ }
+ document.getElementById("times_container").innerHTML = container
}
document.getElementById("getTimes").onclick = ()=> getTimes(city.value, code.value)
diff --git a/index.html b/index.html
index 9d23130..d1209a1 100644
--- a/index.html
+++ b/index.html
@@ -7,16 +7,17 @@
Get Praying Times Anywhere
-
+
-
+
-
Here is the praying times of and
+
Here is the praying times of ____________ City, and ______ country
+
diff --git a/index.pug b/index.pug
index cd06a23..5fb5672 100644
--- a/index.pug
+++ b/index.pug
@@ -7,15 +7,17 @@ html
h1 Get Praying Times Anywhere
.block
- label.city_label Enter Your City Name
+ label#city_label Enter Your City Name
input#city
.block
- label.code_label Enter The Country Code
+ label#code_label Enter The Country Code
input#code
.show
button#getTimes Get Times
h3 Here is the praying times of
- span#show_city
- | and
- span#show_country
+ span#show_city ____________
+ | City, and
+ span#show_country ______
+ | country
+ ul#times_container
script(src="app.js")
diff --git a/style.css b/style.css
index 4e56263..cf32cb8 100644
--- a/style.css
+++ b/style.css
@@ -23,6 +23,9 @@ input {
border: none;
width: 100%;
}
+input:focus {
+ outline: none;
+}
label {
display: block;
@@ -38,4 +41,9 @@ button {
margin: 20px auto;
}
+span {
+ color: #991111;
+ font-weight: bold;
+}
+
/*# sourceMappingURL=style.css.map */
diff --git a/style.css.map b/style.css.map
index 5ef72a7..80fb9f8 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;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"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
diff --git a/style.sass b/style.sass
index b166939..0c78436 100644
--- a/style.sass
+++ b/style.sass
@@ -17,7 +17,8 @@ input
border-radius: 5px
border: none
width: 100%
-
+ &:focus
+ outline: none
label
display: block
margin: 10px 0
@@ -29,3 +30,6 @@ button
border-radius: 5px
width: max(220px, 100%)
margin: 20px auto
+span
+ color: #991111
+ font-weight: bold