Applying Functionality

هذا الالتزام موجود في:
2025-08-19 01:21:37 +03:00
الأصل dbf92521ff
التزام 227a985c2f
6 ملفات معدلة مع 35 إضافات و11 حذوفات

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>

عرض الملف

@@ -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