From d9741b878aad0639146356b9cab2dea659cae62b Mon Sep 17 00:00:00 2001
From: MuhammadFarouk12 <muhammad12fk@gmail.com>
Date: Tue, 19 Aug 2025 03:09:38 +0300
Subject: [PATCH] adding the feature "show five"

---
 app.js        | 15 ++++++++++++---
 index.html    |  4 ++++
 index.pug     |  3 +++
 style.css     | 17 ++++++++++++++---
 style.css.map |  2 +-
 style.sass    | 16 ++++++++++++----
 6 files changed, 46 insertions(+), 11 deletions(-)

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 += `<li><span class="cell">${time}</span><span class="cell">${times[time]}</span></li>`
+      if (wantsAll) {
+        container += `<li><span class="cell">${time}</span><span class="cell">${times[time]}</span></li>`
+      } else {
+        const fiveTimes = [0, 2, 3, 5, 6]
+        if(fiveTimes.includes(current)){
+          container += `<li><span class="cell">${time}</span><span class="cell">${times[time]}</span></li>`
+        }
+        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 @@
       <label id="code_label">Enter The Country Code</label>
       <input id="code">
     </div>
+    <div class="show_all">
+      <label for="wantsAll">Do you want to show all times ? uncheck the box to get only the 5 prayings</label>
+      <input id="wantsAll" type="checkbox" name="wantsAll">
+    </div>
     <div class="show"> 
       <button id="getTimes">Get Times</button>
       <h3>Here is the praying times of <span id="show_city"> ____________ </span>City, and <span id="show_country">______  </span>country</h3>
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