diff --git a/app.js b/app.js
index 9629a9c..d9b20f2 100644
--- a/app.js
+++ b/app.js
@@ -1,5 +1,5 @@
city.focus();
-async function getTimes(city, countryCode){
+async function getTimes(city, countryCode, wantsAll){
document.getElementById("city").focus()
document.getElementById("show_city").innerText = city.toUpperCase() + " City "
document.getElementById("show_country").innerText = countryCode.toUpperCase() + " Country"
@@ -8,8 +8,17 @@ async function getTimes(city, countryCode){
const parsedResponse = await response.json();
const times = parsedResponse.data.timings
let container = ""
+ let current = 0
for (const time in times) {
- container += `
${time}${times[time]}`
+ if (wantsAll) {
+ container += `${time}${times[time]}`
+ } else {
+ const fiveTimes = [0, 2, 3, 5, 6]
+ if(fiveTimes.includes(current)){
+ container += `${time}${times[time]}`
+ }
+ current++
+ }
}
document.getElementById("times_container").innerHTML = container
} catch(err){
@@ -17,4 +26,4 @@ async function getTimes(city, countryCode){
}
}
-document.getElementById("getTimes").onclick = ()=> getTimes(city.value, code.value)
+document.getElementById("getTimes").onclick = ()=> getTimes(city.value, code.value, document.getElementById("wantsAll").checked)
diff --git a/index.html b/index.html
index d1209a1..7a28aa4 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,10 @@
+
+
+
+
Here is the praying times of ____________ City, and ______ country
diff --git a/index.pug b/index.pug
index 5fb5672..65d6eb4 100644
--- a/index.pug
+++ b/index.pug
@@ -12,6 +12,9 @@ html
.block
label#code_label Enter The Country Code
input#code
+ .show_all
+ label(for="wantsAll") Do you want to show all times ? uncheck the box to get only the 5 prayings
+ input#wantsAll(type="checkbox", name="wantsAll")
.show
button#getTimes Get Times
h3 Here is the praying times of
diff --git a/style.css b/style.css
index 5c85621..5dc38cc 100644
--- a/style.css
+++ b/style.css
@@ -21,19 +21,19 @@ div {
width: min(800px, 90%);
}
-input {
+input:not([type=checkbox]) {
padding: 10px 20px;
border-radius: 5px;
border: none;
width: 100%;
}
-input:focus {
+input:not([type=checkbox]):focus {
outline: none;
}
label {
display: block;
- margin: 10px 0;
+ margin: 0px 0 10px;
}
button {
@@ -63,4 +63,15 @@ span {
text-align: center;
}
+.show_all {
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+}
+.show_all input {
+ width: 20px;
+ height: 20px;
+}
+
/*# sourceMappingURL=style.css.map */
diff --git a/style.css.map b/style.css.map
index 7665e6a..ad3435b 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;;;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
+{"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;;;AAEJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AACF;EACE;;;AACF;EACE;EACA;;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;;AACF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/style.sass b/style.sass
index 7040a05..2e2c0ac 100644
--- a/style.sass
+++ b/style.sass
@@ -14,16 +14,17 @@ body
div
margin: 20px auto
width: min(800px, 90%)
-input
+input:not([type=checkbox])
padding: 10px 20px
border-radius: 5px
border: none
width: 100%
&:focus
outline: none
+input[type=checkbox]
label
display: block
- margin: 10px 0
+ margin: 0px 0 10px
button
padding: 10px 20px
@@ -44,8 +45,15 @@ span
margin: 10px -1px
width: 50%
text-align: center
-
-
+.show_all
+ text-align: center
+ display: flex
+ justify-content: center
+ gap: 20px
+ label
+ input
+ width: 20px
+ height: 20px