إنشاء مشاريع عملية باستخدام JavaScript

بواسطة /

الدرس الثلاثون: إنشاء مشاريع عملية باستخدام JavaScript

في هذا الدرس، سنتعلم كيفية بناء مشاريع عملية باستخدام JavaScript، حيث سنقوم بتنفيذ ثلاثة مشاريع مختلفة:

  1. تطبيق قائمة مهام (To-Do List)
  2. آلة حاسبة بسيطة
  3. تطبيق بحث باستخدام Fetch API

سوف نغطي كيفية هيكلة المشاريع، كتابة الكود، واستخدام الأدوات والواجهات البرمجية المختلفة التي تعلمناها سابقًا.

1. مشروع 1: تطبيق قائمة مهام (To-Do List)

تطبيق To-Do List هو تطبيق يسمح للمستخدمين بإضافة مهام إلى قائمة، وحذف المهام المنتهية أو المكتملة. سنتبع هذه الخطوات لبناء التطبيق:

الخطوة 1: هيكلة HTML

أولاً، نحتاج إلى هيكلة صفحة HTML:

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add a new task" />
        <button id="addTaskBtn">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

الخطوة 2: تنسيق CSS

ثم، يمكننا تنسيق الواجهة باستخدام CSS:

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h1 {
    text-align: center;
}

input {
    width: 80%;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

li span {
    cursor: pointer;
    color: red;
}

li.completed {
    text-decoration: line-through;
    color: #6c757d;
}

الخطوة 3: كتابة JavaScript

وأخيرًا، نكتب الكود باستخدام JavaScript لإضافة وإزالة المهام:

// app.js
document.getElementById('addTaskBtn').addEventListener('click', addTask);
document.getElementById('taskInput').addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        addTask();
    }
});

function addTask() {
    const taskInput = document.getElementById('taskInput');
    const taskValue = taskInput.value.trim();

    if (taskValue !== '') {
        const li = document.createElement('li');
        li.innerHTML = `
            <span class="taskText">${taskValue}</span>
            <span class="removeTask">X</span>
        `;
        li.querySelector('.removeTask').addEventListener('click', removeTask);
        li.querySelector('.taskText').addEventListener('click', markComplete);

        document.getElementById('taskList').appendChild(li);
        taskInput.value = '';
    }
}

function removeTask(event) {
    event.target.parentElement.remove();
}

function markComplete(event) {
    event.target.parentElement.classList.toggle('completed');
}

الشرح:

  • HTML يحتوي على حقل إدخال النص لكتابة المهام، وزر لإضافة المهام، وقائمة ul لعرض المهام.
  • CSS يقوم بتنسيق التصميم لجعل التطبيق بسيطًا وجميلًا.
  • JavaScript يقوم بإضافة مهام جديدة، حذف المهام عند الضغط على “X”، ووسم المهام المكتملة بتغيير اللون.

2. مشروع 2: آلة حاسبة بسيطة

في هذا المشروع، سنقوم بإنشاء آلة حاسبة بسيطة تقوم بالعمليات الحسابية الأساسية مثل الجمع، الطرح، الضرب، والقسمة.

الخطوة 1: هيكلة HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled />
        <div class="buttons">
            <button class="btn">7</button>
            <button class="btn">8</button>
            <button class="btn">9</button>
            <button class="btn">/</button>
            <button class="btn">4</button>
            <button class="btn">5</button>
            <button class="btn">6</button>
            <button class="btn">*</button>
            <button class="btn">1</button>
            <button class="btn">2</button>
            <button class="btn">3</button>
            <button class="btn">-</button>
            <button class="btn">0</button>
            <button class="btn">C</button>
            <button class="btn">=</button>
            <button class="btn">+</button>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

الخطوة 2: تنسيق CSS

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#display {
    width: 100%;
    padding: 20px;
    font-size: 30px;
    text-align: right;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 5px;
}

button {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    background-color: #f0f0f0;
}

button:hover {
    background-color: #ccc;
}

الخطوة 3: كتابة JavaScript

// app.js
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.btn');

let currentInput = '';

buttons.forEach(button => {
    button.addEventListener('click', function() {
        const value = this.textContent;

        if (value === 'C') {
            currentInput = '';
        } else if (value === '=') {
            try {
                currentInput = eval(currentInput).toString();
            } catch {
                currentInput = 'Error';
            }
        } else {
            currentInput += value;
        }

        display.value = currentInput;
    });
});

الشرح:

  • HTML يحتوي على شاشة عرض وحقل لإدخال الأرقام والأزرار للعمليات الحسابية.
  • CSS يوفر تصميمًا بسيطًا وحديثًا.
  • JavaScript يستخدم eval() لحساب التعبيرات الرياضية المعطاة.

3. مشروع 3: تطبيق بحث باستخدام Fetch API

في هذا المشروع، سنقوم بإنشاء تطبيق بحث باستخدام Fetch API لجلب بيانات من مصدر خارجي (مثل JSONPlaceholder) وعرض النتائج في واجهة المستخدم.

الخطوة 1: هيكلة HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search App</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Search for posts..." />
    <div id="results"></div>

    <script src="app.js"></script>
</body>
</html>

الخطوة 2: كتابة JavaScript

// app.js
document.getElementById('searchInput').addEventListener('input', searchPosts);

function searchPosts() {
    const query = document.getElementById('searchInput').value;
    if (query.length < 3) {
        return;
    }

    fetch(`https://jsonplaceholder.typicode.com/posts?q=${query}`)
        .then(response => response.json())
        .then(data => {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = data.map(post => `<div><h3>${post.title}</h3><p>${post.body}</p></div>`).join('');
        })
        .catch(error => console.log(error));
}

الشرح:

  • HTML يحتوي على حقل بحث لكتابة الكلمات المفتاحية.
  • JavaScript يستخدم Fetch API للحصول على البيانات من JSONPlaceholder بناءً على المدخلات في حقل البحث.

الخلاصة

في هذا الدرس، قمنا بتطوير 3 مشاريع عملية باستخدام JavaScript:

  1. تطبيق قائمة مهام: لإنشاء، حذف، ووسم المهام المكتملة.
  2. آلة حاسبة بسيطة: لإجراء العمليات الحسابية الأساسية.
  3. تطبيق بحث باستخدام Fetch API: للبحث عن بيانات من مصدر خارجي وعرض النتائج.

هذه المشاريع هي بداية جيدة لتطوير مهاراتك في JavaScript والعمل مع APIs والواجهات التفاعلية.

اكتشاف المزيد من كود التطور

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

Related Posts

اترك رد

Scroll to Top