اخر المواضيع

آخر الأخبار
إختر لونك المفضل

عرض المحتوي

بحث

السبت، 5 أكتوبر 2024

علم الدولة لزائر State flag for visitor برمجه ويب

السفراني | أكتوبر 05, 2024 |
السلام عليكم

كيفية الاستخدام
أنشئ ملف 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);
});
وسلامتكم
author

ليست هناك تعليقات:

اضف تعليقك هنا