Applying Functionality
هذا الالتزام موجود في:
11
app.js
11
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 += `<li>${time} : ${times[time]}</li>`
|
||||
}
|
||||
document.getElementById("times_container").innerHTML = container
|
||||
}
|
||||
|
||||
document.getElementById("getTimes").onclick = ()=> getTimes(city.value, code.value)
|
||||
|
@@ -7,16 +7,17 @@
|
||||
<body>
|
||||
<h1>Get Praying Times Anywhere </h1>
|
||||
<div class="block">
|
||||
<label class="city_label">Enter Your City Name</label>
|
||||
<label id="city_label">Enter Your City Name</label>
|
||||
<input id="city">
|
||||
</div>
|
||||
<div class="block">
|
||||
<label class="code_label">Enter The Country Code</label>
|
||||
<label id="code_label">Enter The Country Code</label>
|
||||
<input id="code">
|
||||
</div>
|
||||
<div class="show">
|
||||
<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>
|
||||
</body>
|
||||
<script src="app.js"></script>
|
||||
|
12
index.pug
12
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")
|
||||
|
@@ -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 */
|
||||
|
@@ -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: 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
|
||||
|
المرجع في مشكلة جديدة
حظر مستخدم