🟡 مشروع 1: To-Do List
الفكرة:
إنك تبني تطبيق To-Do List يسمح للمستخدمين بإضافة المهام، حذفها، ووضع علامة على المهام المكتملة.
المهام الرئيسية:
-
إضافة مهام جديدة.
-
حذف المهام.
-
وضع علامة على المهام المكتملة.
الكود الأساسي
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
const taskList = document.getElementById("taskList");
function addTask() {
const taskInput = document.getElementById("taskInput");
const taskText = taskInput.value.trim();
if (taskText === "") return;
const li = document.createElement("li");
li.textContent = taskText;
li.onclick = function() {
this.classList.toggle("completed");
};
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";
deleteBtn.onclick = function() {
this.parentElement.remove();
};
li.appendChild(deleteBtn);
taskList.appendChild(li);
taskInput.value = ""; // Clear input
}
</script>
<style>
li.completed {
text-decoration: line-through;
}
button {
margin-left: 10px;
}
</style>
</body>
</html>
الوظائف:
-
إضافة المهام: يتم إضافة المهام عند كتابة النص في المدخل والضغط على زر الإضافة.
-
حذف المهام: زر “Delete” يحذف المهمة.
-
علامة المهمة المكتملة: عند النقر على المهمة، تُضاف أو تُزال علامة عبر تغيير الـ CSS.
🟡 مشروع 2: آلة حاسبة بسيطة
الفكرة:
بناء آلة حاسبة بسيطة تدعم العمليات الحسابية الأساسية مثل الجمع والطرح والضرب والقسمة.
المهام الرئيسية:
-
إجراء العمليات الحسابية.
-
إدخال الأرقام والعمليات من خلال واجهة المستخدم.
الكود الأساسي
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<input type="text" id="display" disabled>
<br>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendOperator('+')">+</button>
<br>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendOperator('-')">-</button>
<br>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="appendOperator('*')">*</button>
<br>
<button onclick="appendNumber(0)">0</button>
<button onclick="clearDisplay()">C</button>
<button onclick="calculate()">=</button>
<button onclick="appendOperator('/')">/</button>
<script>
let currentInput = "";
function appendNumber(number) {
currentInput += number;
document.getElementById("display").value = currentInput;
}
function appendOperator(operator) {
currentInput += " " + operator + " ";
document.getElementById("display").value = currentInput;
}
function clearDisplay() {
currentInput = "";
document.getElementById("display").value = "";
}
function calculate() {
try {
currentInput = eval(currentInput).toString();
document.getElementById("display").value = currentInput;
} catch {
document.getElementById("display").value = "Error";
}
}
</script>
</body>
</html>
الوظائف:
-
إدخال الأرقام: عند الضغط على الأزرار، يتم إضافة الأرقام إلى شاشة العرض.
-
إجراء العمليات الحسابية: يتم استخدام
eval()لحساب النتيجة بناءً على المدخلات. -
الزر C: لمسح المدخلات.
🟡 مشروع 3: واجهة تسجيل دخول
الفكرة:
بناء واجهة بسيطة لتسجيل الدخول مع التحقق من صحة البريد الإلكتروني وكلمة المرور.
المهام الرئيسية:
-
إدخال البريد الإلكتروني وكلمة المرور.
-
التحقق من صحة البيانات المدخلة.
الكود الأساسي
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" required>
<br><br>
<button type="submit">Login</button>
</form>
<script>
function validateForm() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
if (email === "" || password === "") {
alert("Please fill out both fields.");
return false;
}
if (!/\S+@\S+\.\S+/.test(email)) {
alert("Please enter a valid email.");
return false;
}
alert("Login Successful!");
return true;
}
</script>
</body>
</html>
الوظائف:
-
التحقق من البريد الإلكتروني: يتم التحقق من صحة البريد الإلكتروني باستخدام تعبير نمطي.
-
التحقق من كلمة المرور: التأكد من أن الحقول غير فارغة.
🟡 مشروع 4: لعبة بسيطة (مثل XO أو Guess the Number)
الفكرة:
بناء لعبة Guess the Number، حيث يقوم الكمبيوتر باختيار رقم عشوائي والمستخدم يحاول تخمينه.
المهام الرئيسية:
-
اختيار رقم عشوائي.
-
التفاعل مع المستخدم للحد من محاولاته.
الكود الأساسي
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess the Number</title>
</head>
<body>
<h1>Guess the Number Game</h1>
<p>Guess a number between 1 and 100</p>
<input type="number" id="guess" min="1" max="100">
<button onclick="checkGuess()">Guess</button>
<p id="result"></p>
<script>
const secretNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
function checkGuess() {
const guess = document.getElementById("guess").value;
attempts++;
if (guess == secretNumber) {
document.getElementById("result").textContent = `You guessed it! The number was ${secretNumber}. It took you ${attempts} attempts.`;
} else if (guess < secretNumber) {
document.getElementById("result").textContent = "Too low! Try again.";
} else {
document.getElementById("result").textContent = "Too high! Try again.";
}
}
</script>
</body>
</html>
الوظائف:
-
تخمين الرقم: اللاعب يحاول تخمين الرقم العشوائي.
-
التفاعل مع المستخدم: يتم إعلام اللاعب إذا كان الرقم منخفضًا أو عاليًا أو صحيحًا.
🟡 مشروع 5: استهلاك API لعرض بيانات الطقس أو المستخدمين
الفكرة:
بناء واجهة تعرض بيانات الطقس أو قائمة المستخدمين باستخدام بيانات تأتي من API خارجي.
المهام الرئيسية:
-
استخدام Fetch API لطلب البيانات.
-
عرض البيانات المستلمة للمستخدم.
الكود الأساسي (الاستهلاك من API الطقس):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
</head>
<body>
<h1>Weather</h1>
<input type="text" id="city" placeholder="Enter city">
<button onclick="getWeather()">Get Weather</button>
<p id="weather"></p>
<script>
async function getWeather() {
const city = document.getElementById("city").value;
const apiKey = "YOUR_API_KEY";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url);
const data = await response.json();
if (data.cod === "404") {
document.getElementById("weather").textContent = "City not found.";
} else {
document.getElementById("weather").textContent = `Temperature in ${city}: ${data.main.temp}°C`;
}
} catch (error) {
document.getElementById("weather").textContent = "Error fetching data.";
}
}
</script>
</body>
</html>
الوظائف:
-
استخدام Fetch API: يتم إرسال طلب لعرض الطقس باستخدام بيانات المدينة.
-
عرض البيانات: عند استلام البيانات، يتم عرض درجة الحرارة الحالية في المدينة المدخلة.
💰 هل تبحث عن طريقة سهلة للربح من الإنترنت؟
ابدأ الآن واكسب أموالًا حقيقية من خلال خطوات بسيطة! 🌟
اضغط وابدأ الربح
