
كيفية الاستخدام
أنشئ ملف HTML (مثل index.html) وضع فيه كود HTML
أنشئ ملف CSS (مثل styles.css) وضع فيه كود CSS
أنشئ ملف JavaScript (مثل script.js) وضع فيه كود JavaScript
افتح ملف index.html في المتصفح
ملاحظات
تأكد من أنك متصل بالإنترنت لأن الكود يستخدم خدمات خارجية للحصول على معلومات
الموقع وعلم الدولة
الكود لـ styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
}
.flag img {
width: 150px;
height: auto;
}
الكود لـ script.js
// استخدم واجهة برمجة التطبيقات للحصول على معلومات الموقع
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
const countryCode = data.country.toLowerCase(); // رمز الدولة
const flagUrl = `https://restcountries.com/v3.1/flags/${countryCode}.svg`;
const flagContainer = document.getElementById('flag');
const img = document.createElement('img');
img.src = flagUrl;
img.alt = `علم ${data.country_name}`;
flagContainer.appendChild(img);
})
.catch(error => {
console.error('Error fetching data:', error);
});
الكود لـ index.html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>علم الدولة الزائر</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>علم دولتك</h1>
<div id="flag" class="flag"></div>
<script src="script.js"></script>
</body>
</html>
تم تطويره : script.js تم تعديل الرابط على مجلد
بس عليك تغير اعلام الدول
من Kuwait
الى حرفين
kw
وتم تعديل صيغه الصوره الى
gif
// استخدم واجهة برمجة التطبيقات للحصول على معلومات الموقعfetch('https://ipapi.co/json/').then(response => response.json()).then(data => {const countryCode = data.country.toLowerCase(); // رمز الدولة// تعديل رابط العلم إلى مجلد "flags" واستخدام اسم الدولة بالكاملconst flagUrl = `flags/${countryCode}.gif`;const flagContainer = document.getElementById('flag');const img = document.createElement('img');img.src = flagUrl;img.alt = `علم ${data.country_name}`;flagContainer.appendChild(img);}).catch(error => {console.error('Error fetching data:', error);});
وسلامتكم
ليست هناك تعليقات: