Type of API architecture commonly used with Node.js
📦 General
✨ The Prompt Phrase
RESTful API
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>شرح RESTful API - دليل شامل بالعربية</title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
:root {
--primary: #667eea;
--secondary: #764ba2;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
--dark: #1e293b;
--light: #f8fafc;
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Cairo', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--dark);
line-height: 1.8;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Hero Section */
.hero {
background: white;
border-radius: 30px;
padding: 60px 40px;
text-align: center;
margin: 40px 0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: fadeInDown 0.8s ease-out;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero h1 {
font-size: 3.5rem;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
font-weight: 900;
}
.hero p {
font-size: 1.5rem;
color: #64748b;
margin-bottom: 30px;
}
.emoji-large {
font-size: 4rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Card Styles */
.card {
background: white;
border-radius: 20px;
padding: 40px;
margin: 30px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: fadeInUp 0.8s ease-out;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-title {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 20px;
font-weight: 700;
display: flex;
align-items: center;
gap: 15px;
}
.card-title .emoji {
font-size: 3rem;
}
/* Restaurant Example */
.restaurant-example {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin: 30px 0;
}
.restaurant-card {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
padding: 30px;
border-radius: 20px;
color: white;
text-align: center;
transition: transform 0.3s ease;
}
.restaurant-card:hover {
transform: scale(1.05);
}
.restaurant-card .icon {
font-size: 4rem;
margin-bottom: 15px;
}
.restaurant-card h3 {
font-size: 1.8rem;
margin-bottom: 10px;
}
/* HTTP Methods Table */
.methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.method-card {
padding: 30px;
border-radius: 15px;
text-align: center;
color: white;
transition: transform 0.3s ease;
cursor: pointer;
}
.method-card:hover {
transform: scale(1.05) rotate(2deg);
}
.method-get {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.method-post {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.method-put {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.method-patch {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
.method-delete {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}
.method-card .method-name {
font-size: 2rem;
font-weight: 700;
margin-bottom: 10px;
}
.method-card .emoji {
font-size: 3rem;
display: block;
margin-bottom: 15px;
}
/* Code Block */
.code-block {
background: #1e293b;
color: #e2e8f0;
padding: 25px;
border-radius: 15px;
margin: 20px 0;
font-family: 'Courier New', monospace;
font-size: 1rem;
overflow-x: auto;
direction: ltr;
text-align: left;
position: relative;
}
.code-block::before {
content: 'كود';
position: absolute;
top: 10px;
right: 10px;
background: var(--primary);
color: white;
padding: 5px 15px;
border-radius: 8px;
font-size: 0.8rem;
font-family: 'Cairo', sans-serif;
}
.code-comment {
color: #6a9955;
}
.code-keyword {
color: #569cd6;
}
.code-string {
color: #ce9178;
}
.code-function {
color: #dcdcaa;
}
/* Interactive Demo */
.demo-container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px;
border-radius: 20px;
margin: 30px 0;
color: white;
}
.demo-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin: 20px 0;
justify-content: center;
}
.demo-btn {
padding: 15px 30px;
border: none;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Cairo', sans-serif;
display: flex;
align-items: center;
gap: 10px;
}
.demo-btn:hover {
transform: scale(1.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.btn-get {
background: #10b981;
color: white;
}
.btn-post {
background: #3b82f6;
color: white;
}
.btn-delete {
background: #ef4444;
color: white;
}
.demo-output {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 15px;
margin-top: 20px;
min-height: 150px;
font-family: 'Courier New', monospace;
direction: ltr;
text-align: left;
}
/* Status Codes */
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.status-card {
padding: 25px;
border-radius: 15px;
text-align: center;
color: white;
font-weight: 600;
}
.status-2xx {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.status-3xx {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.status-4xx {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.status-5xx {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}
.status-card .code {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 10px;
}
/* Info Boxes */
.info-box {
padding: 25px;
border-radius: 15px;
margin: 20px 0;
border-right: 5px solid;
}
.info-box.success {
background: rgba(16, 185, 129, 0.1);
border-color: var(--success);
}
.info-box.info {
background: rgba(59, 130, 246, 0.1);
border-color: var(--info);
}
.info-box.warning {
background: rgba(245, 158, 11, 0.1);
border-color: var(--warning);
}
.info-box.danger {
background: rgba(239, 68, 68, 0.1);
border-color: var(--danger);
}
.info-box h3 {
margin-bottom: 10px;
font-size: 1.5rem;
}
/* Principles */
.principles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin: 30px 0;
}
.principle-card {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
padding: 30px;
border-radius: 20px;
transition: transform 0.3s ease;
}
.principle-card:hover {
transform: translateY(-10px);
}
.principle-card .number {
font-size: 3rem;
font-weight: 900;
color: var(--primary);
margin-bottom: 10px;
}
.principle-card h3 {
font-size: 1.8rem;
margin-bottom: 10px;
color: var(--dark);
}
/* Quiz Section */
.quiz-container {
background: white;
padding: 40px;
border-radius: 20px;
margin: 30px 0;
}
.quiz-option {
background: #f1f5f9;
padding: 20px;
margin: 15px 0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
border: 3px solid transparent;
}
.quiz-option:hover {
background: #e2e8f0;
transform: translateX(-10px);
}
.quiz-option.correct {
background: rgba(16, 185, 129, 0.2);
border-color: var(--success);
}
.quiz-option.wrong {
background: rgba(239, 68, 68, 0.2);
border-color: var(--danger);
}
/* Footer */
.footer {
background: white;
padding: 40px;
border-radius: 20px;
text-align: center;
margin: 40px 0;
}
.rating-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.rating-btn {
padding: 15px 30px;
border: none;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Cairo', sans-serif;
}
.rating-btn:hover {
transform: scale(1.1);
}
.rating-1 { background: #ef4444; color: white; }
.rating-2 { background: #f59e0b; color: white; }
.rating-3 { background: #3b82f6; color: white; }
.rating-4 { background: #10b981; color: white; }
.rating-5 { background: #8b5cf6; color: white; }
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1.2rem;
}
.card-title {
font-size: 1.8rem;
}
.card {
padding: 25px;
}
}
/* Animations */
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<!-- Hero Section -->
<div class="hero">
<div class="emoji-large">🌐</div>
<h1>RESTful API</h1>
<p>دليل شامل وممتع لفهم واجهات البرمجة الحديثة</p>
<p style="font-size: 1.2rem; color: #94a3b8;">شرح مبسط للمبتدئين بالعربية 🚀</p>
</div>
<!-- What is REST -->
<div class="card">
<h2 class="card-title">
<span class="emoji">🤔</span>
ما هو RESTful API؟
</h2>
<p style="font-size: 1.3rem; margin-bottom: 20px;">
<strong>REST</strong> تعني: <strong>Representational State Transfer</strong>
<br>
بالعربية: <strong>نقل الحالة التمثيلية</strong>
</p>
<div class="info-box info">
<h3>🎯 التعريف المبسط</h3>
<p style="font-size: 1.2rem;">
RESTful API هو طريقة معيارية لبناء واجهات برمجية تسمح للتطبيقات بالتواصل مع بعضها عبر الإنترنت باستخدام بروتوكول HTTP!
</p>
</div>
</div>
<!-- Restaurant Analogy -->
<div class="card">
<h2 class="card-title">
<span class="emoji">🍽️</span>
مثال المطعم (لفهم أسهل!)
</h2>
<div class="restaurant-example">
<div class="restaurant-card">
<div class="icon">👤</div>
<h3>أنت (العميل)</h3>
<p>التطبيق أو المتصفح الذي يطلب البيانات</p>
</div>
<div class="restaurant-card">
<div class="icon">🎩</div>
<h3>النادل (API)</h3>
<p>الوسيط الذي ينقل طلباتك بطريقة منظمة</p>
</div>
<div class="restaurant-card">
<div class="icon">👨🍳</div>
<h3>المطبخ (السيرفر)</h3>
<p>قاعدة البيانات التي تعالج وتحضر البيانات</p>
</div>
</div>
<div class="info-box success">
<h3>✨ الفكرة الأساسية</h3>
<p style="font-size: 1.2rem;">
مثل ما تطلب من النادل "أحضر لي قائمة الطعام" أو "أضف طلب جديد"، كذلك يعمل الـ API - تطلب بيانات أو تضيف أو تحذف باستخدام أوامر محددة!
</p>
</div>
</div>
<!-- HTTP Methods -->
<div class="card">
<h2 class="card-title">
<span class="emoji">🎬</span>
أفعال HTTP (الأوامر الأساسية)
</h2>
<p style="font-size: 1.2rem; margin-bottom: 30px;">
هذه هي "الأوامر" التي تستخدمها للتعامل مع البيانات:
</p>
<div class="methods-grid">
<div class="method-card method-get">
<span class="emoji">📖</span>
<div class="method-name">GET</div>
<p>اقرأ / احضر البيانات</p>
<p style="margin-top: 10px; font-size: 0.9rem;">مثل: احضر قائمة المستخدمين</p>
</div>
<div class="method-card method-post">
<span class="emoji">➕</span>
<div class="method-name">POST</div>
<p>أضف / أنشئ بيانات جديدة</p>
<p style="margin-top: 10px; font-size: 0.9rem;">مثل: أضف مستخدم جديد</p>
</div>
<div class="method-card method-put">
<span class="emoji">✏️</span>
<div class="method-name">PUT</div>
<p>حدّث البيانات بالكامل</p>
<p style="margin-top: 10px; font-size: 0.9rem;">مثل: حدّث جميع بيانات المستخدم</p>
</div>
<div class="method-card method-patch">
<span class="emoji">🔧</span>
<div class="method-name">PATCH</div>
<p>حدّث جزء من البيانات</p>
<p style="margin-top: 10px; font-size: 0.9rem;">مثل: غيّر البريد الإلكتروني فقط</p>
</div>
<div class="method-card method-delete">
<span class="emoji">🗑️</span>
<div class="method-name">DELETE</div>
<p>احذف البيانات</p>
<p style="margin-top: 10px; font-size: 0.9rem;">مثل: احذف المستخدم</p>
</div>
</div>
</div>
<!-- Live Example -->
<div class="card">
<h2 class="card-title">
<span class="emoji">💻</span>
مثال حي - نظام مكتبة إلكترونية
</h2>
<div class="code-block">
<span class="code-comment">// 1️⃣ GET - عرض جميع الكتب</span>
GET /api/books
Response: [
{ "id": 1, "title": "تعلم JavaScript", "author": "أحمد" },
{ "id": 2, "title": "Python للمبتدئين", "author": "فاطمة" }
]
<span class="code-comment">// 2️⃣ GET - عرض كتاب محدد</span>
GET /api/books/1
Response: { "id": 1, "title": "تعلم JavaScript", "author": "أحمد" }
<span class="code-comment">// 3️⃣ POST - إضافة كتاب جديد</span>
POST /api/books
Body: { "title": "React المتقدم", "author": "سارة" }
Response: { "id": 3, "title": "React المتقدم", "author": "سارة" }
<span class="code-comment">// 4️⃣ PUT - تحديث كتاب</span>
PUT /api/books/3
Body: { "title": "React للمحترفين", "author": "سارة" }
<span class="code-comment">// 5️⃣ DELETE - حذف كتاب</span>
DELETE /api/books/3
Response: { "message": "تم الحذف بنجاح" }
</div>
</div>
<!-- Interactive Demo -->
<div class="demo-container">
<h2 style="font-size: 2.5rem; margin-bottom: 20px; text-align: center;">
🎮 جرب بنفسك!
</h2>
<p style="font-size: 1.3rem; text-align: center; margin-bottom: 30px;">
اضغط على الأزرار لترى كيف يعمل كل فعل HTTP:
</p>
<div class="demo-buttons">
<button class="demo-btn btn-get" onclick="demoGet()">
<span>📖</span>
<span>GET - اقرأ البيانات</span>
</button>
<button class="demo-btn btn-post" onclick="demoPost()">
<span>➕</span>
<span>POST - أضف بيانات</span>
</button>
<button class="demo-btn btn-delete" onclick="demoDelete()">
<span>🗑️</span>
<span>DELETE - احذف</span>
</button>
</div>
<div class="demo-output" id="demoOutput">
<div style="color: rgba(255,255,255,0.7); text-align: center;">
اضغط على أي زر لترى النتيجة...
</div>
</div>
</div>
<!-- Stateless Concept -->
<div class="card">
<h2 class="card-title">
<span class="emoji">🔄</span>
مفهوم Stateless (عديم الحالة)
</h2>
<p style="font-size: 1.2rem; margin-bottom: 20px;">
معناه: <strong>كل طلب مستقل بذاته!</strong>
</p>
<div class="info-box warning">
<h3>❌ نادل عادي (يتذكرك)</h3>
<p style="font-size: 1.1rem;">
"أهلاً محمد! نفس الطلب المعتاد؟ قهوة بدون سكر صح؟"
</p>
</div>
<div class="info-box success">
<h3>✅ نادل RESTful (لا يتذكرك)</h3>
<p style="font-size: 1.1rem;">
"مرحباً، ما طلبك اليوم؟" (كل مرة تبدأ من الصفر)
</p>
</div>
<div style="margin-top: 20px; padding: 20px; background: #f1f5f9; border-radius: 12px;">
<h3 style="color: var(--primary); margin-bottom: 10px;">🎯 الفوائد:</h3>
<ul style="font-size: 1.1rem; margin-right: 30px;">
<li>السيرفر لا يحتاج تذكر العملاء السابقين</li>
<li>أسرع وأكثر كفاءة ⚡</li>
<li>يمكن توزيع الطلبات على عدة سيرفرات</li>
<li>أسهل في الصيانة والتطوير</li>
</ul>
</div>
</div>
<!-- Status Codes -->
<div class="card">
<h2 class="card-title">
<span class="emoji">📊</span>
رموز الحالة (Status Codes)
</h2>
<p style="font-size: 1.2rem; margin-bottom: 30px;">
الأرقام التي تخبرك إذا نجح الطلب أو فشل:
</p>
<div class="status-grid">
<div class="status-card status-2xx">
<div class="code">2xx</div>
<h3>نجاح ✅</h3>
<p>200 OK - تمام!</p>
<p>201 Created - تم الإنشاء</p>
</div>
<div class="status-card status-3xx">
<div class="code">3xx</div>
<h3>إعادة توجيه 🔄</h3>
<p>301 Moved - انتقل للأبد</p>
<p>302 Found - موجود في مكان آخر</p>
</div>
<div class="status-card status-4xx">
<div class="code">4xx</div>
<h3>خطأ من العميل ⚠️</h3>
<p>400 Bad Request - طلب خاطئ</p>
<p>404 Not Found - غير موجود</p>
</div>
<div class="status-card status-5xx">
<div class="code">5xx</div>
<h3>خطأ من السيرفر 💥</h3>
<p>500 Internal Error - خطأ داخلي</p>
<p>503 Unavailable - غير متاح</p>
</div>
</div>
</div>
<!-- 6 Principles -->
<div class="card">
<h2 class="card-title">
<span class="emoji">🌟</span>
المبادئ الستة للـ REST
</h2>
<div class="principles-grid">
<div class="principle-card">
<div class="number">1️⃣</div>
<h3>Client-Server</h3>
<p>عميل-خادم: الفصل بين الواجهة الأمامية والخلفية</p>
</div>
<div class="principle-card">
<div class="number">2️⃣</div>
<h3>Stateless</h3>
<p>عديم الحالة: كل طلب مستقل ولا يعتمد على السابق</p>
</div>
<div class="principle-card">
<div class="number">3️⃣</div>
<h3>Cacheable</h3>
<p>قابل للتخزين المؤقت: تحسين الأداء والسرعة</p>
</div>
<div class="principle-card">
<div class="number">4️⃣</div>
<h3>Uniform Interface</h3>
<p>واجهة موحدة: قواعد ثابتة للجميع</p>
</div>
<div class="principle-card">
<div class="number">5️⃣</div>
<h3>Layered System</h3>
<p>نظام طبقات: يمكن إضافة طبقات أمان ووسيطة</p>
</div>
<div class="principle-card">
<div class="number">6️⃣</div>
<h3>Code on Demand</h3>
<p>كود عند الطلب: (اختياري) إرسال كود قابل للتنفيذ</p>
</div>
</div>
</div>
<!-- Real Code Example -->
<div class="card">
<h2 class="card-title">
<span class="emoji">👨💻</span>
كود حقيقي بالـ JavaScript
</h2>
<div class="code-block">
<span class="code-comment">// استدعاء API باستخدام Fetch</span>
<span class="code-comment">// 📖 GET - قراءة البيانات</span>
<span class="code-keyword">fetch</span>(<span class="code-string">'https://api.example.com/users'</span>)
.<span class="code-function">then</span>(response => response.<span class="code-function">json</span>())
.<span class="code-function">then</span>(data => console.<span class="code-function">log</span>(data));
<span class="code-comment">// ➕ POST - إضافة بيانات جديدة</span>
<span class="code-keyword">fetch</span>(<span class="code-string">'https://api.example.com/users'</span>, {
<span class="code-keyword">method</span>: <span class="code-string">'POST'</span>,
<span class="code-keyword">headers</span>: { <span class="code-string">'Content-Type'</span>: <span class="code-string">'application/json'</span> },
<span class="code-keyword">body</span>: JSON.<span class="code-function">stringify</span>({
name: <span class="code-string">'محمد'</span>,
email: <span class="code-string">'mohamed@example.com'</span>
})
})
.<span class="code-function">then</span>(response => response.<span class="code-function">json</span>())
.<span class="code-function">then</span>(data => console.<span class="code-function">log</span>(<span class="code-string">'تم الإنشاء:'</span>, data));
<span class="code-comment">// 🗑️ DELETE - حذف بيانات</span>
<span class="code-keyword">fetch</span>(<span class="code-string">'https://api.example.com/users/123'</span>, {
<span class="code-keyword">method</span>: <span class="code-string">'DELETE'</span>
})
.<span class="code-function">then</span>(response => console.<span class="code-function">log</span>(<span class="code-string">'تم الحذف'</span>));
</div>
</div>
<!-- Why REST -->
<div class="card">
<h2 class="card-title">
<span class="emoji">✨</span>
لماذا نستخدم RESTful API؟
</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px;">
<div class="info-box success">
<h3>✅ سهل الفهم</h3>
<p>يستخدم HTTP الموجود أصلاً</p>
</div>
<div class="info-box success">
<h3>🌍 عالمي</h3>
<p>يعمل مع أي لغة برمجة</p>
</div>
<div class="info-box success">
<h3>📈 قابل للتوسع</h3>
<p>يمكن التعامل مع ملايين الطلبات</p>
</div>
<div class="info-box success">
<h3>🏭 معيار صناعي</h3>
<p>تستخدمه كل الشركات الكبرى</p>
</div>
</div>
</div>
<!-- Quiz -->
<div class="quiz-container">
<h2 class="card-title">
<span class="emoji">🎯</span>
اختبر فهمك!
</h2>
<div style="margin-top: 30px;">
<h3 style="font-size: 1.5rem; margin-bottom: 20px;">السؤال: ما هو الفعل HTTP المستخدم لقراءة البيانات؟</h3>
<div class="quiz-option" onclick="checkQuiz(this, false)">
A) POST
</div>
<div class="quiz-option" onclick="checkQuiz(this, true)">
B) GET
</div>
<div class="quiz-option" onclick="checkQuiz(this, false)">
C) DELETE
</div>
<div class="quiz-option" onclick="checkQuiz(this, false)">
D) PUT
</div>
</div>
</div>
<!-- Memory Tip -->
<div class="card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
<h2 style="font-size: 2.5rem; margin-bottom: 20px; text-align: center;">
💭 نصيحة للحفظ
</h2>
<div style="background: rgba(255,255,255,0.2); padding: 30px; border-radius: 15px; text-align: center;">
<p style="font-size: 1.8rem; font-weight: 700; margin-bottom: 15px;">
"REST = مطعم منظم 🍽️"
</p>
<ul style="font-size: 1.3rem; text-align: right; list-style: none;">
<li>✅ النادل (API) يأخذ طلبك</li>
<li>✅ لا يتذكرك في المرة القادمة (Stateless)</li>
<li>✅ يستخدم قائمة موحدة (HTTP Methods)</li>
<li>✅ يعطيك ما طلبته بالضبط (Resources)</li>
</ul>
</div>
</div>
<!-- Rating -->
<div class="footer">
<h2 style="font-size: 2.5rem; margin-bottom: 20px; color: var(--primary);">
📊 كيف تقيم فهمك الآن؟
</h2>
<p style="font-size: 1.3rem; margin-bottom: 30px; color: #64748b;">
اضغط على التقييم المناسب:
</p>
<div class="rating-buttons">
<button class="rating-btn rating-1" onclick="rate(1)">
1 - لا أعرف شيئاً ❌
</button>
<button class="rating-btn rating-2" onclick="rate(2)">
2 - فهم بسيط 🤔
</button>
<button class="rating-btn rating-3" onclick="rate(3)">
3 - فهم جيد 👍
</button>
<button class="rating-btn rating-4" onclick="rate(4)">
4 - فهم ممتاز 🎯
</button>
<button class="rating-btn rating-5" onclick="rate(5)">
5 - إتقان كامل 🏆
</button>
</div>
<div id="ratingResult" style="margin-top: 30px; font-size: 1.5rem; font-weight: 700;"></div>
</div>
<!-- Final Message -->
<div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center;">
<h2 style="font-size: 2.5rem; margin-bottom: 20px;">
🎉 مبروك! أنت الآن تفهم RESTful API
</h2>
<p style="font-size: 1.5rem; margin-bottom: 20px;">
الآن أنت جاهز لبناء واجهات برمجية احترافية! 🚀
</p>
<div style="font-size: 3rem;">
💪 🎯 ✨
</div>
</div>
</div>
<script>
// Demo Functions
function demoGet() {
const output = document.getElementById('demoOutput');
output.innerHTML = `
<div style="color: #10b981; font-weight: bold; margin-bottom: 10px;">✅ GET Request Sent!</div>
<div style="color: white;">
Request: GET /api/books
Response (200 OK):
[
{
"id": 1,
"title": "تعلم JavaScript",
"author": "أحمد",
"price": 50
},
{
"id": 2,
"title": "Python للمبتدئين",
"author": "فاطمة",
"price": 45
}
]
</div>
`;
}
function demoPost() {
const output = document.getElementById('demoOutput');
output.innerHTML = `
<div style="color: #3b82f6; font-weight: bold; margin-bottom: 10px;">✅ POST Request Sent!</div>
<div style="color: white;">
Request: POST /api/books
Body: {
"title": "React المتقدم",
"author": "سارة",
"price": 60
}
Response (201 Created):
{
"id": 3,
"title": "React المتقدم",
"author": "سارة",
"price": 60,
"message": "تم إضافة الكتاب بنجاح! 🎉"
}
</div>
`;
}
function demoDelete() {
const output = document.getElementById('demoOutput');
output.innerHTML = `
<div style="color: #ef4444; font-weight: bold; margin-bottom: 10px;">✅ DELETE Request Sent!</div>
<div style="color: white;">
Request: DELETE /api/books/3
Response (200 OK):
{
"message": "تم حذف الكتاب بنجاح! 🗑️",
"deleted_id": 3
}
</div>
`;
}
// Quiz Function
function checkQuiz(element, isCorrect) {
const options = document.querySelectorAll('.quiz-option');
options.forEach(opt => {
opt.style.pointerEvents = 'none';
});
if (isCorrect) {
element.classList.add('correct');
element.innerHTML += ' ✅ صحيح! أحسنت!';
confetti();
} else {
element.classList.add('wrong');
element.innerHTML += ' ❌ خطأ! الإجابة الصحيحة هي GET';
}
}
// Rating Function
function rate(rating) {
const result = document.getElementById('ratingResult');
const messages = {
1: '💪 لا تقلق! راجع الشرح مرة أخرى وستفهم',
2: '👍 جيد! استمر في التعلم',
3: '🎯 ممتاز! أنت على الطريق الصحيح',
4: '🌟 رائع جداً! أنت تقريباً محترف',
5: '🏆 مذهل! أنت الآن خبير في RESTful API'
};
result.innerHTML = messages[rating];
result.style.color = rating >= 4 ? '#10b981' : rating >= 3 ? '#3b82f6' : '#f59e0b';
confetti();
}
// Confetti Animation
function confetti() {
const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe', '#00f2fe'];
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.style.position = 'fixed';
confetti.style.width = '10px';
confetti.style.height = '10px';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.left = Math.random() * window.innerWidth + 'px';
confetti.style.top = '-10px';
confetti.style.borderRadius = '50%';
confetti.style.zIndex = '9999';
confetti.style.animation = `confetti-fall ${2 + Math.random() * 2}s linear forwards`;
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 4000);
}
}
// Add confetti animation
const style = document.createElement('style');
style.textContent = `
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
`;
document.head.appendChild(style);
// Scroll Animation
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(50px)';
card.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
observer.observe(card);
});
</script>
</body>
</html>
Live Preview