💻 Full Working Code
📁 index.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>Fetch API kwa Dynamic Content - Faulink</title>
<style>
body { font-family: Arial; text-align: center; background: #f3f6fa; padding: 40px; }
button { padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; }
#data { margin-top: 30px; background: #fff; padding: 20px; border-radius: 10px; width: 300px; display: inline-block; }
</style>
</head>
<body>

<h2>📡 Kutumia JS Fetch API kwa Dynamic Content</h2>
<button id="loadBtn">Pata Data</button>
<div id="data">Hakuna data bado...</div>

<script>
document.getElementById("loadBtn").onclick = function(){
fetch("fetch_data.php")
.then(res => res.text())
.then(data => document.getElementById("data").innerHTML = data)
.catch(err => document.getElementById("data").innerHTML = "❌ Hitilafu: " + err);
};
</script>

</body>
</html>
📁 fetch_data.php
<?php
date_default_timezone_set('Africa/Dar_es_Salaam');
$time = date("H:i:s");
echo "✅ Data imepokelewa kutoka PHP saa: $time";
?>
________________________________________
🎥 YouTube Description
Fetch API ni mbadala wa kisasa wa XMLHttpRequest kwenye JavaScript.
Inafanya kazi kwa urahisi na Promises, na inasaidia kutuma requests na kupokea data (JSON, text, HTML n.k.) kutoka backend ya PHP.
💡 Ni msingi wa teknolojia nyingi kama React, Vue, na APIs.
🔔 Jiunge na Faulink Channel kwa masomo zaidi ya kisasa ya Web Development!
________________________________________
🏷️ Hashtags
#FetchAPI #JavaScript #PHP #AJAX #WebDevelopment #Faulink #Coding #Frontend #LearnCoding