كيفية الاستخدام
أنشئ ملف 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>
وسلامتكم
ليست هناك تعليقات: