Applying Functionality
هذا الالتزام موجود في:
11
app.js
11
app.js
@@ -1,8 +1,17 @@
|
|||||||
|
city.focus();
|
||||||
async function getTimes(city, countryCode){
|
async function getTimes(city, countryCode){
|
||||||
console.log("Starting . . .")
|
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 response = await fetch(`http://api.aladhan.com/v1/timingsByCity?city=${city}&country=${countryCode}`)
|
||||||
const parsedResponse = await response.json();
|
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 += `<li>${time} : ${times[time]}</li>`
|
||||||
|
}
|
||||||
|
document.getElementById("times_container").innerHTML = container
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById("getTimes").onclick = ()=> getTimes(city.value, code.value)
|
document.getElementById("getTimes").onclick = ()=> getTimes(city.value, code.value)
|
||||||
|
@@ -7,16 +7,17 @@
|
|||||||
<body>
|
<body>
|
||||||
<h1>Get Praying Times Anywhere </h1>
|
<h1>Get Praying Times Anywhere </h1>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<label class="city_label">Enter Your City Name</label>
|
<label id="city_label">Enter Your City Name</label>
|
||||||
<input id="city">
|
<input id="city">
|
||||||
</div>
|
</div>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<label class="code_label">Enter The Country Code</label>
|
<label id="code_label">Enter The Country Code</label>
|
||||||
<input id="code">
|
<input id="code">
|
||||||
</div>
|
</div>
|
||||||
<div class="show">
|
<div class="show">
|
||||||
<button id="getTimes">Get Times</button>
|
<button id="getTimes">Get Times</button>
|
||||||
<h3>Here is the praying times of <span id="show_city"> </span>and </h3><span id="show_country"> </span>
|
<h3>Here is the praying times of <span id="show_city"> ____________ </span>City, and <span id="show_country">______ </span>country</h3>
|
||||||
|
<ul id="times_container"></ul>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<script src="app.js"></script>
|
<script src="app.js"></script>
|
||||||
|
12
index.pug
12
index.pug
@@ -7,15 +7,17 @@ html
|
|||||||
h1 Get Praying Times Anywhere
|
h1 Get Praying Times Anywhere
|
||||||
|
|
||||||
.block
|
.block
|
||||||
label.city_label Enter Your City Name
|
label#city_label Enter Your City Name
|
||||||
input#city
|
input#city
|
||||||
.block
|
.block
|
||||||
label.code_label Enter The Country Code
|
label#code_label Enter The Country Code
|
||||||
input#code
|
input#code
|
||||||
.show
|
.show
|
||||||
button#getTimes Get Times
|
button#getTimes Get Times
|
||||||
h3 Here is the praying times of
|
h3 Here is the praying times of
|
||||||
span#show_city
|
span#show_city ____________
|
||||||
| and
|
| City, and
|
||||||
span#show_country
|
span#show_country ______
|
||||||
|
| country
|
||||||
|
ul#times_container
|
||||||
script(src="app.js")
|
script(src="app.js")
|
||||||
|
@@ -23,6 +23,9 @@ input {
|
|||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -38,4 +41,9 @@ button {
|
|||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #991111;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=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"}
|
{"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"}
|
@@ -17,7 +17,8 @@ input
|
|||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
border: none
|
border: none
|
||||||
width: 100%
|
width: 100%
|
||||||
|
&:focus
|
||||||
|
outline: none
|
||||||
label
|
label
|
||||||
display: block
|
display: block
|
||||||
margin: 10px 0
|
margin: 10px 0
|
||||||
@@ -29,3 +30,6 @@ button
|
|||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
width: max(220px, 100%)
|
width: max(220px, 100%)
|
||||||
margin: 20px auto
|
margin: 20px auto
|
||||||
|
span
|
||||||
|
color: #991111
|
||||||
|
font-weight: bold
|
||||||
|
المرجع في مشكلة جديدة
حظر مستخدم