adding the feature "show five"

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)

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>

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 

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 */

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"}
+{"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"}

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